HTML5 és CSS3 összefoglaló PDF-ben


Egyik kedves látogatónk – Orsi – küldte be az alábbi, PDF formátumban letölthető html5 és css3 összefoglalót.

Frissítés: Orsi elküldte mail-ben és a 11., frissített, szerkesztett és kibővített kiadást (2014. júniusi verzió) is úgyhogy mostantól azt is le lehet tölteni.

HTML5 és CSS3 összefoglaló letöltése

Letöltés: HTML5 és CSS3 összefoglaló PDF v11.0 (9.9MB)

A dokumentum a korábbiakkal ellentétben már nem egy munkapéldány, de még mostanában is kap 1-1 frissítést (mint azt a verziószámból is lehet látni) és lehet, hogy a későbbiekben még tovább lesz finomítva. A könyvben már így is nagyon sok munka van, ezért ha van időtök és írnátok 1-1 visszajelzést róla, annak Orsi, a szerzője is örülne.

HTML5 és CSS3 összefoglaló PDF ben html5 css3 pdf konyv magyarul 600x691

HTML5 és CSS3 - PDF könyv letöltés

A PDF nem csak a HTML5 és a CSS3 újdonságokat tartalmazza, ennél jóval többet ad. Így kezdőknek, a nyelvekkel most ismerkedőknek is bátran ajánlható.

Jó olvasgatást mindenkinek és egy kérdés a végére:
Te már használod, vagy tervezed használni a HTML5-t és a CSS3-t?

Kapcsolódó bejegyzések:
  • HTML5 és CSS3 összefoglaló PDF ben

    A webdesigner depot-on jelent meg nemrég egy jó kis gyűjtemény 15db HTML5 és CSS3 generátor szolgáltatást felsorolva, amik között vannak tényleg jók és hasznosak …

  • HTML5 és CSS3 összefoglaló PDF ben

    Megjelent a W3C HTML5 logo hivatalos verziója. Az oldalán (http://www.w3.org/html/logo/) elérhető ahonlapokba illeszthető kód (most már lehet …

  • HTML5 és CSS3 összefoglaló PDF ben

    A CSS3 támogatottsága még elég gyatra, főleg IE terén, ezen igyekszik segíteni az alábbi megoldás:Használata.box { -moz-border-radius: 15px; /* …

  • HTML5 és CSS3 összefoglaló PDF ben

    Megjelent a népszerű front-end template rendszerének legújabb verziója, érdemes szedni és frissíteni aki használja.letöltés: http://html5boilerplate. …

  • HTML5 és CSS3 összefoglaló PDF ben

    Megjelent a népszerű HTML5 Boilerplate 2.0-ás legújabb verziójasite: http://html5boilerplate.com

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

94 hozzászólás

  1. Tamás Csaba (http://tonyo.hu) says:

    Hali!

    Nekem nagyon bejön ritka a jó magyar nyelvű írás ebben a témában fölég ilyen részletes és ráadásul teljesen ingyenes.
    Mondjuk Én a címe alapján kicsit másra számítottam, mert a HTML 5 és CSS3
    csak egy kis részét alkotja a műnek de így is nagyon franko, csak így tovább Orsi :D

  2. codee47 (http://www.code-art.hu) says:

    Gratulálunk Orsinak, szép, részletes összefoglaló.

  3. Virág János says:

    Kedves Orsi!

    Elsőnek is gratulálok az elég hosszú összefoglalónak! De ami nekem kicsit “rosszul” esett, hogy a leírás harmada a sima HTML-ről és CSS-ről szól, így a címe egy kicsit megtévesztő lehet, de ami szó volt az új változatokról, azt szívesen olvastam!

    Egy javaslatom a formázásnál: A kódokat én jobban kiemelném, mert így sajnos beleolvad az írásba, és így átláthatatlanabb lesz az egész.

    Üdvözlettel, Virág János
    Webmester

  4. Virág János says:

    Válaszolva a tutorial-os kérdésre:

    Egy ideig még nem fogom biztosan alkalmazni az újításokat. Ennek oka, hogy még nem terjedt el annyira, hogy ezt mindenki, minden egyes böngésző ki is tudja használni.

    A W3C szerint is, egyelőre ne csináljunk HTML5-ös oldalakat. :)

  5. Icebob says:

    Szép. Sok munka lehet mögötte. Csatlakozok az előttem szólóhoz, és szerintem is a kódokat ki kéne emelni a kódból. Legalább egy Courier betűtípus, meg egy kis bekezdés.

    Amúgy gratula hozzá!

  6. Icebob says:

    Jah és a kérdésre a válasz….. igen használom…. vagyis próbálok az újabb oldalakba mindig valami újat belevinni a HTML5-ös és CSS3-as fícsörökből. De persze csak módjával :)

  7. Harder (http://blog.harder.hu) says:

    Köszi a válaszokat. :)

    Én eddig még nem csináltam olyan oldalt, amely kimondottan a HTML5-re épült volna, nagyrészt azért amit már írtatok is: nem kiforrott, nem minden által támogatott.

    Ám ha kicsit utánaolvasgat az ember, azért találni jó dolgokat: HTML5 Boilerplate – A rock-solid default for HTML5 awesome

    Azt én sem mondom, hogy most aztán ezzel és ezután minden kódot erre alapozva írnék, de mindenképp figyelemreméltó és jó kiindulási pont lehet azoknak, akik szeretnek ilyesmivel kísérletezni, kicsit játszani. :)

    Amire még kíváncsi leszek a jövőben de nem igazán olvastam utána, hogy az angol nyelvű oldalakon erről mit írnak: a HTML5 és a SEO kapcsolata. Vajon hatással lesz-e a keresőoptimalizálásra a HTML5-ben megjelenő új elemek, vajon figyelembe fogja-e venni a google (és ha igen, milyen súllyal) ezeket?

    Más …
    Kicsit keresgettem, hogy HTML5 és CSS3 újdonság, összefoglaló terén van-e valami jó anyag a neten. Kutatás közben találtam ezeket, szerintem jók és talán tetszeni fog neked is:

    Up to Speed on HTML 5 and CSS 3

    Build a HTML5/CSS3 Website Layout Without Images – Part 1

    Ez utóbbinak van folytatása is, érdemes azt is megnézni.

  8. Orsi says:

    A HTML5-nek vannak kevésbé és jobban látható vonásai:

    1.) A HTML a 4.01-es verzióig az SGML-en alapult, az 5-ös verzió eltávolodott tőle. Amikor a webszerkesztő egy a 4-es és 5-ös verzióban egyaránt meglévő tag-et használja, számára nem tűnik fel és nem is kell tudnia, hogy az másként működik a 4-esben mint az 5-ösben. Ez csak a DTD-ből látszik: miután az 5-ös verzió nem SGML-alapú, nem kell egy konkrét DTD-verziót megadni, csak a konvenció miatt maradt a általános alak, amit a használatban lévő böngészők megfelelően értelmeznek ).

    2.) A HTML5-ben a tag-ekhez rendelhető, megjelenítéssel kapcsolatos jellemzőket kivették a szabványból, és CSS-tulajdonságokká váltak. Miután a visszafelé kompatibilitás miatt ezeket azonban továbbra is értelmezik az új böngészőverziók, a webszerkesztő elhatározásán múlik, hogy mennyire követi a tartalom és forma szétválasztásának elvét – alkalmazási kényszer nincsen.

    3.) A záró pár nélküli elemeket is le kell zárni a 4.01 verzió szerint, az 5-ös verzióban ez nem szerepel.

    Az 1.)-3.) pontokra a “HTML5 összefoglaló” c. fejezetben próbáltam felhívni a figyelmet. A HTML5 leírást akkor gondoltam teljesnek, ha a látszólag változatlanul hagyott korábbi verziós témák az új, aktuális ajánlással összhangban, egységes szerkezetben kerülnek bemutatásra.

    Nem úgymerül fel a kérdés, hogy támogatja-e egy böngésző a HTML5-öt, hanem úgy, hogy a HTML5 mely funkcióit támogatja.

    4.) Az igazán látványos újdonságot hozó audio és video funkciók a nyilatkozatok szerint kb. 1 év múlva lesznek kvázi szabványos és versenyképes állapotban, tehát itt legfeljebb a versengő codec-ek és befoglalási módjuk felsorolásáról lehet ebben a stádiumban írni.

    5.) Ami az új strukturális és csoportosító tag-eket illeti, ezeket vagy már most is értelmezik, vagy a megjelenő böngészőverziók ( IE9,Opera 11 )fogják értelmezni, és ekkor persze marad a szokásos “graceful degradation” feladat a régebbi böngészőknél ragadtak számára: div-ezés,vagy együttműködésük esetén a Chrome Frame.

    6.) A CSS3 részben bőven van pótolnivaló még már működő funkciókról.

  9. Psysoul (http://psysoul.hu) says:

    Sok mindenről írsz, de vicces, hogy a HTML5-ös dolgok, kb. a 60. oldalon kezdődnek, ráadásul a legérdekesebb elemekről nem írtál (audio, canvas, video, css3 animáció stb…).

    Nyilvánvalóan még sok fejlődés van ezen a területen, végleges video codec sincs, sőt, a szabványból kiszedték a codec definiálást, tehát gyártóspecifikus megvalósítások lesznek majd.

    János: Miért ne használjunk HTML5 dolgokat? Tehát várjuk meg míg minden böngésző támogatni fogja? Kb 5-7 év lenne…Egyszerűen csak olyan megoldást kell alkalmazni, ami visszafele kompatibilis (lásd HTML5 a youtubeon, vagy canvas javascript mely fut a régi IE alatt is).

    Egy adag HTML5 link nektek:
    http://www.delicious.com/psysoul/html5

  10. András Zsebe says:

    Nagyon köszönöm ezt az írást!

  11. Gades says:

    Gratula Orsi! Részletes és tartalmas leírás!

  12. Péter says:

    Gratula Orsi!
    Szép munka, de a karakterlapoknál hiányoltam az UTF-8 megemlítését. Pl.: magyar és (helyes) román karaktereket hogy lehet egy oldalra tenni másképp?

  13. Psysoul (http://psysoul.hu) says:

    Péter: A legjobb, ha UTF-8at használsz, abban jók a magyar karakterek.

    Esetleg az iso-8859-2 charset-et is használhatod, régebben ezt használtuk, de mindenképp próbáld meg az UTF-8-at használni, az szerintem a román karakterekhez is jó.

    (persze figyelj, hogy a fájl amit mentesz, az is UTF-8 legyen, és adott esetben a PHP headert is be kell állítani, ha a szerver nem teszi meg).

  14. Ottó says:

    Kedves Fodorsi!
    Megemelem klavimat felkészültséged, szaktudásod és teljesítményed előtt. Én, aki a napokban kezdtem el foglalkozni a CSS-sel, ennél jobb “tankönyvvet” nem is kívánhattam volna.
    Köszönöm írásodat!

  15. Harder (http://blog.harder.hu) says:

    Orsi elküldte a frissített, kibővített HTML5 és CSS3 összefoglaló új verzióját, amit kiraktam a cikkbe. :) Köszönjük Orsi!

  16. turkey says:

    Hasznos anyagnak tartom. Jól, profin összeállítottad!
    Köszönöm(köszönjük).

  17. GerBea says:

    Kedves Orsi!
    Köszönet a leírásért – bár még csak belenéztem, de nagyon használhatónak, és lelkiismeretes munkával készült írásnak tűnik, és hogy mindezt ráadásul ingyen elérhetővé tetted, az csak még tökéletesebbé teszi! Köszönet érte még egyszer!

  18. gyuri says:

    Hát igen ez az ami nekünk kel ügyi vagy köszönjük szépen.

  19. Harder (http://blog.harder.hu) says:

    Orsi ma elküldte a 3. változatot, ami frissített, szerkesztett, bővített (többhasábos kialakítás, színátmenetek, marquee) verzió és letölthető a cikkben megjelölt URL-ről.
    Köszönjük Orsi!

  20. Novatech (http://penzkeresesazinterneten.hu) says:

    Köszönöm ezt a nagyszerű hiánypótló anyagot.

  21. Koronczi Péter (http://www.facebook.com/profile.php?id=1281461626) says:

    Nagyon jó írás! Respekt Orsi!

  22. Bb says:

    Üdv!

    Köszönöm szépen Orsi!!

    A boltokban lévő “tankönyvek” csak jelenthetnek!

  23. Mouse22 (http://localhost/) says:

    Hello!

    Remek egy iromány, tényleg szép munka!

    Egy észrevételem van amiben szívesen segítenék is.
    A pdf fájl mint olyan nem tartalmaz bookmarkokat(pdf olvasókban bal szélen kis könyvjelző alatt dokumentum térkép), emiatt picit nehézkesebb benne a navigálás, bár itt megjegyezném, hogy a tartalomjegyzék perfekt.

    Belehet állítani, hogy a tartalomjegyzék bejegyzések bookmarkokká alakuljanak kimentésnél, bár nem biztos, hogy az a progi amivel kimentetted pont meg tudná ezt csinálni, mivel úgysejtem “nyomtatad”.
    Wordben készült mint látszik, azzal is ki lehet menteni pdfbe, van hozzá egy ingyenes plugin, saveasxpsandpdf a neve, az tudja is erre a megoldást(egy options gomb alatt lapul az opció), a file mérete pedig feltételezem, hogy nem fog érdemileg megváltozni, max kissebb lesz.
    Nagyon szívesen segítenék, hogy tudok kapcsolatba lépni Orsival? :)

    Balázs

  24. Orsi says:

    Mouse22: Köszönöm a tippet, a következő verziónál figyelembe veszem.
    Orsi

  25. VIktor says:

    Hali!
    Nem tudok újat mondani, felettem már mindent elmondtak. Ez tényleg egy nagyon ritka szép munka, aki ennyit dolgozik vele, azt már ki szokták adni könyvben. Én webprogramozást tanulok, és eddig azt hittem ismerem a html-t, de már az első 60 oldalban találtam nem egy újdonságot. Köszönöm. Szeretnék annyit kérni, hogy ha van újabb kiadás, akkor arról valami email értesítést küldjetek lécci, mert akkor leszedném. Különösen érdekel a html5, és a refencia oldal kicsit túl száraz nekem.

  26. Harder (http://blog.harder.hu) says:

    Szia Viktor,
    ha a hozzászóláskor megjelölöd, hogy kérsz értesítést az új hozzászólásokról, akkor fogsz értesülni arról hogy ha frissül az anyag, mert jelezni fogom itt is, nem csak a cikket frissítem.

  27. Szántó Gábor (http://szantogabor.com) says:

    Hatalmas gratula!
    Eddig a weblaboros css alapjai volt az ajánlott alapmű a css-hez a drupal.hu-n, asszem mostantól cserélünk.

  28. aboros (http://aboros.com) says:

    hát ez jó részletes :) gratulálok!

  29. Harder (http://blog.harder.hu) says:

    Sziasztok!
    Orsitól megkaptuk a 4. verziót, amit kibővített az űrlapokkal, elérhető a cikk frissített tartalmában! :)

  30. pogi says:

    húha, szépen össze van foglalva jó sok dolog :)))

    külön tetszésnyilvánítás, amiért nem a tipikus összehasonlítós módon van tárgyalva a HTML5, hanem úgy ahogyan kell. a legtöbb szakmabeli sem veszi figyelembe (fenntartva ezáltal a régi káoszt), hogy a HTML5 nem a HTML 4.01-et követő verzióugrás, hanem egy (teljesen) új nyelv! a laikus* olvasó számára könnyebbséget jelenthetne egy vázlatos történeti áttekintés a “nyelvcsalád” legismertebb tagjairól, így a legegyszerűbb megérteni, miért is van egybeírva a “HTML” és az a bizonyos “5″-ös. ;) (*laikus az, aki jobban szereti a felületet kapirgálni, aki elhiszi az állításokat utánajárás nélkül, aki nem mélyült el a tények mögötti fölöslegesnek tűnő apróságokban…)

    GML -> SGML
    az 1960-as években fejlesztették ki a GML (Generalized Markup Language) nyelvet, amelynek 1986 októberében született meg általános felhasználásra szánt szabványos utódja, az SGML (Standard Generalized Markup Language). nem érdemes túlzottan belemenni, hogy mi is ez, mondjuk úgy, hogy egy leírónyelv forma, amelyben nincsenek meghatározott jelentésű tag-ek, a lényege az egymásba ágyazható, átlátható, értelmezhető adatok írása.

    SGML -> HTML
    az első HTML specifikáció az SGML szintaktikáját alapul véve készült el 1993 júniusában (1991 végén volt hallható először a “HTML tag” fogalma). gyakorlatilag az történt, hogy konkretizáltak néhány tag-et (és hozzájuk tartozó attribútumokat), amelyek az adatok különféle megjelenítését tették lehetővé. (megjegyzendő tehát, hogy a HTML megjelenést biztosít az adatnak – “displays data”.) a HTML minden későbbi verziója (HTML 2.0, 1995; HTML 3.2, 1997; HTML 4.01, 2000) SGML alapú.

    SGML -> XML
    1996-ban jelent meg az XML (majd 1998 februárjában lett szabvány). ugyancsak az SGML nyomdokain jött létre. a HTML-lel ellentétben nem megjelenést biztosít, hanem körülírja az adatot (“describes data”). a feladata tehát mondhatni megegyezik a klasszikus SGML-ével, viszont egy precízebb, pontosabban behatárolt nyelv. ennek köszönhetően manapság is igen elterjedt.

    HTML + XML = XHTML
    a HTML 4.01 idején találkozott a két SGML utód. az XML precizitását szükségesnek látták a webböngészőknek szánt nyelvben is. 2000 januárjában jelent meg az XHTML 1.0, ami a HTML 4.01 XML-es újragondolása, “pontosítása”. a “well-formed” az az XML-ből kölcsönvett fogalom, ami a legnagyobb újdonság; továbbá a tag-ek az adatok körülírását látják el (ez is az XML-re volt jellemző), a megjelenítési elemek és attribútumok elavulttá lettek. (az XHTML 1.1-ben – ami az XHTML 1.0 Strict moduláris továbbvitele – már egyáltalán nem szerepelnek az elavult elemek és attribútumok.)

    CSS
    a CSS 1996. decemberi megjelenése tette lehetővé, hogy a megjelenés kikerüljön a web nyelvéből. ezidőtájt kezdte meg ugyanis hódító útját egy erre a célra szánt új (stílusleíró) nyelv, a CSS. a korábbi HTML-es megjelenítésnél sokkal többet tudott (és persze jobban). a tartalom és a megjelenés tehát két nyelvre külön tudott válni.

    összegezve: az SGML-ből kiindult a HTML és az XML, majd az XHTML-ben egyesültek, időközben megjelent a CSS, és azóta is boldogan élnek együtt… a w3c legutóbbi ajánlása értelmében az XHTML-CSS páros jelenti a jelen webes megoldásainak csúcsát. (a 2000-es években a hangsúly a dizájnra fektetődött, a CSS újabb verziójának megjelenésén kívül tehát nem sok újat kaptunk. persze ez volt a web mindennapjainkba való betörésének ideje, a WEB 2.0 genezise pedig eléggé felforgatta a meglevő technológiákat, kirajzolta az új igényeket…)

    HTML -> HTML5
    a HTML5-tel jött/jön el egy új korszak (a “jövő”). az egybeírás oka, hogy ez nem csupán egy verziószám változás, ez a webre szánt jelölőnyelvek legújabb generációja, ami “szakított” az SGML-lel. (a webböngészők sosem voltak SGML böngészők, hanem HTML értelmezők, ezért egy új szerializáció került bevezetésre HTML néven. a HTML5 már ezen alapul. az 5-ös a névben tehát nem a folytonosság, hanem a megkülönböztetés miatt szerepel.) a HTML5 magában hordozza a HTML verziók legjavát, a lehetőséget, hogy az XHTML-hez szokott sitebuildernek se kelljen lemondania szokásairól, na meg még egy sor újdonságot (és néhány az SGML alapú HTML-t támogató böngészők miatt kényszerűen örökölt dolgot is).

    HTML5 + XML = XHTML5
    ez már csak a ráadás. ahogyan a HTML-nek lett egy XML alapú párja, úgy a HTML5-nek is. ez az XHTML5. ez nem az XHTML korábbi verziójának továbbfejlesztése, hanem a HTML5 és az XML új közös gyermeke. (az XHTML 2.0 verziója fejlesztés alatt áll, és egy teljesen más irányba tart…)

    (csak megjegyezném, hogy egy olyan világban, amiben nem tudsz tökéletesen működő XHTML dokumentumokat közzétenni – hisz az application/xhtml+xml-ként kiszolgált lapokat az ie nem biztos, hogy hajlandó renderelni, a text/html-ek pedig nem igazi XHTML-ek, stb… – az XHTML5 létezése fölösleges. a legjobb választás véleményem szerint az XHTML szintaktikájával írt HTML5, tehát well-formed elekkel, rövid doctype-pal, HTML5-ös meta charset meghatározással. és egyelőre akár section és article ésatöbbi elemek nélkül, div-ekkel. így problémamentes, valid kóddal dolgozhatunk.)

  31. Orsi says:

    Pogi: Precíz áttekintés a nyelvcsalád tagjairól (én a Függelék I.-ben utaltam röviden a történeti fejlődés korábbi fázisaira). Két észrevétel:
    1. Úgy tudom, hogy az XHTML2.0 verzió fejlesztése a W3C vonatkozó munkacsoportjának 2010. dec. 17-i feloszlatásával (végleg?) abbamaradt.
    2. W3C használja a HTML5 kifejezést, WHATWG viszont azt állítja, hogy csak egy folyamatosan fejlődő HTML van, ezért a jövőben semmilyen verziószám nem indokolt (legalábbis ők nem fognak használni – majd meglátjuk).
    Orsi

  32. Gaál Robert says:

    Sziasztok!

    Én 2 nap alatt átrágtam magam az egész anyagon, és biztosan állíthatom, hogy több könyv tartalma sem fedi le teljesen mindazt, amit ez a “könyv” tökéletesen bemutat. Számomra nagyon érthető felépítése van, amit a könyvek keresése közben gyakorlatilag egyetlen helyen sem találtam még meg.
    Eddig CSS nélkül csináltam pár weboldalt, de most teljesen világossá vált, milyen elavult módszerekkel (táblázatos képek és elhelyezés…) igyekeztem látványos és egyedi külalakot elérni, ami most lényegesen könnyebben megvalósíthatóvá vált, ráadásul a keresők számára is látható a tartalom.
    Kedves Orsi, csak gratulálni tudok, és hatalmas köszönettel tartozom Neked mindazért a munkáért, amit beletettél ebbe a tudásanyagba. Az már csak hab a tortán, hogy mindezt ingyen elérhetővé tetted.
    PHP tanulás közben találtam meg a könyvedet, de az elmúlt két napban le sem tudtam tenni a Te anyagodat!

    Még egyszer: ezer gratula és köszönet!

    Robert

  33. Tibor says:

    Kedves Orsi! Először is gratulálok az íráshoz. Nagyon részletes és jó összefoglalás. A másik kérdésem/kérésem az lenne, hogy én tanfolyamokon és középiskolában is tanítok HTML/CSS alapokat, forrás megjelöléssel kizárólag oktatási célra egy-az egyeben felhasználhatnám, közkincsé tehetném a dokumentumot?

    Köszönettel: Tibor

  34. Orsi says:

    Tibor: Örülök, ha segít a tanulásban. Még nincsen készen – részben időhiány miatt, részben mert még maga a téma sem lezárt. Júniusra tervezek egy tovább bővített/aktualizált verziót. Ha lesz olyan észrevétel, mellyel javítható a leírás, köszönettel veszem.
    Orsi

  35. Tibor says:

    Nagyon várom és természetesen átolvasom. Nagyon köszönöm, hogy ilyen nagy lelkesedéssel foglalkozik a témával és sok kitartást kívánok.

  36. hossszu says:

    Tényleg nagyon igényes!

  37. f_andras says:

    ez kellett nekem, Köszönöm!

  38. Laci says:

    Üdv!

    Stíluslapban kimentettem a következőt és a html-fájlban megadtam hivatkozásnak a stíluslapot amiben ez állt:

    1
    2
    3
    4
    5
    6
    
    body
    {
    background-image: -moz-linear-gradient(red, white, green);
    background-image: -webkit-linear-gradient(red, white green);
    background-image: -o-linear-gradient(red, white, green);
    }

    Ki szerettem volna próbálni a színátmenetet háttérnek. Igaz három felé osztotta el, de ezt a három színt sok csíkban jeleníti meg.

    Mit ronthattam el? Tudnátok esetleg tanácsot adni?

  39. Deli Gábor says:

    Szép munka!

  40. Orsi says:

    Laci: A háttérnek jelen esetben nincsen színváltozás irányú mérete, ezért nem tudja a böngésző kiszámítani a kívánt színeloszlást. Add meg a háttér magasságát abszolút értékben ( pl: height:600px; – a szélesség nem érdekes ebben az esetben ),és background-repeat:no-repeat; – hogy ne ismétlődjön a színátmenet a háttérméret után ( ha nagyobb a háttered mint a display magassága, akkor a background-repeat-nek nincs is jelentősége, mert a görgető sáv úgyis csak a megadott méretig mutat ).

    A webkit-es kódban a white után tegyél vesszőt, mert különben semmit nem mutat a Chrome és a Safari a háttérből.

    Valószínűleg már közben rég rájöttél Te is, bocs a lassú reakcióért, de nyár van, kerültem a számítógépeket….
    Orsi

  41. Laci says:

    Orsi!

    Igen rájöttem közben! :) Semmi baj a késői válaszért! Érthető, hogy nyáron inkább máshol van az ember, én is kerülöm a gépet nyáron ha lehet. :)

    Köszönöm szépen még egyszer a választ! :)

  42. Bosi says:

    Először a kérdésre válasz: Igen, tervezem!

    Másodszor. Minden tiszteletem a Tied Orsi. Remek munka, gratulálok.
    Amennyiben azonos vagy a Fix.tv-s Fodorsival (márpedig könyveket ebben a témában kevés fodorsi ír), akkor büszke vagyok, hogy ismerhetlek.

  43. Kalló Iván says:

    Kedves, ismeretlenül is igen tisztelt Orsi!
    Ilyen érthető, racionálisan leíró (részletes elmagyarázást nem sajnáló) munkát, amiből az olyan suta agyú alak, mint én vagyok,-is simán megtudja tanulni az anyagot, csak egy nő írhat, meggyőződésem.Nagyon köszönöm, rám fért, mert két hét múlva be kell adnom az első honlapom vizsgaként, de a suliban nagyon nagyvonalúan adták le az anyagot, ez AZ ami kellett nekem! Köszönöm! Kalló Iván

  44. Stichelbaut (http://toll.columbanet.com) says:

    Kedves Orsi!
    Talan megis van remeny egy szebb és jobb vilagra…
    Az ilyen alkotasok es ezek kozkinccse tetele mindenkepp ezt sugallja!

    Koszonom!

  45. szpigy (http://hobbiinformatikus.blogspot.com/) says:

    Mostanában kezdtem el komolyabban érdeklődni a weboldal készítés iránt, miután néhány éve kísérleteztem FrontPage-el, ami elvette a kedvem az egésztől. Inkább indítottam egy blogspotos blogot. Hiánypótló alkotás lett ez a könyv, ami a rengeteg megfizethetetlen könyv közt aranyat ér egy kezdő vagy újrakezdő számára.

    Minden elismerésem az alkotónak, aki áldozott rá az amúgy is drága idejéből.
    Köszönöm szépen.

  46. Tilos (http://www.csmdesign.hu) says:

    gyakorlás , gyakorlás , gyakorlás , tutorialok , forráskódok tanulmányozása sem árt a profizmus eléréséhez , én is folyamatosan tanulok valami újat :)

  47. Sándor says:

    Tisztelt Orsi!

    Egy javítást eszközölnék az általad irtakhoz: a box-shadow résznél a színkódot az “inset” elé kell tenni, nem pedig a box-shadow után elsőnek.
    Helyesen a kód: “box-shadow: 4px -4px #800000;”. A CSS3 validálásánál hibának dobja ki, ha a szín nem hátul van.

    Tisztelettel

    Szikora Sándor

  48. Sándor says:

    Tisztelt Orsi!

    Elnézést kérek, de lemaradt az elöző hozzászólásomból: Gratulálok, nagyon tanulságos összefoglaló! :)

  49. Orsi says:

    Szikora Sándor: Köszönöm az észrevételt, a következő kiadásban javítom. Mentségemre szolgáljon, hogy korábbi w3c anyagokban is előfordult ez a sorrend, és a böngészőkkel való ellenőrzéskor is működött így.

  50. Tailor says:

    Kedves Orsi!

    Gratulálok a művedhez. Kiváló stílusban megírt, kezdők számára is jól érthető, számomra pótolhatatlanul hasznosnak bizonyult munka. De ahogy látom a hozzászólásokból, a profik is örömmel forgatják.

    Minden nagyrabecsülésem mellett lenne egy apró nyelvi észrevételem. Ez az 1.verzióban fel sem tűnt, a most felfedezett, még sokkal jobb 6.verzióban viszont minduntalan belebotlottam.

    Az egyenlőre azt jelenti, hogy valamit egy másik dologgal egyenlő nagyságúra, súlyúra stb, tehát vele valamilyen szempontból azonosra alakítok. Az egyelőre pedig azt jelenti, hogy most és még egy ideig.

    Ha elég figyelmesen olvastam, akkor az összes egyenlőre helyett azt kellene írnod, hogy egyelőre. Bocsi, de annyira tetszett, amit írtál, hogy úgy éreztem, kár ezt így benne hagyni.

    Tisztelettel és üdvözlettel

    Tailor

  51. Orsi says:

    Tailor: Köszönöm az észrevételt – igaz. Javítom.

  52. nazinorbi says:

    Szeretnék csatlakozni az előttem szólókhoz, a mű nagyszerűségét ki emelve.

    Egy pár építő hozzászólást szeretnék megosztani a későbbi verziókhoz.

    Űrlapok részletes ki emelése, az új elemekkel együtt.

    Főleg a kezdőknek lenne egy nagyon jó kiegészítés ha a tag-eket csoportosítva részletesen felsorolva benne lenne a könyvben. Mihez miket használjunk, mit jelentenek.

    Köszönöm szépen.

  53. B (http://axiomer.com) says:

    Nagyszerű. Pár javaslat első átfutás után:
    -kompatibilitási táblázat nem kell, legtöbb böngésző (Chrome, FF) gyakran frissül, így ha nincs 100%-on, nem érdemes berakni, mert folyton bővítik
    -olyan, hogy a HTML5-tel kapcsolatban az IE/egy böngésző régebbi verziója MÉG nem értelmez valamit, olyan nincs, nem is fogják. (de ilyen van a dokumentumban pl. itt: “Az Internet Explorer régebbi verziói ( IE 6/7/8 ) még nem értelmezik a HSL/HSLA színmódot, ezért egy hasonló RGB színt is célszerű megadni.”)
    -az egész eleje egy kicsit HTML-tutorial jellegű, szerintem nem kéne bele (vagy külön dokumentumként lehetne kiadni), mert szerintem a HTML5-tanulás értelmetlen már meglevő HTML-tudás nélkül. Lehetne az egész 2 dokumentum, egy HTML és egy HTML5

    Első ránézésre ennyi, majd ha részletesen végigolvasom, lehet, hogy még többet is írok.

  54. Szépe Viktor (http://www.szepe.net/) says:

    Kedves Orsi!

    Igen sok idődet vette igénybe ez a munka.
    A 91. oldalon – úgy gondolom – 400 DPI-t kívántál írni.
    Minden jót kívánok neked!

  55. Harder (http://blog.harder.hu) says:

    Sziasztok! Orsi elküldte a legfrissebb verzióját a HTML5 és CSS3 könyvnek, letölthető a fenti linken. :)

    A dokumentációban frissült a képtérkép, a 3D transzformációkról szóló rész, új háttérkép tulajdonságok kerültek bele, módosult a kurzor formázása, pszeudo-elemes formázásokról is olvashattok … ezeken kívül még több kisebb kiegészítés is belekerült.

  56. p47-Zso (http://e107hungary.org/) says:

    Üdv.
    Ez nagyon jó kis doksi lett, minden tisztelet a szerzőnek. Főleg hogy még gondozza és fejleszti is az “ingyenmunkát”.

  57. saint82 says:

    Nagyon köszönöm Orsi. Nagyon hasznos.

  58. Fefy (http://fefy.info) says:

    A magam nevében is köszönöm Orsinak és neked is Harder, hogy közzé lett téve :) Délutánra így meglesz a programom :D

  59. Tóth Nándor (http://www.webdesign-honlapkeszites.hu) says:

    Rendkívül hasznos és alapos leírás a html5-ről és css3-ról egyaránt. Köszönet érte!

  60. pingvin says:

    Gratulálok a készítőnek remek munka. Köszönet az áldozatos munkáért.

  61. peruipingvin says:

    Sziasztok!

    Még anno letöltöttem a “könyvet” és emlékszek ,már akkor is tetszett a könyv,de valóban voltak vele kisebb problémáim az átláthatóságát tekintve.
    Látom azóta történtek újítások(mármint ezt az oldalon olvastam,a könyvbe még nem volt szerencsém alaposabban belenézni)

    És most szeretnék élni a lehetőséggel,hogy megköszönjem a sok munát amit ebbe beleölt Orsi/beleöltetek nem tudom hányan…
    Köszönöm szépen a könyvet,életet mentettek vele ^^

    Üdv: egy hálás “olvasó”

  62. Tibor says:

    Ez a változat bővült az előzöekhez képest? Mármint nem kell leszednem az összeset? Nagyon jó kis össze foglaló köszönöm szépen a szerzőnek és a tutorial.hu-nak

  63. Harder (http://blog.harder.hu) says:

    Eleg csak a legfrissebb verziot leszedni :)

  64. nazinorbi says:

    Csatlakoznék a gartulálok táborához immár másodjára :)

    Szeretnék néhány építő jellegű gondolatot megosztani legfőképpen a html részhez

    – talán a xml és xhtml részel lehetne egy kicsit többet foglalkozni, különösen az hogy hogyan lehet szabájosan saját tag használni, saját atributum okat
    – megjelent egy pár új tag is a w3schools.com on amit már egyes böngészők támogatnak is
    rengeteg atributum jelent meg ezeket talán lehetne kicsit részletesebben bemutatni/összefoglalni

    Továbbá lenne egy olyan kérdésem Jquery vel szeretnél e foglalkozni amennyiben igen, abból össze állítani egy segédletet. Illetve arra gondoltam hogy ehhez a segédlethez lehetne beküldeni kisebb nagyobb scriptek leírását, elemzését. Azért gondoltam erre mert magyarul nem találtam sok részletes leírást, és könyvben is csak egyről van tudomásom de ahogy a könyvtár fejlődik a könyv úgy évül el, illetve nem tartalmazza az újdonságokat.

    További sok sikert

  65. Orsi says:

    NaziNorbi: Ez az összefoglaló azt célozza meg, hogy a szkript-nyelvek nélküli HTML és a CSS új generációjáról lehetőleg friss és remélhetőleg közérthető tájékoztatást nyújtson(XHTML/XSL-el való bővítése nem várható).

    A szabványosítás folyamata nem lineárisan halad, lásd a HTML5-nek HTML5.0-ra és HTML5.1-re való váratlan szétválasztása és az 5.1 verzió két évvel való halasztása, a CSS-nél a marquee és multicol modulok parkoló-pályára helyezése, a gradient és flex box modulok alapos átírása ( amikor már elég jól elterjedt az első verzió ), a -webkit- előtag kivezetésének halogatása, stb. Az összefoglaló időnkénti frissítésével és bővítésével próbálom ezeket a változásokat nyomon követni.

    Az érdeklődők számára a következő lépcsőfok a Javascript, DOM ( ezek szintén verzióváltáson mennek keresztül, lásd Harmony, Events 3 )és a Javascript-es HTML ( plussz a kapcsolódó, fejlesztés alatt álló )funkciók. Ezek egy önálló, legalább ekkora összefoglalót tesznek ki ( ha megírásra kerülnek ).

  66. Kéri Csaba says:

    szia!
    dokumentumtípus definiálásánál kis- vagy nagybetűvel kell írni a doctype-ot?

  67. Kun László says:

    Kedves Orsi!

    Nagyon köszönöm ezt a tankönyvet!
    Ami szomorúan érintett, hogy a kódrészleteket nem lehet kimásolni a dokumentumból, így kénytelen az ember a példákat újra begépelgetni.

    Üdvözlettel:
    Kun László

  68. Orsi says:

    Kéri Csaba: mind a kettő szabályos ( a régebbi szabvány nagybetűt írt elő, ezért most is sokan így használják ).

  69. Zsolt says:

    Kedves Orsi,

    Emlékeztem korábbról az összefoglalódra hogy milyen igényes összeállítás, de a szerzőt tekintve elnézést csak arra hogy Orsi :-) De a Google segített “orsi html” és már meg is van az aktuális verzió :-)
    Szerintem elképesztő amilyen alapos vagy és végre valaki rendet vág a kusza internetes szabványok között, általánosan nagyon olvasmányos. Nagyon sokat tanultam belőle, számomra az összes css/html könyvek közül (az angolokat is beleértve) a legjobb és fő helyen van a Google drive-omon

    Üdv.
    Zsolt

  70. Harder (http://blog.harder.hu) says:

    Sziasztok!
    Orsinak köszönhetően az előbb megint frissült a leírás, kikerült a 8-as verzió, újdonságok: média lekérdezések, legördülő menük, kijelölők

  71. Csabi says:

    A következő kóddal van problémám:

    Validáláskor az alábbi hibaüzenetet kaptam:
    Bad value copyright for attribute name on element meta: Keyword copyright is not registered.
    Le tudom fordítani, de nem értem. Mi a baj?
    Másik kérdésem: A weboldalak tartalmának pozícionálása kimerül a CSS-ben? (Talán még én vagyok túl buta, de a weboldalam okosabban is reagálhatna a képernyőfelbontás módosítására ill. a kicsinyítésre-nagyításra.)

  72. Zsolt says:

    Köszi már le is töltöttem, tetszik általánosan az angol kifejezések pont eltaláló magyar fordítása, na és olyan színes apróságok hogy végre tudom miért néha #fff a rövidítés színekre css kódokban, vagy a fontoknál a talp és talpnélküli kategóriák. Csak dícsérni lehet, természetesen érdekelne a DOM és Javascript folytatás, ha .pdf dokumentumban lehetne donate gomb már nyomnám is de komolyan

    Üdv.
    Zsolt

  73. Unregistered says:

    Szia Orsi!

    Honnan látom, hogy mi változott v6-hoz képest?
    v6-ot elolvastam (kiváló munka) de nem szeretném újra elolvasni a 300+ oldalt :)

    Köszönöm!

  74. Orsi says:

    Unregistered: Új részek: 1.2 pont, 3.6.2.1. f/5 és i/1-3 pontok, 3.16 pont, 3.20.1. d) pont, 3.31 pont, 3.32 pont. Átírva: 3.25 pont és Függelék II.

  75. Unregistered says:

    Szia Orsi!

    Köszönöm szépen! Így azért máris más ;)
    Esetleg a könnyebb követhetőség kedvéért egy “verziókövetési” listát (hogy melyik pdf verziódban mi frissült) a tartalom vagy az egész pdf végére nem tervezel? Így jobban tudnánk követni a dolgot mi is. (Vagy esetleg van valami egyéb hely ahol erre vonatkozóan van infó?)
    Amúgy ha már itt tartunk nincs valami feliratkozási lehetőség, hogy kapjunk értesítést amikor kijön egy új verzió?
    Na nekem az egésszel ennyi a “nyűgöm”, de kb már vagy 10+ kollégámnak és ismerősömnek ajánlottam hogy olvassa csak el…

    Köszönöm szépen!

  76. Harder (http://blog.harder.hu) says:

    re: Amúgy ha már itt tartunk nincs valami feliratkozási lehetőség, hogy kapjunk értesítést amikor kijön egy új verzió?

    Ha feliratkozol itt a bejegyzés alatt található “Értesíts mail-ben, ha válasz érkezik.” -ra, akkor értesülni fogsz a frissítésekről is, beírom majd mindig egy hozzászólásba, mikor frissül. Eddig is igyekeztem a feliratkozók figyelmét erre felhívni, volt hogy a lapon is kapott hírt a frissítés. :)

  77. Orsi says:

    Unregistered: Amikor beküldtem egy-egy újabb verziót, a főbb újdonságokat általában megadtam ( lásd korábbi Harder-bejegyzéseket ). A kisebb bővítések / frissítések külön nyilvántartása szerintem nehézkes és szükségtelen.

  78. Alex Black (http://-) says:

    Üdv mindenkinek,igen jó volt olvasni ezt a kis tanulmányt,nagyon érdekes,és összefoglaló,aki egy weboldalt szeretne magának,ezekkel jó ha tisztába van,csak így tovább:)

  79. Harder (http://blog.harder.hu) says:

    Üdv mindenkinek! Orsi ma küldte a legfrissebb, 9. verziót, ezúton is köszönet neki a sok munkáért!

  80. Zsolt says:

    Érdekes valahogy éreztem ma hogy újra rá kellene keresnem az “orsi html”-re a Google-n, lám és éppen tegnap küldte a 9. verziót :-)

    Köszi szépen érte :-)

  81. Goszi says:

    Ezt a PDF-et letöltöttem.
    Kiemelve a lényeget könyvként, szürkeárnyalatosban(értelenszerűen átnézve) jó lenne.

  82. Gábor (http://www.bizonysagtetelek.hu) says:

    Fent vannak valahol a forráskódok, hogy ki lehessen próbálni? Mert a weblap elrendezések fejezetben azért vannak elég hosszúak.

  83. Harder (http://blog.harder.hu) says:

    Sziasztok! Orsi átküldte a 10. verziót, amit le tudtok tölteni a frissített cikkből. Köszönjük! :)

  84. Zsolt says:

    Orsi nagyon köszi a 10. verziót! :-)

  85. Winkl3r says:

    Köszönjük szépen! Fáradtságot nem sajnálva, állhatatosan éveken át – wow…
    Azt hiszem neki is ülök átolvasni.

  86. Harder (http://blog.harder.hu) says:

    Sziasztok! Orsi elküldte a legfrissebb verziót amit már lehet tölteni a cikkben lévő linkről. Az Űrlapok és Színek rész lett módosítva, és egy rövid SVG ismertetés került újonnan bele.

  87. Gondos Gábor says:

    Kedves Orsi! Szuper munka, hasznos, érthető.
    Egy kis visszajelzés: A 38. oldalon tartok, a táblázatnál. Talán (apró) hiba, hogy a hónap szövegrész bennmaradt a kódban. De a fölötte olvasható megjegyzés utal rá, hogy ki kell hagyni, szóval nem vagyok biztos a szerző szándékában :-)
    Gratulálok, további jó munkát!

  88. Orsi says:

    Gondos Gábor: Az az igaz, hogy ki kell hagyni a kódból. Elnézést a figyelmetlenségért, és köszönöm az észrevételt.

  89. Gondos Gábor says:

    Igazán apróság és igazá szívesen. :-)
    üdv
    GG

  90. Evita Tulip (http://www.magyarhoszivattyu.hu) says:

    Kedves Orsi!

    Magasra tetted a mércét!

    Gondos Gábor vonalát követve még néhány apróbb hibára szeretném felhívni a figyelmed:

    53.oldalon, oldal közepén:

    src lezáró idézőjel és poster attributum közül space hiányzik

    59.oldalon, oldal közepe táján:
    Például: “A LMN …”
    szövegből hiányzik a ‘z’ betű
    helyesen:
    Például: “Az LMN …”
    utána a monitorképen így szerepel

    64.oldal, módosított teendők listája:
    Az ernyőkép alapján hiányzik belőle a következő sor:
    becsomagolni
    + szebb lenne, ha az első ‘li’ sorban lenne egy space karakter a ‘del’ és ‘ins’ tagek között, és ha ezt módosítod, az ernyőképet is változtasd hozzá

    95.oldal: magyar nyelvtan: -val/-vel rag hasonulása
    ‘reset-el’ és ‘submit-el’
    helyett:
    ‘reset-tel’ és ‘submit-tel’
    kell. Olvasd ki hangosan a ‘reset-el’ szót. Egészen mást jelent.

    113-114.oldalon: TAG-ek listája
    hasznos lenne olyan ‘szójegyzékként’ az oldalszámokat is feltüntetni, hogy hol volt szó róluk.

    Egyelőre csak a HTML5 részt olvastamát.
    A továbbiakat is papírral a kezemben fogom tanhulmánmyozni, és ha hibát találok, nem kíméllek.
    Egyébként ritkán találkozom olyan kiadvánnyal, amiben ennyire elenyésző a hibák száma!
    Gondos munka! Köszi!

  91. Orsi says:

    Evita Tulip: Köszönöm a mostani és jövőbeli észrevételeket – az őszi, frissített/bővített kiadásban szerepelnek majd a javítások.

  92. Evita Tulip (http://www.permanent.hu) says:

    Kedves Orsi!
    Szeretnék egy megjegyzést hozzáfűzni a 95. oldalon a ‘button’ elemről írtakhoz:
    nemcsak script nyelvvel lehet feldolgozni, hanem linkként is remekül működik a ‘button’. Bármilyen linknek (akár oldalon belülinek is) teljesen egyedi kinézetet lehet adni a ‘button’ tag segítségével. Még képet is lehet belefűzni.
    Mintaként a fenti honlapomon a ‘Termkékek’ felirat ezzel a technikával van elkészítve. Figyelemfelkeltőbb, mint egy bármilyen div (bár lehet, hogy azzal is meg lehetett volna csinálni).
    Egyébként folyamatosan változtatom ezt a honlapot, ahogy tanulom az új dolgokat a ‘tankönyvedből’.
    Ezúton is köszi!

  93. Gondos Gábor says:

    Kedves Orsi!
    A 66. oldalon a v) bekezdésben, a CTR+C billenytyű kinézet kódolásakor nem értem, hogy miért van duplán a címke. Ha valami kivétel, akkor esetleg egy megjegyzést érdemes lenne odaírni.
    Továbbra is jó a cucc, köszönet érte!!!

  94. Orsi says:

    Evita Tulipe, Gondos Gabor:
    Nyaralok, 2 het mulva tudok reagalni.

Szólj hozzá
a HTML5 és CSS3 összefoglaló PDF-ben 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>