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 12., 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 v12.0 (11.3MB)

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 - PDF könyv letöltés
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?

Hugyecz Görgy (Harder)
Hugyecz Görgy (Harder)
http://blog.harder.hu
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.
Facebook Linkedin

KAPCSOLÓDÓ CIKKEKTÖBB A SZERZŐTŐL

115 HOZZÁSZÓLÁS

  1. 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

  3. 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. 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. 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. 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. 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. 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. 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

  12. 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. 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. 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. 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. Hasznos anyagnak tartom. Jól, profin összeállítottad!
    Köszönöm(köszönjük).

  17. 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!

  19. 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!

  22. Üdv!

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

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

  23. 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. Mouse22: Köszönöm a tippet, a következő verziónál figyelembe veszem.
    Orsi

  25. 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. 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.

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

  30. 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. 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. 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. 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. 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. 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.

  38. Ü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?

  40. 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. 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. 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. 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. Kedves Orsi!
    Talan megis van remeny egy szebb és jobb vilagra…
    Az ilyen alkotasok es ezek kozkinccse tetele mindenkepp ezt sugallja!

    Koszonom!

  45. 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. 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. 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. Tisztelt Orsi!

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

  49. 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. 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

  52. 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. 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. 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. 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. Üdv.
    Ez nagyon jó kis doksi lett, minden tisztelet a szerzőnek. Főleg hogy még gondozza és fejleszti is az „ingyenmunkát”.

  58. 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

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

  61. 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. 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

  64. 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. 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. szia!
    dokumentumtípus definiálásánál kis- vagy nagybetűvel kell írni a doctype-ot?

  67. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Ü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. Üdv mindenkinek! Orsi ma küldte a legfrissebb, 9. verziót, ezúton is köszönet neki a sok munkáért!

  80. É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. Ezt a PDF-et letöltöttem.
    Kiemelve a lényeget könyvként, szürkeárnyalatosban(értelenszerűen átnézve) jó lenne.

  82. 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. Sziasztok! Orsi átküldte a 10. verziót, amit le tudtok tölteni a frissített cikkből. Köszönjük! :)

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

  86. 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. 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. 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.

  90. 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. 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. 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. 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!!!

  95. Gondos Gábor: A dupla címke nem sajtóhiba, a CTR és C jelölik a CTR és C billentyűket, és az újabb ….+….. jelöli a kettő együttes használatát.
    Két megjegyzést tesz az ajánlás:
    1)a külső ….+…. elhagyása nem számít hibának, az csak logikai segítség
    2)a teljes kbd HTML-es kódolás helyettesíthető CSS formázással is.
    Saját megjegyzés: amikor a HTML-ből kivették a formázást, sok népszerű címkének kellett – sokszor erőltetett – tartalmi jelentést találni ( lásd u, em, strong, stb. ) és a kbd is ezek közé tartozik.

  96. Gondos Gábor: A kbd kódot több helyen nem vitte át a bejegyzés, értelemszerűen az első CTR és C-ről, és a …..+….-kről hiányzik a nyitó és zárótag.

  97. Evita Tulip: A button-t leggyakrabban eseményjellemzőkkel használják. Arra nem tudok válaszolni, hogy a keresők hogyan értékelik a button-nal megvalósított link-et.

  100. Kedves Orsi!

    Egy kis hiba a 90. oldal alján:
    az input type=”password „ a password szó utáni szóköz nálam azt a tünetet okozza, hogy nem alakítja át a beírt betűket pöttyökké, szóköz nélkül input type=”password” viszont működik.
    de amire erre rájöttem! :-)
    Továbbra is örömmel használom a köynvedet.
    Üdv.
    GG

  101. Gondos Gábor: Sokadszorra változtatok a formázáson – mindig kapok ötleteket, hogy hogyan lehetne vizuálisan jobban szétválasztani a szöveget a kódoktól, és áttekinthetőbbé tenni magukat a kódokat. Nos ebben a verzióban az ötlet a színezések mellett a jellemzők félkövér dőlttel, az értékek normál betűtípussal való írása. Megnéztem a Word-ös verziót – a kérdéses helyen nincsen szóköz, legfeljebb úgy látszik a betűtípusváltás miatt ( a másik oldalt meg ugyanezért torlódnak a karakterek ). Miután ez még más helyen, vagy másnak is okozhat szenvedést…. nem tudom, létezik-e egyértelműen jó formázás.

  103. Orsi átküldte az új verziót, frissítettem a cikkben a linket úgyhogy most már le lehet tölteni. Frissített részek: hátterek színkeverése, szöveg illesztése alakzatra, átmenetek/animációk lépcsős függvényekkel
    Köszönjük Orsi!

  105. Ma van a W3C megalakulásának 20 éves évfordulója. Az ünnepélyes megemlékezés előestéjén hivatalosan is bejelentették a HTML5 ajánlás végleges elfogadását, azaz ez vált az aktuális HTML szabvánnyá.

  106. Kedves Orsi, letöltöttük és kinyomtattuk ezt a szuper kis jegyzetet. Olvasom, csinálom a feladatokat, kb. a felénél tartottam, mikor máris kint az új verzió. Nem semmi! Nem lehetne-e valami megoldást találni arra, hogy ha valaki elkezdett egy verziót tanulni, akkor tudja, hogy az új változatban mi az, ami új. Hogy ne kelljen újra kinyomtatni/átnézni az egészet. Nem tudom, hogy lehetne ezt megoldani, de tán mások szerint is hasznos lenne. Köszönöm.
    GG

  107. Gondos G.: Egy új verzió általában kb. 10% tartalombővülést tartalmaz, mely két részre osztható:
    a) új témák, melyet Harder felsorol, amikor felteszi a honlapra (ez a kb. 10%)
    b) néhány apró frissítés/kiegészítés/javítás – ezek nincsenek felsorolva, de érdemi változást nem jelentenek

  110. Szia Orsi!

    Rég írtam de lenne egy két építő jellegű hozzá szólásom/ötletem a füzet későbbi fejlesztéséhez.
    Egy olyan táblázatra gondoltam ahol fel van tüntetve a különböző elemek és azok böngésző támogatottsága css1-3 + amit nem rég olvastam a készülő css 4 elemekkel ki bővítve.(http://www.w3schools.com/cssref/css3_browsersupport.asp) valahogy így.

    + egy olyan oszlop ahol nem csak a properity név van hanem a rendes neve is. Alatta pedig egy olyan felsorolás milyen atributumokat vár, annak mi a neve, mértékegysége. Egyfajta nagy lényegretörő, rövid, össze foglaló.

  111. A Google bejelentette, hogy a YouTube-on az Internet Explorer 11, Safari 8, ill. Firefox 36 használata esetén a HTML5-ös lejátszót teszi alapértelmezetté a Flash helyett ( a Chrome esetében már tavaly megtette ezt a lépést ).

  112. Norbi: Az általam ismert legáttekinthetőbb és rendszeresen frissített honlap az egyes böngészők ( beleértve a korábbi verzióikat is ) és a HTML/CSS/SVG jellemzők/tulajdonságok nyilvántartására a caniuse.com. Akár az egyes jellemzők/tulajdonságok, akár az egyes böngészőverziók kiválasztásával, vagy több böngésző egyidejű összehasonlításával nagyon világosan tájékoztat az alkalmazhatóságokról és változásokról.
    A második észrevételt a következő verziónál figyelembe veszem.
    Köszönöm a javaslatokat, és sajnálom, hogy nem tudtam előbb reagálni, de hozzászólásodat másfél hónapig nem írta ki a honlap.

  113. A HTML5 terjedése felgyorsult:

    – új irányelvet dolgozott ki a hirdetések számára az internetes hirdetők, ügynökségek és kiadók szakmai szervezete (IAB) – iparági kódexükben a Flash helyére a HTML5-öt teszi
    – a Chrome-ban a beépülő modulok használatának beállításánál a Flash teljes engedélyezése és teljes tiltása mellett alapértelmezettként megjelent a „fontos tartalom detektálása és futtatása” opció. Így a Flash-alapú hirdetések már nem csak a mobil platformokon, hanem az asztali böngészők egy részén sem jelennek ( automatikusan ) meg
    – Netflix egyre több böngésző esetén áll át alapértelmezetten Silverlight-ról HTML5-re:
    Windows XP SP2-től Chrome 37- esetén
    Windows Vista-tól Firefox 42- esetén
    Windows 8.1-nél Internet Explorer 11 esetén
    Windows 10-nél MS Edge esetén
    Mac OS X 10.6-tól Chrome 37- esetén
    Mac OS X 10.10-tól Safari esetén

  115. Kedves Orsi!
    Én csak most ismerkedem a html-lel és css-sel, és köszönöm ezt a nagyon igényesen megírt könyvet, sok munka van benne! Érdemes továbbvinni, ahogy a html fejlődik.

    Egy-két gondolat: a szöveg és a kódolás elválasztása szerintem lehetne jobb. Most láttam, hogy a kommenteknél is felmerült ez. Én minimum a kódrészek elé és mögé beszúrnék egy-egy sort (ha doc formátumban meglenne a könyv, megcsinálnám, és úgy láttam, oldalhivatkozások és index sincs, úgyhogy ez talán nem is okozna gondot), vagy/és bekeretezném a kódrészeket, vagy – ez lenne a legszebb – valamilyen halvány háttérszínnel kiemelném.
    Másik szintén formai megjegyzésem: érdemes lenne valamilyen sans-serif betűtípusú verzióját (is) megcsinálni a könyvnek (vagy csak a magyar szövegnek). Bár ez részben ízlés kérdése, de képernyőn, tableten ezek egyszerűen jobbak (én pl. tableten olvasom). Másrészt pl. egy Arial vagy Verdana modernebb, letisztultabb betűtípus. Lehetne egy serif meg egy sans-serif verziója a könyvnek, miért ne? Ha oldalhivatkozásban vagy másban nem okoz gondot, gondolom nem nehéz megcsinálni.

    Végül egy megjegyzés, most olvasom a könyvet, a 92.o.-on a checkbox-oknál a ‘name’-ek értékeinek tudomásom szerint azonosnak kell lennie (hiszen adatbázis attribútum), tehát nem nyelv1 nyelv2 stb, a ‘value’ ami különböző. A ‘radio’-nál már jó.
    És fura hogy a könyv szerzője inkognitóban van. :-)
    Üdv.

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét