html5 css3 osszefoglalo v5

HTML(5) + CSS(3)SZABVNYKVET STATIKUS WEBOLDALAK SZERKESZTSE0.42 verzi

2011. jnius

TARTALOMELSZ..................................................................................................................................... 1 1. ALAPOK ................................................................................................................................ 3 1.1. Tartalom s forma: HTML s CSS ................................................................................. 3 1.2. A weblapkszts hardver s szoftver ignye .................................................................. 4 1.3 Statikus webhelyek kialaktsnak szoksos mdja......................................................... 4 2. HTML5................................................................................................................................... 5 2.1. A HTML nyelvtana ......................................................................................................... 5 2.2 A weboldal szerkezete ...................................................................................................... 6 2.3 Az els konkrt weblap .................................................................................................. 10 2.4 Alapvet HTML cmkk ................................................................................................ 11 2.5 Listk .............................................................................................................................. 15 2.6 Tblzatok ...................................................................................................................... 22 2.7 Kpek ............................................................................................................................. 35 2.8. Mozgkpek s hang ..................................................................................................... 37 2.9. Begyazott bngsztartalom ....................................................................................... 41 2.10. Karakter entitsok ....................................................................................................... 42 2.11 Tartalmi/formzsi HTML cmkk .............................................................................. 44 2.12. A weboldal egyes rszeinek formzst elsegt HTML cmkk ............................. 53 2.13. Hivatkozsok ............................................................................................................... 60 2.14. Meta-adatok ................................................................................................................. 70 2.15. HTML5 sszefoglal................................................................................................... 72 3. CSS3 ..................................................................................................................................... 75 3.1 Kitltszveg s kitltkp ............................................................................................ 75 3.2 Kpformtumok ............................................................................................................. 76 3.3 Sznek ............................................................................................................................. 77 3.4 rtkek s mrtkegysgek ............................................................................................ 84 3.5 Az elemi doboz-modell .................................................................................................. 86 3.6 A CSS nyelvtana ............................................................................................................ 88 3.7. A CSS hierarchija ........................................................................................................ 93 3.8. Bettpusok.................................................................................................................... 94 3.9 Sznek definilsa ......................................................................................................... 103 3.10. Httrszn definilsa ................................................................................................ 104 3.11. Blokkszint elemek elhelyezse I. ............................................................................ 106 3.11.1. Mretek............................................................................................................... 106 3.11.2. Elhelyezs........................................................................................................... 107 3.12. Szveg ....................................................................................................................... 109 3.13 Listk formzsa ........................................................................................................ 119 3.14 Standard vonaltpus szgletes szeglyek.................................................................. 122 3.15. Standard vonaltpus lekerektett szeglyek ............................................................. 131 3.16. Kpekbl ksztett szeglyek .................................................................................... 136 3.17. Blokkszint elemek elhelyezse II. ........................................................................... 137 3.17.1. Elhelyezs mdja................................................................................................ 137 3.17.2 Lthatsg ........................................................................................................... 143 3.17.3 Lthatsgi sorrend ............................................................................................. 144 3.17.4 A megjelents mdja .......................................................................................... 146 3.18. Doboz rnykok ........................................................................................................ 147

3.19. Httrkpek definilsa ............................................................................................. 152 3.20. Tblzatok formzsa ................................................................................................ 158 3.21. Tlnyls ................................................................................................................... 170 3.22. Egrkurzorral a megjelents megvltoztatsa .......................................................... 175 3.22.1. Hirtelen tmenet ................................................................................................. 175 3.22.2. Folyamatos tmenet............................................................................................ 177 3.23. Tbbhasbos elrendezs ............................................................................................ 180 3.24. Szntmenetek ........................................................................................................... 188 3.24.1. Lineris szntmenetek ....................................................................................... 188 3.24.2. Sugrirny szntmenetek ................................................................................ 192 3.24.3. Peridikusan ismtld szntmenetek .............................................................. 196 3.25. Mozg tartalom ......................................................................................................... 200 3.26. Skbeli transzformcik............................................................................................. 201 4. FGGELK I. rlapok ................................................................................................ 205 4.1. rlap tartalmi kialaktsa ............................................................................................ 205 4.2. rlap formzsa .......................................................................................................... 218 5. FGGELK II. - Trtneti sszefoglal ......................................................................... 223 5.1 Elzmnyek I. ( Internet ) ............................................................................................ 223 5.2 Elzmnyek II. ( hiperszveg, jellnyelv ) ................................................................ 224 5.3 Elzmnyek III. ( HTTP, HTML, www ) .................................................................... 224 5.4 Elzmnyek IV. ( W3C, CSS, PNG ) .......................................................................... 225 5.5 Elzmnyek V. ( XHTML ) ......................................................................................... 226 5.6 A jelen s belthat jv ( HTML5 s CSS3 ) ............................................................. 228 6. FGGELK III. - A CSS tulajdonsgok hasznlhatsga .............................................. 229

ELSZA HTML(5) + CSS(3) rsnak egyik apropja a tmhoz kapcsold kt kerek vfordul. Idn lesz a vilg els web-szervere indulsnak 20 ves vfordulja, melyre feltettk a HTML koncepcijt megvitats s tovbbfejleszts cljbl. ( A HTML5 ennek a jellnyelvnek az tdik nagy revzija. ) Ksbb a gombamd szaporod, az egyszer szvegen tl egyre tbb megjelentsi elemet tartalmaz weboldalak formzsval a HTML kezdte elveszteni egyszersgt s ttekinthetsgt, ezrt dolgoztk ki 15 vvel ezeltt a megjelentst kln kezel CSS stluslapnyelvet, melynek harmadik nagy revzija a CSS3. Az vfordulnl nyomsabb ok volt azonban az a hatrozottan felgyorsult folyamat, ami a szabvnyosts s a bngszk fejlesztse tern bekvetkezett. A gyors verzi-vltsokkal verseng bngszgyrtk ugyanis szolgltatsaikban a HTML5 s CSS3 kompatibilitst hangslyosan kezdtk kezelni, s a Microsoft csatlakozsa a World Wide Web konzorcium ajnlsaihoz mrfldkvet jelent a weblapszerkeszts szabvnyostsa tjn. A jelenleg zajl mlyrehat vltozsok kvetkeztben idszer a korbban megszerzett HTML/XHTML-ismereteknek az j szabvny szerinti jrartelmezse s bvtse, ill. a most tanulst kezdknek mr az j alapokon val indulsa. Ugyancsak j perspektvt nyitnak a CSS3 ltal lehetv tett megoldsok, melyek a kpszerkesztk s szkript-nyelvek egyes funkciit tvve egysgesebb szerkezet s gyorsabban mkd weblapokat eredmnyeznek. Br a HTML5 egyes elemeinek fejlesztse s szabvnyostsa mg folyamatban van s rszleteiben mdosulhat, de valamennyi bngszgyrt j verziiban ebbe az irnyba halad. A megjelentsnek a tartalomtl a CSS stluslapnyelv tjn trtn sztvlasztsa s a megjelentsi lehetsgek vlasztknak bvtse szintn visszafordthatatlan folyamat, az ugyancsak szabvnyostsi stdiumban lv CSS3 egyes j elemei mr a tavalyi bngszfejlesztsekben, msok az idei verzikban jelentek meg. A HTML(5) + CSS(3) dnten a World Wide Web konzorcium s a Wikipedia publikcii alapjn kszlt, clja egy olyan eszkz nyjtsa az rdekldk kezbe, melynek segtsgvel programozsi ismeretek s elriaszt szakkifejezsek nlkl ( de mgis a HTML s CSS aktulisan rtelmezett szabvnyos kdolsval ) a statikus weblapok ksztsnek alapjai remlhetleg nhny nap alatt elsajtthatk. Az itt sszefoglalt ismeretekkel ltvnyos s szabvnykvet webhelyek alakthatak ki, melyeket mind a ltogatk, mind a keresprogramok hatkonyan hasznlhatnak. Aktulisan rtelmezett szabvnyos kdols alatt itt az rtend, hogy: - a HTML cmkk az j rtelmezs s rvnyes jellemzk alapjn kerlnek trgyalsra - a formzsi feladatokat teljesen az egyre bvl funkcikkal rendelkez CSS ltja el - a tblzatok kizrlag az sszetartoz adatok egymshoz viszonytott megjelentsre, nem pedig weboldalak szerkezeti kialaktsra szolglnak - kimaradtak a keretek, mint tlhaladott megvalstsi megoldsok Az rlapok ismertetse a fggelkbe kerlt, mivel - br kialaktsuk HTML-el s CSS-el trtnik - tnylegesen csak interaktv weboldalaknl hasznlhatak.

Az idei vben vrhat a HTML5 nhny j ( elssorban az audio/video s rlap ) funkcijnak a letisztulsa s a CSS3 mg csak krvonalazott egyes rszeinek ( folyamatos tmenetek, tbbhasbos elrendezs, transzformcik, animcik, szntmenetek, kpekbl ksztett szeglyek ) kikristlyosodsa, melyekkel a HTML(5) + CSS(3) aktulis verzija folyamatosan kiegszthet, ill. az hatatlanul elfordul hibk kijavthatk. A HTML5 visszafel kompatibilis a korbbi HTML/XHTML verzikkal, kdolsa tekintetben nem revolci ( a mlttal val gykeres szakts ) hanem evolci ( fokozatos vltozs ). Ha valaki egy rgebbi HTML/XHTML verziban kszlt weblapjnak kdjban csak a dokumentumtpus meghatrozst trja, mris HTML5-s weblapja van legfeljebb elavult elemeket is hasznl s nem l az j szolgltatsok lehetsgvel. Az j szabvny teht nagyon tolerns s felhasznlbart, s mg a hibs kdok rtelmezsre is tmutatst ad a klnbz bngszknek. Az j CSS3-tulajdonsgok nmelyikvel radsul a statikus eszkztrral bizonyos dinamikus viselkedsek is megvalsthatk. A HTML5 szabvnyostsi folyamata a tervek szerint 2013/14-ben zrulhat le, ezrt kerlt a cmben az 5-s zrjelbe ( a kialakul szabvny egybknt zrjel nlkl rand ). A CSS esetben az ugyancsak zrjelbe tett 3-as a fokozatos, funkcinknti bevezetsre utal (maga a szabvny szintn zrjel nlkli). Ebben a viszonylag kplkeny, tmeneti idszakban egy rugalmasan reaglni kpes elektronikus sszefoglal/ismertet remlhetleg sikeresen szolglja az rdekldk ismeretszerzst.

Budapest, 2011. jnius

1. ALAPOK1.1. Tartalom s forma: HTML s CSS

A weboldalak tartalma s a tartalom struktrja HTML jellnyelvben ( Hypertext Markup Language = hiperszveg jellnyelv vagy lernyelv ), a formzs CSS stluslapnyelvben (Cascading Style Sheets = klnfle magyar fordtsban lpcszetes vagy rangsorolt vagy egymsba gyazott vagy lpcszetesen egymsra pl stluslapok ) szerkesztend. A HTML ( struktrlt tartalom ) s CSS ( formzs, megjelents ) hasznlatval kt olyan felhasznlbart, egymshoz jl illeszked eszkz van a honlapksztk kezben, melyek jelentsen hozzjrultak a web robbansszer fejldshez. Alkalmazsuk rvn a tartalom s forma egymstl fggetlenl vltoztathat, ugyanahhoz a tartalomhoz tbb, mdiafgg megjelents s/vagy kszen kapott stluslapok trsthatk, s hasznlatukkal ttekinthetbb kdols s gyorsabb weboldal-letlts rhet el. A HTML jellnyelv s CSS stluslapnyelv mindenki szmra ingyenesen elrhet s knnyen hasznlhat, tovbbfejlesztsket s szabvnyostsukat a World Wide Web Consortium ( rviden W3C ) nemzetkzi non-profit szervezet koordinlja. A szabvnyos kdols hasznlatnak rtelme s clja, hogy egy adott weblapot minden bngsz lehetleg ugyanolyan mdon jelentsen meg. Miutn tendencijukban a bngszk a szabvnyok felismersnek s azonos rtelmezsnek irnyba fejldnek, a szabvnykvet kdols a leghatkonyabb mdja az egysges, s a tervez szndka szerinti megjelentsnek. Mind a HTML, mind a CSS a minden opercis rendszerhez mellkelt, ingyenes, egyszer szvegszerkeszt programmal is kdolhat, s ismeretk gyorsan elsajtthat. Br sokan hasznlnak vizulis ( WYSIWYG = what you see is what you get, magyarra ALAKH-nek fordthat = Azt Ltod, Amit Kapsz, Hen ) weblapkszt programokat, melyek alig ignylik a kdolsban val jrtassgot, a szabvnykvet weboldal ptkockinak ismerete a megrts s tovbbfejlds szempontjbl elengedhetetlen. A webszerkeszt tanfolyamok ltalban az Adobe cg Dreamweaver nev (nem ingyenes) professzionlis programjt hasznljk ( legjabb verzija a 2011 tavaszn megjelent Dreamweaver CS5.5 ). Az ECDL-vizsga a Microsoft ( mr vekkel ezeltt lecserlt ) FrontPage programjval vagy az ingyenes NVU ( azta KompoZer-knt tovbbfejlesztett ) szerkeszt-programmal trtnik. Ezeken kvl szmtalan ingyenes s fizets, klnbz funkcikat tmogat szerkesztprogram van forgalomban. Kezdsnek az opercis rendszer editor-ja, vagy mg inkbb a kvetkez pontban is megemltett Notepad++ szerkesztprogram is megfelel. A HTML s CSS alkalmazst clszer programfggetlenl, a mindenki szmra val hozzfrhetsg s ingyenessg elve alapjn, s a kdolst a szabvnyok szerint, nllan alaktva elsajttani. A knyelmi szempontok - mint termelkenysgnvels, elrhetsg, funkcibvts s anyagi lehetsgek - alapjn vlaszthat, mindig jabb verzikban megjelen webszerkeszt programok az alapok ismeretben mr rugalmasan s folyamatosan cserlgethetk, knnyen hasznlhatk.

HTML-el s CSS-el statikus weblapok kszthetk, a dinamikus/interaktv weboldalak a statikus struktrba gyazott egyb elemekkel ( szkript-nyelvekkel ) valsthatk meg. Br ezek trgyalsa meghaladja a HTML(5) + CSS(3) kereteit, az j CSS-tulajdonsgokkal is kialakthatak bizonyos dinamikus jelleg hatsok. 1.2. A weblapkszts hardver s szoftver ignye A weblapkszts alapjainak megtanulshoz s statikus weblapok szerkesztshez nincsen szksg specilis mszaki httrre vagy pnzgyi befektetsre, de mg lland internetkapcsolatra sem. Egy egyszer editort mr eleve minden mikroszmtgphez adnak, s a legismertebb bngszk ingyenes letltse utn a tanuls s/vagy weblapszerkeszts off-line zemben trtnhet. Az egyszer editor s a bngszk hasznlata nem ignyel jelents processzor-teljestmnyt vagy memriaignyt, a bngszk letltse egyenknt 10-35 MB-ot vesz ignybe. A Windows opercis rendszer gpek rszesedse a netezk krben kb. 97% ( MacOS s Linux 1-1%, egyebek 1% ), gy weblap ksztshez, ill. annak tanulshoz is Windows-hoz rt alkalmazsok llnak a legnagyobb vlasztkban rendelkezsre. A PC-khez adott Notepad (Jegyzettmb) helyettestsre kifejlesztett Notepad++ editor ( aktulis verzija 5.9 ), ill. a ksz weblap szerverre val feltltshez a Total Commander fjlkezel ( aktulis verzija 7.56 ) ingyenesek s hatkonyak, mindkett magyar nyelven is elrhet, s tbb helyrl letlthet ( a Google keresjbl vlaszthatk letlthelyek ). A bngszk fontossga ( hasznlatnak gyakorisga s trend-diktlsa ) alapjn jelenleg a Mozilla Firefox 5, a Google Chrome ( aktulis verziszma 12, de kb. 6 hetente frissl s automatikusan letltdik az jabb verzi ), a Microsoft Internet Explorer 8 ( Windows XPhez) s 9 ( Vista-hoz s Windows 7-hez ), az Opera Software Opera 11.5 s az Apple Safari 5 azok a bngszk, melyekkel az elkszlt weblapok megjelentsnek esetleges eltrseit szoks ellenrizni. Pr vvel ezeltt dominns volt az Internet Explorer, s a tbbit alternatv bngszknek aposztrofltk. Ma a bngszk vilgpiact 3 nagy ( Microsoft, Mozilla, Google ) s 2 kicsi ( Apple, Opera ) fedik le. 1.3 Statikus webhelyek kialaktsnak szoksos mdja A szmtgpben egy kln ( al-mappkat nem tartalmaz ) mappban clszer a weboldalak valamennyi alkotelemnek ( a tartalmat hordoz HTML oldalaknak, a formzst ad CSS stluslap(ok)nak, a felhasznland multimdis elemeknek ) a gyjtse. A gyjtmappa neve brmi lehet ( kiterjesztse nincsen ). A webhely kezd HTML-fjljnak neve mindig index, a tbbi oldal fjlneve lehetleg a tartalmukra utal, kezet nlkli kisbets sz legyen, s valamennyi fjlnv kiterjesztse .html. A bngszk mindig az index.html nev oldalt fogjk a webhely kezd- vagy cmlapjnak ( home page ) tekinteni. A stluslap(ok)nak .css kiterjeszts kezet nlkli kisbets sz legyen a neve. Figyelem! Nhny szerkeszt program .html helyett .htm kiterjesztst hasznl. Ez ugyanolyan j, de akkor kvetkezetesen mindenhol .htm-et kell hasznlni.

A weblapkszts ill. annak tanulsa kt ton trtnhet: - vagy elszr a HTML kdols ( a struktrlt tartalom ) ellltsa, ill. annak megtanulsa, aztn a ksz tartalom CSS formzsa, ill. a CSS megtanulsa - vagy a struktrlt tartalom rszenknti ellltsa s az egyes rszek menet kzbeni formzsa, tanuls esetn pedig felvltva a HTML s CSS kdols hasznlatnak elsajttsa. Gyakorlott weblapksztknl az egyni zls dnt, tanulsnl pedig mindkt sorrendnek van elnye s htrnya. Elszr a HTML-kdolst majd utna a CSS-t kln-kln tanulva, egyegy zrt szablyrendszerben mozogva knnyebb kiigazodni s elre haladni. Ugyanakkor a HTML-lap nmagban nem mutats, ltvnyos eredmnyt s sikerlmnyt csak a CSS-el trtn formzsval lehet elrni. Mindkt esetnek gy lehet egyidejleg eleget tenni, ha kln-kln trtnik a HTML s CSS trgyalsa, ugyanakkor a HTML-rszben az egyes tmk vgn utals van egyes vonatkoz CSS fejezetekre - gy mindenki maga dntheti el, hogy melyik mdszert tallja clravezetbbnek, milyen sorrendben halad. A HTML mindig az a tartalmi alap, amihez a CSS formzs hozzrendelhet, teht mindjrt a CSS-el kezdeni nem lehet. A nagyszm varicis lehetsgek miatt ugyanakkor a nagyobb falat a CSS megtanulsa, ill. a formzs kialaktsa.

2. HTML52.1. A HTML nyelvtana 2.1.1. A HTML jellnyelvben a megjelentend tartalomba cmkket ( angolul tag=cmke ) helyeznk el, melyek megszabjk, hogy a bngszk hogyan rtelmezzk a megjellt tartalmi rszeket. A cmkk megnevezse egyben kifejezi ( angolul ) a tartalmukat is. Az angol sz vagy rvidts mindig ( kisebb mint, ill. nagyobb mint = less than, greater than, vagy mskppen cscsos zrjel= angle bracket ) jelek kztt helyezkedik el. Elvileg kisbet/nagybet rzketlenek, de csupa kisbett clszer hasznlni ( rszben az XHTML-es hagyomny, rszben a kisbet-nagybet keveredsbl szrmaz hibaforrsok elkerlse miatt ). A cmkk nagy tbbsge prban, kezd- s zrcmkeknt ( start tag, end tag ) szerepel, a kezd- s zrcmke kztti klnbsg annyi, hogy ami kezdcmkeknt , az zrcmkeknt , azaz egy per vagy trtvonal ( slash ) karakterrel bvl. A HTML-ben kdolt tartalom pros cmkkkel teht gy nz ki: tartalom egy rsze tartalom tovbbi rsze megint tartalmi rsz stb. Egyedl csak nhny cmke szerepelhet, ezek hasznlatakor a kdolt HTML tartalom: tartalom egy rsze tartalom tovbbi rsze.stb.

2.1.2. A cmknek lehetnek jellemzi ( attribute=jellegzetes tulajdonsg ) s a jellemzknek rtkei ( value=rtk ). A jellemz ( tulajdonsg-nak is fordtjk magyarra, de miutn a CSS-nl is lesz tulajdonsg, s ott ms angol szt hasznlnak erre, rdemes magyarban is klnbsget tenni ) a kezd cmke utn egy betkzt kihagyva rhat be, az rtk pedig = formban adand meg. Ha megadunk valamilyen jellemzt, akkor - az esetek nagy tbbsgben - rtket is kell adni neki ( egybknt nincs is rtelme a jellemz megadsnak ). Az rtk nlkl is megadhat jellemzkre kln felhvjuk majd a figyelmet. Egy cmkhez tbb jellemz is definilhat, a megads sorrendje kzmbs, s res betkz vlasztja el ilyenkor egymstl a jellemz-rtk prokat. A jellemzk s rtkek csak az adott konkrt cmkre vonatkoznak, s a zrcmkvel ill. zr cscsos zrjellel rvnyket vesztik. A HTML-ben kdolt tartalom teht jellemzkkel is rendelkez HTML-cmkkkel gy nz ki: tartalom egy rsze tartalom tovbbi rsze megint tartalmi rsz stb.

2.2 A weboldal szerkezete Minden weboldal 3 f rszbl ll: a) dokumentumtpus meghatrozs b) fej c) trzs a) A dokumentumtpus meghatrozs ( DTD=Document Type Definition ) adja meg a weboldal nyelvtant a bngsz szmra. A megads mdja: ( doctype = document type = dokumentum tpus )

Ez biztostja, hogy a bngsz szablykvet zemmdban ( standard mode, no quirks mode ) rtelmezze a HTML weboldalt. Ha hinyosan, hibsan, vagy egyltaln nincs megadva a dokumentumtpus, akkor a bngsz trkkz zemmdba ( quirks mode ) vlthat, s magtl prblhatja rtelmezni a kdolst ez termszetesen magban hordozza a hibs megjelents lehetsgt. A dokumentumtpus meghatrozs utn egy s pros cmkk kztti rsz alkotja a bngsz ltal rtelmezett s megjelentett weblapot. A bngsz szmra a kezdcmknl kezddik, s a zrcmknl r vget a megjelentend weboldal. A keresprogramok hatkonysgt elsegtend - helyes gyakorlat cmn - javasolt a honlap f nyelvnek megadsa is, mely magyar nyelv weblapnl a kezd html cmke lang=hu ( language=nyelv, Hungarian=magyar ) jellemz/rtk kiegsztst jelenti ( en az angol nyelv, fr a francia, stb. mg az amerikai s brit angol nyelvhasznlat kztt is klnbsg tehet az en-US ill. en-GB rtkekkel ).

A magyar nyelv weblap szerkezete teht:

fej trzs

b) A fej ( head=fej ) az adott HTML-oldalra vonatkoz meta-adatokat tartalmazza. A metaadatok a fjllal kapcsolatos klnfle jellemzk s utastsok trolsra szolglnak. Nhny meta- adatnak sajt cmkje van ( pl. title=cm, link=kapocs, style=stlus ) a tbbiek a meta cmke jellemzjeknt adhatk meg. A meta-adatokra rszletesebben a HTML-rsz vgn mg visszatrnk, most elegend csak a karakterkszlet, a weblap cme s a CSS stlus megadsnak trgyalsa. A fej HTML kdolsa: ( fontos a meta-adatok sorrendjnek betartsa ! ) karakterkszlet megadsa weblap cme kls stluslap csatolsa begyazott stlus b/1) A karakterkszlet megadsa: vagy

meta a cmke, charset ( charset = character set = karakterkszlet ) a jellemz, utf-8 vagy iso8859-2 az rtk. A meta-nak nincsen zrcmkje, egyedl hasznland. Az Unicode Consortium non-profit szervezet kidolgozott egy olyan kdkszletet, mely az sszes l, halott s mestersges kultra rsjeleinek s egyb kiegszt karaktereknek az brzolsra alkalmas ( legfrissebb verzija a 2010. oktberben elfogadott 6.0 de a verziszmot nem kell definilni a charset-ben). Az UTF-8 a Universal Character Set Transformation Format ( Univerzlis Karakterkszlet talaktsi Formtum ) 8-bites vltozata. A Windows XP eltti opercis rendszerek nem ismerik az UTF-8-at, s tbb webszerkeszt program is az ISO-8859 szerinti karakterkdolst ajnlja fel alaprtelmezettknt. Magyar nyelv weblapoknl az ISO 8859-2 ( Latin2 vagy kzp-eurpai ) kszletet kell ilyenkor belltani ( a 8859-1 vagy Latin1 a nyugat-eurpai s amerikai, az 8859-3 a dl-kelet-eurpai, a 8859-4 a skandinv s balti, a 8859-5 a cirill, a 8859-6 az arab, a 8859-7 a grg, a 8859-8 a hber karakterkszlet, stb. ). A belltott ISO-8859-2 kszlet ltal nem tartalmazott karaktereket a ksbbiekben emltettek szerint kdolva lehet megadni. Az UTF-8 kdkszlet alkalmazsa tipikus magyar szveg esetn a Latin2-hz kpest kb. 10% fjlmret nvekedst okoz ( angol nyelv szveg UTF-8 brzolsa s Latin1 brzolsa megegyezik, elterjedtsge ott nagyon magas ). Figyelem! A hibsan megadott karakterkszlet ( elssorban az kezetes betknl ) tves megjelentst idzhet el. Ha nincs karakterkszlet megadva, az a karaktertveszts mellett a weblap biztonsgi sebezhetsgt is okozhatja.

A magyar karakterek helyes megjelentsnek ellenrzsre kialakult nhny olyan kifejezs, mely az kezetes magnhangzk mindegyikt egyszer tartalmazza, pl.: tsksht kgybvl, t szp szzlny rlt rt nyz, rvztr tkrfrgp, stb. Ilyeneket brki szabadon kitallhat, s az sem baj, ha egy kezetes magnhangz egynl tbbszr fordul el.. b/2) A weblap cmnek megadsa: . ( title =cm )

A cm tartalmazhat magyar kezetes szavakat s nagybetket is. A tartalmat jl kifejez cm segti a keresk helyes tallatt. A cm a bngsz cmsorban, ill. a keresk tallatainak felsorolsban jelenik meg. b/3) Kls CSS stluslap(ok) csatolsa: link ( kapocs ) a cmke, rel ( relation = viszony ) s href ( hypertext reference =hiperszveges hivatkozs ) a jellemzk, stylesheet ( stluslap ) s a .css kiterjeszts CSS fjl neve a jellemzk rtkei. A rel jellemz jelzi a bngsznek, hogy a hivatkozott ( CSS ) dokumentum milyen viszonyban van a hivatkoz ( HTML ) dokumentummal. ( A definci szerint stluslap viszonyban van. ) A href jellemz annak a CSS stluslapnak a fjlnevt s helyt ( elrhetsgi tjt ) adja meg, melyet a HTML dokumentumhoz akarunk kapcsolni. Miutn egy mappba gyjtjk a HTML lapot s a CSS stluslapot, elg csak a fjlnevet s kiterjesztst megadni. A kls stluslap egy CSS-ben kdolt, .css kiterjeszts szvegfjl. Neve szabadon vlaszthat, de clszeren utaljon a tartalmra, kisbets, kezetek s szkz nlkli legyen. b/4) Bels vagy begyazott CSS stlus megadsa: A szoksos eljrs az, hogy egy webhelyen bell az sszes HTML oldalhoz kls stluslapo(ka)t kapcsolunk ( lsd b/3 ). Egyoldalas vagy klnll weboldal esetn, ill. ha egy webhely egy oldaln a kls stluslap(ok)hoz kpest kis mrtkben meg akarjuk vltoztatni a formzst, hasznlatos az albbi, bels stlust vagy begyazott stlust definil elem. CSS formzs kdolsa ( ezt lsd a CSS rszben ) A pros cmke teht egy nem-HTML kdolst gyaz be a HTML oldalba. Ha kls stluslap is csatlakozik az adott weboldalhoz, akkor a link meta-adat utn kell a style meta-adatot kdolni, teht a begyazott stlus kzelebb legyen a dokumentum trzshez, mint a kls stlus ekkor a CSS rszben trgyalt rangsor alapjn a bels stlus fellrja a klst.

A HTML-lapokat a bngszk akkor is minden informcival, logikus struktrban megjelentik, ha nincsen hozzjuk ( sem bels, sem kls ) stlus definilva, de a prezentci eszttikai elemei nlkl a weblap monoton, jellegtelen s szntelen lesz. A fenti kt stlusdefinci valamennyi mdira azonos stlust alkalmaz. Elvileg tbbfajta mdihoz kln-kln formzs is megadhat, errl a CSS rszben lesz sz ( a gyakorlatban a kpernys s nyomtatott megjelents kln definilsa hasznlatos ). A fej HTML-kdolsa teht: . .. c) A trzs ( body=trzs ) megadsa: ..weboldal tartalma.. A trzs az, amit a bngsz megjelent, a CSS stlussal val formzs is csak erre vonatkozik. A dokumentumtpus meghatrozs s a fej nem formzhat, de nem is lenne rtelme, hiszen azok elssorban a bngszknek s keresknek szl informcikat tartalmazzk. A weblap immr teljes kdolt szerkezete az elzek alapjn: . .. ..weboldal tartalma.. Annak nincsen jelentsge, ha a jobb ttekinthetsg rdekben a szerkezeti elemek kztt res sort hagyunk ( vagy nem hagyunk ). Lehetne vzszintesen is egymsba gyazni az egyes elemeket, azonban ttekinthetsgi szempontbl az j sorokba rt, szerkezeti egysg szerint behzssal is nvelt tagols a leghatkonyabb br nmi fjlmret nvekedst okoz. A felhasznlt bettpusnak sincsen a kdols szempontjbl jelentsge, mi ugyancsak az ttekinthetsg remlhet elsegtse cljbl - flkvr dlten rjuk a cmkket s jellemzket, s dlten az rtkeket ill. a szvegeket.

A weblap szerkezeti felptshez a kvetkez HTML cmkket hasznltuk fel: Cmke: Funkcija: pratlan cmke pros cmke pros cmke pros cmke pros cmke pratlan cmke pratlan cmke pros cmke

dokumentumtpust definilja HTML dokumentumot definil a dokumentumra vonatkoz informcikat definil a dokumentum trzst definilja a dokumentum cmt definilja a dokumentum s egy kls forrs kztti kapcsolatot definil a dokumentumra vonatkoz meta-adatokat definil bels vagy begyazott stlus defincit hoz ltre

2.3 Az els konkrt weblap Az alkalmazott editorral egy j HTML fjlt nyitva az elz fejezetben megadott kdolt weblap szerkezetet kell berni, a vlasztott tmhoz ill cmmel s egy vlasztott CSS stluslap fjlnvvel. A tanknyvekben szoksosan alkalmazott kezd cm pl. Az els weblapom, a stluslapnv pl. display.css, a bels stlus pedig egyenlre resen marad. A trzsbe berva egy ugyancsak szoksosan hasznlt els szveget: Hell vilg! Legyen szp napod! ( Ez azrt is elnys, mert magyar kezetes betket is tartalmaz, teht a karakterkszlet ellenrzsre is hasznlhat. ) A HTML dokumentumnak ekkor gy kell kinznie: Az els weblapom Hell vilg! Legyen szp napod! ( A stlusra mg nincsen semmi megadva, a HTML-gyakorls miatt azonban gy is rdemes berni a CSS-re utal cmkket. ) 10

A HTML-lapot egy erre a clra ltrehozott gyjtmappba kell menteni. Minden tovbbi vltoztatst elszr szintn menteni ( CTR+S vagy Fjl/Ments ) kell, mieltt megnzzk az eredmnyt, melyet a fbb bngszk mindegyikvel rdemes ellenrizni. A fenti ( nagyon egyszer, de mr ) mkdkpes weboldalt gy mutatjk a bngszk:

Lthat, hogy a HTML-kdols fej rszben megadott informcibl csak a cmet mutatja ( a cmsorban ) a bngsz, a trzsben ltrehozott tartalom az, amit weboldalknt megjelent. A ( vagy iso-8859-2 ) kdot valamilyen ms karakterkszletre trva ( s a mdostst elmentve ) lthat, hogy a nem UTF-8 vagy nem kzp-eurpai ISO bellts esetn nem magyar nyelv bngszvel karaktertvesztsek fordulhatnak el. A lang=hu jellemz/rtk elhagysa - vagy ms fnyelv definilsa ( pl. sk = szlovk, cz = cseh, stb. ) nem befolysolja a megjelentst, csak a keresprogramok keressi hatsfokt ronthatja. 2.4 Alapvet HTML cmkk Elvlaszt karakterek ( szkz, tabultor, j sor ) beiktatsval vltoztassuk az editorral a szveg szavai kztti tvolsgot, a mondatok kztti tvolsgot s a szveg kezdetnek helyzett, ill. rjuk a msodik mondatot j sorba. Elmentve a vltoztatsokat s egy bngszvel megnzve az eredmnyt lthat, hogy az editorokban hasznlt formzst a HTML figyelmen kvl hagyja - az elvlasztkarakter tpustl s szmtl fggetlenl mindig csak egy szkzt hasznl, folyamatosan kezeli a tartalmat, a lap bal fels sarktl a sor elejn kezd, a sor vgn magtl vlt j sorba. A tartalom szerkezetnek kialaktsra s tagolsra teht klnbz HTML cmkket kell hasznlni. 2.4.1. j sor kezdst ( sortrst ) a
( break = megszakts ) res elem definilja. Az elz szvegnkbe berva a sortrs cmkjt: Hell vilg!
Legyen szp napod!

Termszetesen ez ekvivalens mdon gy is megadhat: Hell vilg!
Legyen szp napod! A fenti HTML kdols megjelentse egy bngszben:

A szvegben a msodik mondat gy mr csakugyan j sorban jelenik meg. Egy vers sorai vagy egy postacmnek a szoksosan trdelt megadsa is a
cmkvel alakthat ki. Figyelem! Alcmet, j bekezdst vagy fggleges felsorolst nem szablyos ilyen mdon szerkeszteni, azoknak sajt HTML cmkjk van. A nagyobb sorkzt ugyancsak nem res sor(ok)
cmkvel val beiktatsval, hanem CSS formzssal kell ltrehozni. 2.4.2. A cm pros cmkje a . -tl .-ig terjed cmsor hierarchia ( h= heading=cmsor ). Ilyen mdon max. 6 cmet lehet egyms al rendelni, de ennl ltalban lnyegesen kevesebbre, max. 3-4-re van szksg. Ha a mr meglv szvegnket ktszint cmsorknt ( fcm, alcm ) hasznljuk, s a tovbbi cmsor hierarchia bemutatsra tovbbi alcmekknt mg hozzrunk valamit, akkor a kdols: Hell vilg! Legyen szp napod! Mg hozzrtunk valamit s mg valamit Egy cmsor a HTML szerint blokkszint elem, azaz kln sorban kezddik s az utna kvetkez elem automatikusan j sorba kerl. A bngszk alaprtelmezett belltsa szerint flkvr betkkel van szedve, a betmret a h1-nl a legnagyobb, majd a szm nvekedsvel ( h2, h3, ) egyre kisebb. Az ettl eltr megjelentst CSS-el kell ltrehozni. A CSS rsz Bettpusok, Sznek definilsa, Blokkszint elemek elhelyezse I. s Szveg fejezetekben foglaltakkal formzhatk a fenti cmsorok. A bngszkkel az alaprtelmezett megjelents:

2.4.3. A bekezds pros cmkje a . ( paragraph=bekezds ). A korbban hasznlt szvegbl ksztve kt bekezdst: Hell vilg! Legyen szp napod! Mg hozzrtunk valamit. s mg valamit. Hell vilg!
Legyen szp napod! A bngszk ezt gy jelentik meg:

Figyelem! A msodik bekezdsbl az is ltszik, hogy a HTML cmkk egymsba gyazhatk, lsd a ..
.. kdolst. Jelen esetben egyedlll cmke a br, de ha pros cmkrl lenne sz, a begyazott rszt a begyaz rsz lezrsa eltt be kell zrni, klnben nem egyrtelm, melyik cmke melyik tartalomrszhez tartozik ( rosszul begyazott cmkk = misnested tags ).

A bngszk a bekezdseket is blokkszint elemknt kezelik, azaz kln sorban kezddnek s az utnuk kvetkez elem automatikusan j sorba kerl. Szvegbehzs nincsen, kt bekezds kztt egy res sort hagynak. A bngszk alaprtelmezett belltsaitl eltr megjelentst CSS-el kell ltrehozni. Figyelem! A trzs ( body ) rszbe bert sima szvegeket mindig rdemes .. bekezdsekknt kdolni, hogy a bngszk a formzsnl ne tvesszenek, teht az els mondatunkat is clszerbb lett volna Hell vilg! Legyen szp napod! mdon berni ( ha mr akkor ismert lett volna a p cmke ). ltalban szveges tartalomban a bekezds az egyik leggyakoribb elem, ha nem cmsorrl vagy felsorolsrl van sz, akkor az esetek nagy tbbsgben a szveg bekezdsknt jellend. 2.4.4. A bekezdsekkel trtn tematikus tagols egy vzszintes vonallal tovbb fokozhat, melynek kdja ( horizontal line= vzszintes vonal ). A blokkszint res elem. A fenti kt bekezdsnket vzszintes vonallal mg jobban sztvlasztva: Hell vilg! Legyen szp napod! Mg hozzrtunk valamit. s mg valamit. Hell vilg!
Legyen szp napod! A bngszk megjelentsi eredmnye:

2.4.5. A kdols sorn tehetnk magunknak olyan megjegyzseket/emlkeztetket, mely elsegti a munkt. A megjegyzs ( comment ) pratlan cmke, a ( comment end delimiter ) ltal befoglalt rsz a forrskdban benne marad, de a bngsz nem jelenti meg, nem veszi figyelembe. Figyelem! Minden weblap kdolsa mindegyik bngszvel megnzhet. A megnyitott weblap egy res terletre jobb egrrel kattintva a megjelen menbl Forrs megtekintse (Internet Explorer ), Oldal forrsa ( Firefox ), Oldal forrsainak megtekintse ( Chrome ), Forrskd ( Opera ) pontot vlasztva a bngsz megmutatja a weboldal kdolst, belertve a megjegyzs(eke)t is teht olyat ne rjunk bele, amit nem szeretnnk, ha brki lthat.

Msik alkalmazsa a megjegyzsnek, ha ideiglenesen ki akarunk hagyni rszeket a kdolsbl. A megjegyzs cmkben foglalt rsz gy olyan, mintha ott sem lenne, de nem kell trlni, s brmikor ismt felhasznlhat vagy ismt figyelmen kvl hagyhat, ha a cmkt kivesszk a kdolsbl vagy jbl berjuk. A megjegyzs cmke fenti kt alkalmazsnak bemutatsra szrjunk be magunknak egy megjegyzst - Ez a mondat nem fog ltszani a weblapon -, tovbb a vzszintes vonalat s az s mg valamit. mondatot ideiglenesen vegyk ki a megjelentsbl: Hell vilg! Legyen szp napod! Mg hozzrtunk valamit. Hell vilg!
Legyen szp napod! A bngsz ezt gy mutatja:

A felhasznlt alapvet HTML-cmkk: Cmke: Funkcija:

... cmsort definil pros cmke bekezdst definil pros cmke
sortrst hoz ltre res elem vzszintes elvlaszt vonalat szr be res elem megjegyzs beszrsa vagy kdrszlet ideiglenes kiiktatsa pratlan elem

2.5 Listk A listk nem sortrsekkel, cmekkel vagy bekezdsekkel, hanem sajt HTML cmkkkel hozandk ltre. Klns jelentsget ad nekik, hogy a felsorolsokon kvl a weboldal menje ( ami nem ms, mint hivatkozsok listja ) szintn listaszerkezettel llthat el. HTML-ben hrom lista-fajta kdolhat: szmozott ( rendezett ), szmozatlan ( nem rendezett, felsorolt ) s a meghatrozs ( defincis, asszocicis ) lista.

2.5.1. A szmozott listknl fontos a sorrendisg, elemei eltt felsorolsjelknt szmok vagy betk llnak. A szmozott lista kezd- s zrcmkje . ( ordered list = rendezett lista ), az egyes listaelemeket a .. ( list item=listaelem ) pros cmke definilja. A szmozatlan listknl nem fontos a sorrend, pusztn felsorolst tartalmaznak, elemei el szimblumok, kpek rendelhetk. A szmozatlan lista kezd- s zrcmkje

( unordered list=nem rendezett lista ), az egyes listaelemeket a szmozottal megegyez mdon a .. ( list item=listaelem ) pros cmke definilja. Szmozott lista felptse: . . .. Szmozatlan lista felptse:

HTML fjlunkban a fenti kdolst (ismt az ltalnosan elterjedt) konkrt szavakkal kitltve:

kenyr tej vaj

A kt lista kdolst helytakarkossg miatt helyeztk egyms mell, a weblapon egymst kveten kell bekdolni ket ( a bngszk balrl jobbra, fentrl lefel haladva olvassk a kdolst, a fenti forma rtelmetlen lenne szmukra ) ! A bngsz alaprtelmezs szerint gy jelenti meg a szmozott ( rendezett ) s szmozatlan (felsorolsi) listkat:

Listk egymsba is gyazhatk, pl. az egyes listaelemekbe jabb al-listkat helyezhetnk. Figyelem! A HTML cmkk korbban emltett egymsba gyazsnak krdse itt mr jl megfigyelhet - a begyazott elemeket mindig be kell zrni a begyaz elem lezrsa eltt ! Szmozott s szmozatlan listk is egymsba foglalhatk ( lsd a szmozatlan listban a szmozott vajas listt ).

kenyr fehr kenyr barna kenyr tej zsros tej zsrszegny tej vaj szott vaj nem szott vaj margarin

kenyr

fehr kenyr

barna kenyr

zsros tej

zsrszegny tej vaj szott vaj nem szott vaj

margarin

Ismt helytakarkossg miatt vannak egyms mellett a listk! Az sszetartoz kezd- s zrcmkk felismerse rdekben clszer az egymsba gyazott elemeket a kdols sorn behzssal ( pl. a tabultor billentyvel ) is tagolni ( ennek semmi kze nincsen a weblapon val megjelentshez/behzshoz ). Megjegyzs: A HTML szabvny nhny kivteles esetben engedlyezi bizonyos pros cmkknl a zrtag elhagyst. Szndkosan nem kerlnek ezek az esetek felsorolsra, mert megtanulsuk s helyes alkalmazsuk nagyobb energiarfordtst s hibalehetsget jelent, mint egyszeren minden pros cmkt zrtaggal lezrni. (Azrt itt kerlt ez a krds megemltsre, mert a listk kdolsnl fordul el az egyik ilyen kivtel nem is pontostjuk, hogy az mire vonatkozik. ) A fenti kdols megjelentse:

A bngsz alaprtelmezett megjelentse a begyazott lista elemeit behzza. 2.5.2. Rendhagy rendezett listk A szmozott listk kezdrtke az 1-tl eltrre is bellthat, a listaelemekhez ltalunk vlasztott rtkek rendelhetk, ill. a listaelemek cskken rtkekkel ( visszafel ) is szmozhatk. a) Az alaprtelmezetten 1-tl indul nvekv szmozst a szmozott lista kezd cmkjnek a start ( indul ) jellemzvel s a kvnt kezd rtkkel val kiegsztsvel lehet tetszleges pozitv egsz szmra belltani. Ennek akkor lehet pldul jelentsge, ha egy szmozott listba beszrunk egy szveget, majd a szmozott lista folytatsnak szmozst nem ismt 1-tl, hanem folytatlagosan kvnjuk megadni. Ha az els szmozott lelmiszeres listnk elejn a kenyr helyre kt j ttel ( hs, felvgott ) majd egy magyarz szveg kerl, a folytatott listt 3-rl indul szmozssal kdolva:

hs felvgott A hstermkeket a kser konyha kln kezeli a tejtermkektl. tej

b) Az alaprtelmezetten 1. 2. 3. al halad nvekv szmozst a listaelemek kezd cmkihez rendelt value ( rtk ) jellemzvel s a kvnt rtkkel lehet ms sorszmozsra mdostani. Ennek akkor van pldul jelentsge, ha egy szmozott listbl kiragadunk listaelemeket, de mgis meg akarjuk rizni az eredeti szmozst. Maradva az els szmozott lelmiszeres listnknl, de 2. 4. s 6.-ra mdostva a szmozst:

kenyr tej

A bngszkben a megjelents:

c) Az alaprtelmezetten nvekv szmozst a szmozott lista kezd cmkjhez megadott reversed ( fordtott ) jellemzvel lehet visszafel szmozsra mdostani. ( Slgerlistkat, versenyek helyezettjeit, stb. gyakran visszafel sorszmozva adjk meg. ) Az elemet a start jellemzvel is bvtve tetszleges ltalunk vlasztott kezdrtkrl indthat a visszafel szmozs . Figyelem! A bngszk jelenleg nem tmogatjk ( figyelmen kvl hagyjk ) a reversed jellemzt, amely egybknt rtk nlkl, azaz egyszeren reversed-knt is hasznlhat. 2.5.3. A meghatrozs lista ( defincis, asszocicis lista ) annyiban tr el a szmozott s szmozatlan listktl, hogy nem felsorolsokat, hanem szavakat/fogalmakat/kifejezseket s azok meghatrozst trstja egymshoz. A lista pros cmkje a . (definition list=meghatrozs lista), a szavak/fogalmak/kifejezsek pros cmkje a .. ( definition term=meghatrozand kifejezs ), s mag a meghatrozs a ( definition data=meghatrozsi adat ) pros cmke. Plda: HTML a legnagyobb ismertsgnek rvend jellnyelv CSS a legnagyobb ismertsgnek rvend stluslapnyelv meghatrozs lista szavak/fogalmak/kifejezsek meghatrozst sorolja fel Egy szhoz tbb meghatrozs, ill. tbb szhoz egy meghatrozs is hozzrendelhet, pl: az jszvetsg evanglisti Jnos Lukcs Mt Mrk Jnos Lukcs Mt Mrk az jszvetsg evanglisti

( Csak a jobb helykihasznls miatt vannak egyms mellett ! )

Alaprtelmezetten behzott dd cmkvel jelentik meg a defincis listkat a bngszk:

Meghatrozs listval kdolhatk pl. a sztrak/szszedetek, jtkszablyok felsorolsa, gyakran feltett krdsek ( GYIK ) s a rjuk adott vlaszok, stb. is. Valamennyi lista blokkszint elem, azaz kln sorban kezddik, s az utna kvetkez elem automatikusan j sorba kerl.. A listk alaprtelmezettl eltr formzsa belertve a vzszintes kialaktst is - CSS-el trtnik. Lsd a CSS rsz Listk formzsa fejezetet. A listknl felhasznlt HTML cmkk: Cmke:

Funkcija: szmozott ( rendezett )listt definil szmozatlan ( felsorolsi ) listt definil lista elemet definil meghatrozs ( defincis ) listt definil meghatrozand szt/fogalmat/kifejezst definil meghatrozst/trstst definilja pros cmke pros cmke pros cmke pros cmke pros cmke pros cmke

21

2.6 Tblzatok Egy tblzat feladata az sszetartoz adatok egymshoz val viszonynak ttekinthet mdon val megjelentse. A tblzat sorokbl, oszlopokbl, fejlcekbl s ( opcionlisan ) a tblzat cmbl ll. A sorok s oszlopok ltal alkotott cellk tartalmazzk a tblzat adatait ( mely nem csak szveg s szm, hanem akr jabb tblzat, lista vagy kp is lehet ). A tblzat alkotrszeinek kln cmkjk van, teht a tblzat cmt nem a . pros cmkvel, sorait nem a .. pros cmkkkel lehet megadni. 2.6.1. A tblzat ( table=tblzat ) nyit- s zrcmkje a . A vzszintes sorokat egyenknt a

. pros cmke ( table row=tblzat sor ), a cellkban lv adatokat egyenknt a .. pros cmke ( table data=tblzat adat ), a sorok s oszlopok fejlceit egyenknt a . pros cmke ( table header=tblzat fejlc ), a cmet pedig a . pros cmke ( caption=cm ) definilja. Egy webszerkesztnek fontos informci a ltogatk bngsz-hasznlatnak megoszlsa. Ha Bngszk statisztikja 2011. els negyedvben cmmel a magyar weblapok magyar ltogatottsgt ( letltsek szmt ) bngszk szerinti megoszlsban akarjuk havi bontsban bemutatni 2011. janur mrcius kztt, akkor az albbi tblzatot kell kdolni: Bngszk statisztikja 2011. els negyedvben hnap janur februr mrcius Firefox 3.6 Internet Explorer 8 Chrome 8/9 Internet Explorer 7 Firefox 3.5 s a rgebbiek Opera 11.x Firefox 4 Internet Explorer 6 Chrome 7 s a rgebbiek egyb 42,89% 19,05% 13,16% 7,98% 7,88% 2,51% 0,74% 2,15% 1,30% 2,34% 43,41% 19,18% 13,87% 7,54% 6,86% 2,59% 0,94% 1,92% 1,37% 2,32% 42,17% 18,75% 14,93% 7,21% 5,92% 2,73% 2,54% 1,71% 1,48% 2,56%Az egyb kategriban vannak a Safari-k, a mobil bngszk s az Opera 11.0 eltti Opera-k. A tblzat kdolsa a cmkk kztt helyezkedik el. Logikailag els a cm - br ha a sorok kz vagy a tblzat vgre kdoljuk, akkor is a bngsz alaprtelmezetten fell jelenti meg - majd soronknt kvetkeznek a fejlcek s az adatok: 22 Bngszk statisztikja 2011. els negyedvben

hnap janur februr mrcius

Firefox 3.6 42,89% 43,41% 42,17%

Internet Explorer 8 19,05% 19,18% 18,75%

Chrome 8/913,16%13,87%14,93%

Internet Explorer 77,98%7,54%7,21%

Firefox 3.5 s a rgebbiek7,88%6,86% 5,92%

Opera 11.x2,51%2,59%2,73%

Firefox 40,74%0,94%2,54%

Internet Explorer 62,15%1,92%1,71%

Chrome 7 s a rgebbiek1,30%1,37% 1,48%

egyb 2,34% 2,32% 2,56% Figyelem! Amennyiben a tblzat res cellt is tartalmaz - pl. a hnap szt nem rjuk be a bal fels cellba - az res cellt is be kell kdolni res tartalommal, egybknt borul a tblzat szerkezete. Alaprtelmezetten a tblzat keret nlkl, a cellatartalomnak megfelel oszlopszlessggel s sormagassggal jelenik meg, a fejlcek ( th elemek ) kzpre igaztva flkvren, az adatok (td elemek) balra zrva norml bettpussal formzottak. A bngszk alaprtelmezetten gy jelentik meg a fentiekben kdolt tblzatot:23Egy-egy cella tbb oszlopot vagy tbb sort is tfoghat. A th ( fejlc ) s td ( adat ) pros cmkkhez megadott colspan ( oszlop tfogs ), ill. rowspan ( sor tfogs ) jellemzkkel s az tfogand oszlopok ill. sorok szmnak, mint rtknek a megadsval kdolhat egy-egy tfog cella. A 2011. prilis jnius kztti idszak statisztikjt gy megadva, hogy az oszloptfogs bemutatsa kedvrt - a mrciusi adatokat is megtartjuk, s a tblzathoz ( egy res cellval kezdd ) j sort adunk, melyben gy a kthavonknti idintervallumot is fel tudjuk tntetni, a kt j szveges cella oszloptfogsval az albbi tblzat addik: Bngszk statisztikja 2011. mrcius - jnius mrcius-prilis mjus-jnius mrcius prilis mjus jnius 2,54% 8,66% 20,60% 27,18% 48,10% 14,93% 18,75% 7,21% 2,73% 0,42% 1,71% 1,48% 2,13% 40,37% 15,59% 17,54% 8,67% 2,71% 1,04% 1,77% 1,54% 2,11% 27,81% 17,34% 16,53% 8,42% 2,67% 1,83% 1,64% 0,95% 2,21% 21,01% 18,50% 15,39% 8,12% 2,72% 2,38% 1,40% 1,05% 2,25%hnap Firefox 4-5 Firefox 3.6 s rgebbiek Chrome 10-12 Internet Explorer 8 Internet Explorer 7 Opera 11.x Internet Explorer 9 Internet Explorer 6 Chrome 9 s rgebbiek egyb24Az oszloptfogsokat s res cellt is tartalmaz tblzat kdolsa: Bngszk statisztikja 2011. mrcius-jnius

mrcius-prilismjus-jnius

hnapmrciusprilismjusjnius

Firefox 4-52,54%8,66%20,60% 27,18%

Firefox 3.6 s rgebbiek48,10%40,37% 27,81%21,01%

Chrome 10-1214,93%15,59%17,34% 18,50%

Internet Explorer 818,75%17,54%16,53% 15,39%

Internet Explorer 7 7,21%8,67%8,42% 8,12%

Opera 11.x2,73%2,71%2,67% 2,72%

Internet Explorer 90,42%1,04%1,83% 2,38%

Internet Explorer 6 1,71%1,77%1,64% 1,40%

Chrome 9 s rgebbiek1,48%1,54% 0,95% 1,05%

egyb2,13%2,11%2,21%2,25% 25Figyelem ! Mieltt folytatnnk a tblzatok kdolsnak tanulst, rdemes elemezni a fenti tblzat tartalmt. A bngszk egyre jabb verzii folyamatosan bvtik az j HTML s CSS funkcik rtelmezsnek krt, ugyanakkor teljeskren egyikk sem tmogat minden jdonsgot. a) Ha meghzunk egy olyan vonalat, hogy pl. a Firefox 4-5, Chrome 10-12, Opera 11.x, Internet Explorer 9 s Safari 5 elg nagy szzalkban rtelmezik a HTML5/CSS3-at, akkor az a kvetkeztets vonhat le, hogy 2011. janurtl jniusig a magyar web-forgalomban gyakorlatilag nullrl kb. 51%-ra ntt a HTML5/CSS3-kpes bngszk rszarnya. b) Ha a fenti vonalat a Firefox 3.6, Chrome 8, Opera 10.6 s Safari 5-nl hzzuk meg ( melyek mr szintn rtelmeztek egyes HTML5/CSS3 funkcikat ), akkor a 2011. januri kb. 60%-rl jniusra 70% fl ntt ez az arny. c) Fentiek alapjn inkbb mlysgben, mint szlessgben terjednek az j HTML5/CSS3 funkcik, s alapveten az Internet Explorer 6/7/8 rszarnynak ( ami janurban kb. 29%, mg jniusban kb. 25 % volt ) cskkense szabja meg, hogy milyen mrtkben kell ill. rdemes a korszer technikknak a rgi bngszkre val adaptlsval kln foglalkozni. A tovbbiakban az egyszersg kedvrt egy kisebb mret ( tavalyi adatokat tartalmaz ) tblzaton folytatjuk a kdolsi lehetsgek bemutatst:26hnap Firefox Internet 32,70% 32,25% 31,67% 31,05% Explorer Chrome 7,83% 8,56% 9,63% 10,54% egyb ( Opera, 4,37% 4,37% 4,45% 4,47% Safari, stb. ) . A msodik s harmadik sor kezd celliba a sortfogs bemutatsa kedvrt - bertuk az idintervallum szt ( pirossal a vltoztats ): Bngszcsaldok statisztikja 2010

idintervallummjus-jnius jlius-augusztus

mjusjniusjliusaugusztus

Firefox55,10%54,82%54,25% 53,94%

Internet Explorer 32,70% 32,25% 31,67% 31,05%

Chrome 7,83% 8,56% 9,63% 10,54%

egyb ( Opera, Safari, stb. ) 4,37% 4,37% 4,45% 4,47% ( A msodik sor kezd hnap celljt ki kellett hagyni, hiszen rszben annak a helyt foglalja el a sortfogsos j cella. ) A bngszk alaprtelmezetten az albbi mdon jelentik meg a mdostott tblzatot:Bngszcsaldok statisztikja 2010 mjus-jnius jlius-augusztus mjus jnius jlius augusztus 55,10% 54,82% 54,25% 53,94%27A tblzat cellival a fejlcekhez hasonl mdon lehet sor- ill. oszloptfogst kialaktani. Pldaknt elszr vonjuk ssze a Chrome s egyb sorok tavaly mjusi adatcellit ( pirossal a a vltozs ): Bngszcsaldok statisztikja 2010

idintervallummjus-jnius jlius-augusztus

Firefox55,10%54,82%54,25% 53,94%

Internet Explorer 32,70% 32,25% 31,67% 31,05%

Chrome 12,20% 8,56% 9,63% 10,54%

egyb ( Opera, Safari, stb. ) 4,37% 4,45% 4,47% ( Ismt ki kellett venni egy adatcellt- az egyb sor els celljt - amelynek a helyt a sortfogsos cella foglalja el. )28A fenti kdols megjelentse:Az adatcellk oszlopsszevonst a Chrome sornak jliusi s augusztusi adatain bemutatva ( csak az adott sor mdostott kdjt feltntetve, hiszen minden ms vltozatlan marad ):

Chrome12,20%8,56% 20,17% Figyelem! Tekintettel arra, hogy az adatok alaprtelmezetten a cellkban balra igaztva jelennek meg, formzs nlkl az ilyen oszlopsszevons zavar, mert knnyen csak az els oszlophoz rthet az egybknt tbb oszlopra vonatkoz adat:A tblzat cellinak tartalma lehet jabb tblzat is. Visszatrve a fejlcek sor- s oszlopsszevonst tartalmaz tblzathoz s ( pirossal ) begyazva egy al-tblzatot a Firefox klnbz verziinak tavaly mjusi hasznlatrl:29 Bngszcsaldok statisztikja 2010

idintervallum mjus-jniusjlius-augusztus

Firefox

Firefox 4.X:0%

Firefox 3.X:53,9%

Firefox 2.X: 0,9%

Firefox 1.X:0,3% 54,82% 54,25% 53,94%

Internet Explorer 32,70% 32,25% 31,67% 31,05% Chrome 7,83% 8,56% 9,63% 10,54% egyb ( Opera, Safari, stb. ) 4,37% 4,37% 4,45% 4,47%

A kdolst srtettk a jobb helykihasznls cljbl, de azrt a struktra alapvet tagoltsgt tovbbra is megriztk. A megjelents az albbi lesz:

A tblzat cellinak tartalma lehet lista is. Az Internet Explorer klnbz verziinak tavaly mjusi hasznlatt szmozatlan listaknt ( pirossal ) begyazva: Bngszcsaldok statisztikja 2010 idintervallum mjus-jnius jlius-augusztus 30

mjusjniusjliusaugusztus Firefox Firefox 4.X:0% Firefox 3.X:53,9%Firefox 2.X: 0,9%Firefox 1.X:0,3%

54,82%54,25%53,94% IE

IE 8:15,9%

IE 7:12,1% IE 6:4,7% 32,25%31,67%31,05% Chrome7,83%8,56%9,63%10,54% egyb ( Opera, Safari, stb.) 4,37%4,37% 4,45%4,47%

A bngszkben az alaprtelmezett megjelents az albbi lesz:

2.6.2. Nagymret tblzatoknl a szerkezet ttekinthetsgt segtik el a thead, tbody, tfoot pros HTML-cmkk. Tbb rszre bontott tblzattrzs esetn a darabok gy kln-kln is kezelhetk, hossz tblzatoknl nyomtatskor a tblzatfej s tblzat lblc minden oldal tetejn s aljn megismtldik ( egyenlre csak a Firefox-nl ), s a tblzat szerkezeti egysgei szerinti formzst is a fenti cmkk teszik lehetv. thead=table head=tblzatfej ( nem a tblzat cm! ) tbody=table body=tblzattrzs tfoot=table footer=tblzat lblce Tblzatfej s tblzat lblc egy tblzaton bell csak egy-egy lehet, a tblzattrzs(ek) szma nincsen korltozva. A tblzat lblc tartalmazhat egyszer szveget s/vagy tr tblzatsor(oka)t is. Legyen a bngszk hasznlatnak 2010. szeptember-decemberi adatait bemutat j tblzatunk az albbi: Bngszcsaldok statisztikja 2010 szeptember Firefox Internet Explorer Chrome Opera Safari SafariMobile egyb 53,36% 31,20% 10,99% 3,47% 0,58% 0,09% 0,31% oktber 52,68% 31,24% 11,61% 3,44% 0,61% 0,11% 0,31% november 52,62% 30,53% 12,32% 3,46% 0,63% 0,13% 0,31% december 51,92% 29,97%* 13,37% 3,50% 0,71% 0,17% 0,36%

*ennek 36,4%-a mg IE6 s IE7 Bekdolva a tblzatot gy, hogy a thead, tbody s tfoot cmkket is elhelyezzk a megfelel szerkezeti egysgeknl: Bngszcsaldok statisztikja 2010 szeptember oktber november december Firefox 53,36% 52,68% 52,62% 51,92% Internet Explorer 31,20% 31,24% 30,53% 29,97%

Chrome10,99%11,61%12,32% 13,37% Opera3,47%3,44%3,46%3,50% Safari0,58%0,61%0,63%0,71% SafariMobile 0,09% 0,11% 0,13% 0,17% egyb0,31%0,31%0,31%0,36%

*ennek 36,4%-a mg IE6 s IE7 A fenti HTML cmkk beiktatsa ( eltekintve a lblc hozzadstl ) nmagban nem okoz semmilyen vltozst a bngszk alaprtelmezett megjelentsben:

Figyelem! A tfoot cmkt nem egysgesen kezelik a bngszk - csak az Opera-nl jelenik meg a fenti kdols alapjn alul a vrt helyen a tblzat lblce, a Chrome, Firefox s Safari a cm felett, az Internet Explorer-ek a cm alatt helyezik el. Ha a tfoot-ba tr knt runk be valamit, akkor az Opera is a cm alatt jelenti meg a lblcet !

CSS-ben klnbz tulajdonsgokat rendelve a thead, tbody, tfoot cmkkhez vltozatos formzsi lehetsgek addnak. Egy egyszer plda a tblzat szerkezeti egysgei szerinti (CSS-ben bekdolt) megjelentsre ( a tfoot formzst csak az Opera rtelmezi, de csak akkor, ha nem tartalmaz tr-t a lblc ):

Figyelem! A Chrome, Firefox, Internet Explorer-ek s Safari figyelmen kvl hagyjk a tfootra vonatkoz formzsi utastsokat is, lsd az elzvel azonos formzs ellenre az albbi megjelentst:

2.6.3. A s cmkkkel a tblzat egy vagy tbb oszlopa, ill. egyes oszlopcsoportjai definilhatk, azonban a bngszk nem egysgesen kezelik ket, ezrt a gyakorlatban a tfoot-hoz hasonlan - ( egyenlre ) kevss hasznlatosak. A tblzatok blokkszint elemek. Alaprtelmezettl eltr megjelentsk CSS-el trtnik (lsd a CSS rsz Tblzatok formzsa fejezetet ). A tblzatoknl felhasznlt HTML cmkk: Cmke: Funkcija: tblzatot definil tblzat fejlcet definil tblzat sort definil tblzat cellt definil tblzat cmet definil tblzatfejet definil tblzattrzset defrinil tblzat lblcet definil 2.7 Kpek Az img ( img=image=kp ) cmke egy llkpet helyez el a weblapon. Ktelez jellemzje az src ( src=source=forrs ), ez adja meg a kp elrsi tjt. Ha a kpet a HTML dokumentummal kzs gyjtmappban troljuk, forrsknt elg a fjlnv s kiterjeszts megadsa. pratlan cmke pros cmke pros cmke pros cmke pros cmke pros cmke pros cmke pros cmke pros cmke

A bngszk a sok kpformtum kzl a GIF, JPEG s PNG formtumokat tudjk rtelmezni ( az j WebP elterjedsrl mg korai tallgatsba bocstkozni ).

A formtumok fbb tulajdonsgainak ismertetse a CSS rsz Kpformtumok fejezetben tallhat. A kp alaprtelmezetten sorban elhelyezked ( inline ) elem ( folyamatosan, a sorban eltte lv elemet kveti, ill. a kvetkez elem folytatlagosan halad a sorban tovbb ), s nincsen kerete. Blokkszint elemm ksbb trgyalt mdon alakthat, formzsa s egyb pozcionlsa pedig CSS-el trtnik ( lsd a CSS rszben a Szeglyek s a Blokkszint elemek elhelyezse I.-II. fejezeteket ). Az img cmke tovbbi, ajnlott jellemzi: a) A width ( szlessg ) s height ( magassg ) nem ktelez jellemzk, de segtenek a bngszknek mr a kp letltdse eltt elrendezni a megjelentst ( azonnal el tudjk helyezni a szveget anlkl, hogy meg kellene vrniuk a kpek letltdst ), gy nem ugrik a rszben megjelent oldal a kp ksbb ismertt vlt mrete miatt. Ha a kp fizikai mrettl eltr szlessget s magassgot adunk meg, kicsinyts, nagyts vagy ( tudatos vagy figyelmetlensgbl elkvetett ) torzts kvetkezik be. A nagyts vagy kicsinyts nem rinti a kp felbontst kicsinytskor nem fog gyorsabban letltdni, nagytskor pixeleseds lphet fel. A szlessg s magassg kdolsa: b) Az alt jellemz ( alt=alternative text=helyettest szveg ) kpet helyettest szveges informci. Csak akkor ltszdik, ha a kp nem jelenik meg ( nem tltdik le, nem rhet el, stb. ), clszeren a kp tartalmt, cljt ismerteti a kp helyettestseknt. Ha a kppel egy gombot alaktunk ki, helyettest szvegknt a gomb feliratt rdemes megadni. Ha az alt jellemzt alt=-knt berjuk, ( nem adunk meg rtket - mg szkzt sem - az idzjelek kztt), azt jelezzk, hogy a kp nem a tartalom szerves rsze, csak ahhoz lazn kapcsoldik. Figyelem ! Ha a kp teljes mrtkben csak dsztelem, akkor nem kpknt, hanem httrkpknt kell megadni. A httrkpek CSS-el alakthatk ki, lsd a CSS rsz Httrkpek definilsa fejezetet. c) A title jellemz ( title= cm, elnevezs, felirat ) olyan szveges informcit definil, melyet csak akkor mutat meg a bngsz, ha a megjelentett kp fl llunk az egrrel ( tooltip ) - gy ez nyomtatsban nem ltszdik. Valamennyi felsorolt jellemzt felhasznlva egy kp HTML kdja:

Pldaknt egy szvegben elhelyeznk egy kpet: A rzsa - ide beillesztnk egy rzsa kpet sok vrs rzsa helyettest szveggel s az egrrel a kpre llva megjelen rzsk felirattal - a rzsaflk csaldjnak egyik nemzetsge, nemestett fajait virga, olaja miatt termesztik. - A kdols j kpfjlnvvel s torztatlan kparnnyal a kvetkez lesz: A rzsa a rzsaflk csaldjnak egyik nemzetsge,
nemestett fajait virga, olaja miatt termesztik - Tudatosan rossz fjlnevet adva, hogy a kp ne tudjon letltdni, s torztva a kp arnyait: A rzsa a rzsaflk csaldjnak egyik nemzetsge,
nemestett fajait virga, olaja miatt termesztik. A kt eset megjelentse az albbi lesz:

Figyelem! Egy kp lehet lista eleme, tblzat eleme, s a ksbbi fejezetben trgyalt hivatkozsokban a szveg mellett vagy helyett alkalmazott elem is. 2.8. Mozgkpek s hang 2.8.1. A HTML5 eltti korban az ( idegen objektumok begyazsra szolgl ) cmkvel lehetett egy weblapra mozgkp - Flash, Silverlight, Windows Media, RealPlayer vagy Quick Time fjlokat feltenni. A bngszk egysges rtelmezse cljbl mg az 37

( egybknt a HTML5 -ig nem is szabvnyostott ) cmkvel meg kellett ismtelni a kdolst. A bngszk a videt egy ( ltalban msik cg ltal ksztett ) bvtmnybe (plug-in) raktk, ami a bngsz szmra egy fekete doboz volt, a bngsznek a videofjlhoz nem volt hozzfrse. A bvtmnyt a felhasznlnak kellett letltenie, s gondoskodnia a bvtmny s bngsz kompatibilitsrl. A HTML5 kszl szabvnya mdot nyjt a video-nak kzvetlenl a bngszkben ( bvtmny ignybevtele nlkli ) lejtszsra, manipullsra, CSS-el val formzsra. Azonban a funkci mg a fejleszts s szabvnyosts folyamatban van, ezrt ez a fejezet inkbb ler jelleg, mint a konkrt hasznlatot bemutat ismertet. A mozgkp-fjl egy videosvot, egy vagy tbb audiosvot s egy vagy tbb feliratozssvot tartalmazhat. Mindezeket egy container formtum rendezi egy video-fjlba. Rengeteg container formtum ltezik, a legelterjedtebbek: ASF: kiterjesztse .asf vagy .wmv ( Microsoft ) AVI: kiterjesztse .avi ( Microsoft ) Flash Video: kiterjesztse .flv ( Adobe ) Matroska: ...kiterjesztse .mkv MPEG 4: ...kiterjesztse ltalban .mp4 Ogg: ...kiterjesztse .ogv QuickTime: kiterjesztse .mov ( Apple ) A mozgkp tartalmat a video codec ( coder-decoder ) kdolja-dekdolja s tmrti ( a vilghln vesztesges tmrtsi algoritmusokat hasznlnak ). Rengeteg vesztesges video codec ltezik, a legelterjedtebbek: Dirac: begyazhat az .mp4, .ogv, .mkv s .avi container-ekbe H.264: begyazhat az .mp4 s .mkv container-ekbe MPEG-4 ASP: begyazhat az .avi, mp4 s .mkv container-ekbe Theora: brmelyik container-be begyazhat, de leggyakrabban az .ogv-ban hasznljk VC-1: elvileg container-fggetlen, gyakorlatilag az .asf container-ben hasznljk VP8: taln ez lesz a befut ( lsd lejjebb ) A hang tartalmat az audio codec ( coder-decoder ) kdolja-dekdolja s tmrti ( a vilghln itt is vesztesges tmrtsi algoritmusokat hasznlnak ). Rengeteg vesztesges audio codec ltezik, a legelterjedtebbek: AAC: max. 48 hangcsatorna, .mp4 container-be begyazhat MP3: max. 2 hangcsatorna, brmelyik container-be begyazhat Vorbis. tetszleges szm hangcsatorna, ltalban .ogv, ritkbban .mp4 vagy .mk container A feliratozsra a jelents szereplk egyenlre nem fordtanak fejlesztsi kapacitsokat. A HTML5 cmknl a W3C nem ad sem a container-re, sem az audio vagy video codec-re elrst. Teht egy elemhez tbb video-fjl kell hogy tartozzon, s a bngsz az elst fogja vlasztani, amit le tud jtszani. Azt pedig a felhasznlknak kell tudniuk, hogy melyik bngsz melyik container(ek)-t s codec(ek)-et tmogatja.

Az intenzv fejlesztsek s cges csatrozsok eredmnyeknt kb. 1 v mlva tisztulhat a kp. Jelenleg az albbi hrom verseng rendszer ( container + video + audio ) van: .mp4 .ogv .webm = H.264 + AAC = Theora + Vorbis = VP8 + Vorbis

A Firefox, Chrome s Opera WebM Project nven dolgozik egy webm kzs formtum kialaktsn, a Safari s Internet Explorer 9 pedig az .mp4 H.264 AAC re koncentrl - az Internet Explorer 8 egyltaln nem ismeri fel a video cmkt. Tartalkknt azrt a konkurens rendszerek fel is nyitva maradnak ajtk, pl. ha a felhasznl kln letlt magnak egy VP8 codec-et, akkor a WebM-et is hasznlhatja az Internet Explorer 9-el, a Microsoft pedig ksztett egy MPEG-4 bvtmnyt a Firefox-hoz. Figyelem! Jelenleg nincsen egyetlen olyan container s codec kombinci sem, amely valamennyi - egybknt HTML5 funkcikat rtelmez - bngszben mkdne. Ahhoz, hogy a videnk brmely ( j ) bngszben megnzhet legyen, tbbszrsen kell kdolni. A mozgkpet elvileg az llkp cmkjhez hasonl struktrj kdolsban terveztk, teht ( ha a gyjtmappban van a video-fjl is ): A szlessget s magassgot itt is ersen javasolt jellemz/rtkknt megadni, az llkphez kpest jelents klnbsg viszont, hogy itt a lejtszs krlmnyeit is definilni kell. A preload ( elre letlts ) jellemz lehetsges rtkei: - none: automatikusan semmilyen letlts megkezdst nem engedlyezi - metadata: csak a video tulajdonsgai tltdnek le automatikusan - auto: a teljes tartalom automatikusan letltdik Az autoplay ( lejtszs automatikus elindulsa ) jellemznek nem kell rtket adni, amennyiben berjuk a HTML kdba, automatikusan lejtszst kezdemnyez. A loop jellemznek ugyancsak nem kell rtket adni, a jellemz megadsa esetn a lejtszs vgt kveten megismtldik ( jrakezddik ) a lejtszs. Fontos! Az autoplay s loop jellemz s auto rtk hasznlata kdols szempontjbl ugyan helyes, hasznlata azonban nem javasolt a felhasznl dntse kell hogy legyen, hogy meg akarja-e nzni a video-t, s ha igen, akkor hnyszor, ill. kifizeti-e a letlts adatforgalmi djt nem illik kretlenl rzdtani egyiket sem. A poster jellemzvel a cmlapkp adhat meg, rtke a kp elrsi tja ( azonos gyjtmappa esetn a fjlnv s kiterjeszts ). azaz poster=fjlnv.kiterjeszts. A controls jellemznek szintn nem kell rtket adni, megadsa esetn a lejtszst szablyoz vezrlgombokat mellkeli a video-hoz a bngsz ( ha nem adjuk meg, akkor vagy nem tudjuk kezelni a video-t, vagy szkript-nyelven magunknak kell legyrtani egy vezrlst ).

A kiindul video-kdolst a fenti jellemzkkel kiegsztve mr nmileg hosszabb HTML-kd addik: Figyelem! A source s poster kiterjesztse termszetesen eltr, hiszen az llkp valsznleg PNG vagy JPG, a video pedig valsznleg WebM vagy MPEG-4. Tekintettel a container-ek s codec-ek vltozatossgra, a source jellemz helyett source cmkt szoks hasznlni a video elem tartalmnak meghatrozsra. Ekkor az eredeti struktra () tbbszrs fjlformtum kdolsa: Maximlis kompatibilitst megclozva a mozgkp egy verzija WebM (VP8 + Vorbis)-ban, egy msodik verzi MP4 (H.264 baseline video + AAC low complexity audio)-ban, egy harmadik verzi Ogg (Theora + Vorbis)-ban kell hogy a webhelyre kerljn: A elem megadja a mreteket s a lejtszssal kapcsolatos adatokat, de nem kapcsoldik kzvetlenl a video-fjlhoz. A belsejben hrom elem van, ezek a src jellemzjkkel kapcsoldnak az egyes video-fjlokhoz, a type jellemzvel megadva a container formtumot s a codec-eket. Idn tavasszal a video-t tartalmaz weblapokban mr tbb mint 60% volt a HTML5 cmkt alkalmazk arnya (szemben a tavaly v eleji 10%-al), a gyors terjeds ellenre azonban tartalkknt nem HTML-alap videolejtszst ( leginkbb Flash-t ) is szksges biztostani. 2.8.2. A cmkjhez hasonlan hasznlhat az cmke, pldul a legegyszerbb esetben: Termszetesen nincsen width, height s poster jellemzk, egybknt mindenben a video-nl lertak szerint kell kdolni ( autoplay, loop, preload s controls jellemzk definilsa, tbbszrs hangfjl-formtum kdolsa ). Az autoplay-el s loop-al kapcsolatos agglyok itt is rvnyesek.

2.9. Begyazott bngsztartalom Az llkp mintjra egy weblapba az pros cmkvel egy msik weblaprl szerzett bngszsi tartalom illeszthet be. Az llkphez hasonlan inline elemknt viselkedik, s amennyiben nem fr el a bngszett tartalom a szmra kijellt helyen, automatikusan megjelen grgetsvok segtsgvel nzhetk meg a nem ltsz rszek. A cmke ktelez jellemzje a bngszett tartalom forrsa - melynek rtke egy valamilyen webhelynek a teljes URL-je , ersen javasolt jellemzje a width s a height. Ha a rzss kpnk helyre beillesztjk pl. az origo.hu nyitlapjt, akkor a kdols az albbi: Tovbbi, immr nem ktelez jellemzje az iframe cmknek a sandbox, mellyel az iframeben val bngszs sorn kizrhatak ill. megengedhetek bizonyos kdok a biztonsg nvelse cljbl. A sandbox lehetsges rtkei: allow-same-origin, allow-top-navigation, allow-forms, allowscripts ezeket szkzzel, vessz nlkl felsorolva lehet megadni. Pl.: Alaprtelmezetten a megjelents ( mely CSS-el tovbb formzhat ):

Figyelem! Az iframe cmke csak on-line zemben mkdik rendeltetsszeren ha nem rhet el az URL, akkor a megjelents:

2.10. Karakter entitsok A HTML dokumentum tartalmnak kialaktsa sorn a foglalt karakterek ill. a billentyzetrl nem, vagy nehezen elrhet klnleges karakterek esetben un. karakter entitsokat (character entity) kell alkalmazni, ami az adott karakter/szimblum/jel kdolt megadst jelenti. Foglalt karakterek: a kdolsban hasznlt nhny karakternek a foly szvegben val hasznlata a bngszt megtvesztheti s HTML cmknek tekintheti. Ezek: < > & kisebb mint ( less-than ) nagyobb mint ( greater-than ) idzjel ( quotation mark ) s ( ampersand )

Billentyzetrl nem ( vagy nehezen ) bevihet klnleges karakterek: grg betk, pnznemek ( yuan, yen, font, stb. ) matematikai szimblumok ( mnusz, vgtelen, gyk, hatvnykitev, sszesen, kzel egyenl, azonos ), stb. A foglalt s klnleges karakterek kdja kt mdon is megadhat: entits szmmal ( numeric characters ), vagy entits nvvel ( named characters ) Mindkt megoldsnl a kd &-vel kezddik s ;-vel vgzdik, az entits szmnl # s szm, az entits nvnl szveg van a kd belsejben. A # ( kettskereszt ) hivatalos elnevezse oktotorp, de az egyszersg kedvrt a tovbbiakban a kettskereszt kifejezst hasznljuk.

Figyelem! Az entits szmmal trtn megads trtnhet tzes ( decimlis ) vagy tizenhatos (hexadecimlis) szmrendszerben is a felsorolsunkban csak a decimlis karakterkdot tntetjk fel. Az entits nvvel trtn megads kisbet-nagybet rzkeny. A foglalt karakterek s nhny gyakrabban hasznlt klnleges karakter entitsai: karakter < > & X

entits szm < > " '

entits nv < > " &

angol megnevezs ( less-than ) ( greater-than ) ( quotation mark ) ( ampersand ) ( copyright ) ( registered trademark ) ( trademark ) ( degree ) ( euro ) ( cent ) ( section ) ( plus-or-minus ) ( per mille ) ( multiplication ) ( non-breaking space )

A karakter entitsok teljes sklja a W3C webhelyn nzhet meg. Az utols karakter entitshoz tartozik magyarzat: a nem trhet szkznek ( non-breaking space ) nincsen megjelensi formja - az a funkcija, hogy tbb szbl ll kifejezs vagy informci esetn a szavak kz helyezve megakadlyozza azt, hogy a sor vgn a bngsz a kifejezs/informci kzben trhesse meg a sort, hanem sortrs nlkl tartja egyben azt. Tipikus plda, hogy a Coca Cola, Tr Rudi, stb. kt szava ne vljon el egymstl. Ha pldul a brazil labdarg Pel eredeti nevt ( Edson Arantes do Nascimento ) gy akarjuk megjelenteni, hogy ne kerlhessen tbb sorba megtrve, akkor a kdols: EdsonArantesdoNascimento A fentiek alapjn egy klnleges karakterekkel megtzdelt mondat kdolsa a hres ember neve kzbeni sortrst meg nem engedve gy nz ki: A 45C 1-ig mr, XYZ mrkj hmr 2 45-nek megfelel sszegbe kerlt. Amikor gyerekkorban nagyon ritkn megfzott s lzas beteg volt, a hres brazil focista, Edson Arantes do Nascimento is ezt hasznlta. ( Nem a mondanivalja, hanem a sok klnleges karakter indokolja a fenti pldt. ) "A 45C1-ig mr, XYZ mrkj hmr 2 45 -nek megfelel sszegbe kerlt. Amikor gyerekkorban nagyon ritkn megfzott s lzas beteg volt, a hres brazil focista, EdsonArantesdoNascimento is ezt hasznlta."

A bngsz ablaka szlessgnek folyamatos vltoztatsval figyelhet meg, hogy a sortrs hogyan vltozik a hossz nvnl a mondatban ( ott nem trik meg ). 2.11 Tartalmi/formzsi HTML cmkk A HTML cmkk egy csoportja, melyeknek korbban a formzsban volt szerepe, a CSS alkalmazsa ta olyan mdon hasznlatos, hogy br a megjelentsre is hatnak, tartalmi okok miatt hasznljk ket, s a vgs formzst tovbbra is CSS-el lehet ellltani. Tartalmi megfontolson alapul hasznlatuk azrt is clszer, mert a keresk a HTML cmkkkel val kialakts alapjn tudjk jobban a tallatok kz beilleszteni az ezeket az elemeket tartalmaz weblapokat. a)-b) Bizonyos karakterek megjelentshez is HTML cmkkre van szksg. A .. pros cmke (subscript=als index ) pl. elengedhetetlen a vegyjelek rshoz (lsd H2O), a .. pros cmke ( superscript=fels index ) pl. idegen kifejezsek ( lsd az angol 1st, francia 1ere ), vdjegyek esetn, vagy mrtkegysgek hasznlatakor (pl. m2, cm3 ) szksges. ( Az elzekben kdolt XYZ is helyesen XYZ kellett volna hogy legyen. ) Pldul: A LMN kmcsbe 5 cm3 H2SO4 kerlt. mondat kdolva: "Az LMN kmcsbe 5 cm3 H2SO4 kerlt." c)-d) Idzetek: kln pros cmke van a rvid idzetekre, s kln a hosszabb, tmbszer idzetekre. A rvid, ltalban mondaton vagy bekezdsen belli ( inline ) idzetet kdolssal a . ... prral ( quote=idzet ), a hosszabb, blokkszer idzeteket a . ( blockquote=idzetblokk ) prral lehet ltrehozni. - Plda a cmke hasznlatra: A vilg egyik legismertebb idzete a Hamlet-bl a Lenni, vagy nem lenni, ez itt a krds. Kdolva: A vilg egyik legismertebb idzete a Hamlet-bl a Lenni, vagy nem lenni, ez itt a krds.

- Plda a cmke hasznlatra: Az ENSZ Emberi Jogok Egyetemes Nyilatkozata els kt cikkelye kimondja: Minden emberi lny szabadon szletik s egyenl mltsga s joga van. Az emberek, sszel s lelkiismerettel brvn, egymssal szemben testvri szellemben kell hogy viseltessenek. Mindenki, brmely megklnbztetsre, nevezetesen fajra, sznre, nemre, nyelvre, vallsra, politikai vagy brmely ms vlemnyre, nemzeti vagy trsadalmi eredetre, vagyonra, szletsre, vagy brmely ms krlmnyre val tekintet nlkl hivatkozhat a jelen Nyilatkozatban kinyilvntott sszes jogokra s szabadsgokra. Kdolva: Az ENSZ Emberi Jogok Egyetemes Nyilatkozata els kt cikkelye kimondja: Minden emberi lny Mindenki, brmely megklnbztetsre A bngszk idzjel nlkl, mindkt oldali behzssal, eltte s utna trkzzel, blokkszint elemknt jelentik meg az idzetblokkot, melyben lehetnek begyazott elemek is ( pl. jelen esetben bekezdsek ). Mindkt idzettpus CSS-el tovbb formzhat ( lsd CSS rsz Szveg fejezete ). Az a)-b)-c)-d) cmkk megjelentse:

e) A rvidts pros cmkje az ( abbreviation=rvidts ). A rvidts vagy mozaiksz els elfordulsakor szoks gy a teljes alakot feltntetni, mely csak a kpernyn, a kurzornak a rvidtsre/mozaikszra lltsval egy kis ablakban ( tooltip ) jelenik meg, nyomtatsban nem ltszik. A title jellemz ( mely csak formailag egyezik meg a title pros cmkvel ! ) segtsgvel, annak rtkeknt adhat meg a teljes alak. Pl. az elz blokkidzet pldjra visszatrve, az ENSZ rvidts teljes alakjt megmutatva: Az ENSZ Emberi Jogok Egyetemes Nyilatkozata els kt cikkelye kimondja: ( Az nem trhet szkzt azrt kellett alkalmazni, hogy ne csak az els szt jelentsk meg a bngszk. ) A Firefox pontozott alhzssal jelzi, hogy a teljes alak is megtekinthet, a tbbiek nem alkalmaznak alaprtelmezett figyelemfelkelt megjelentst. Ha azt kvnjuk, hogy valamennyi bngsz egyformn jelentse meg, ill. egyformn szembetl legyen a tovbbi informci elrhetsge, CSS-el hozand a kvnt formra a rvidts. (Lsd CSS rsz Bettpusok s Szveg fejezeteit ) f) A meghatrozs .. pros cmke ( definition=meghatrozs ) a rvidtssel megegyez mdon mkdik. Pl. Az agyvz, latinul liquor cerebrospinalis, fontos szerepet jtszik az agyszvet anyagcserjben s a krokozk elleni vdelemben. mondatban ha megadjuk az agyvz meghatrozst ( az agyat s a gerincvelt bort hrtyk kztti rsben raml folyadk ), a HTML kdols az albbi lesz: Az agyvz, latinul liquor cerebrospinalis, fontos szerepet jtszik az agyszvet anyagcserjben s a krokozk elleni vdelemben. ( Az nem trhet szkzt ismt azrt kellett alkalmazni, hogy ne csak az els szt jelentsk meg a bngszk. ) A Firefox s az Internet Explorer dlt betvel hvja fel a figyelmet, hogy tartozik meghatrozs is a szhoz. Ha azt kvnjuk, hogy valamennyi bngsz egyformn jelentse meg, ill. hvja fel a figyelmet, CSS-el hozand a kvnt formra a definci. ( Lsd CSS rsz Bettpusok s Szveg fejezeteit ) g) Dltbets megjelentst hoz ltre az pros cmke ( i=italic=dlt bet ). Mszaki kifejezsek, idegen nyelvbl vett idimk, hajk neve, valaki gondolatai jellhetk gy. Az elz mondatban a latin kifejezst dltbetsen megjelentve: Az agyvz, latinul liquor cerebrospinalis, fontos szerepet jtszik az agyszvet anyagcserjben s a krokozk elleni vdelemben.

h) A cmhivatkozs pros cmkje a ( citation=cmhivatkozs ). Nem szerzre, hanem mre - knyvre, jsgra, versre, dalra, szndarabra, msik forrsra - lehet gy hivatkozni. Pldnkban a Hamlet-re ( mint drmra s nem mint szemlyre ) hivatkozunk: A vilg egyik legismertebb idzete a Hamlet-bl a Lenni, vagy nem lenni, ez itt a krds. A bngszk dlt betvel jelentik meg a cmhivatkozst, ha vltoztatni akarunk ezen, az CSS-el trtnik ( lsd CSS rsz Bettpusok s Szveg fejezeteit ). Az e)-f)-g)-h) cmkk megjelentse:

i) Szvegben kulcssz, katalgusban termknv kiemelst szolglja a pros cmke ( b=bold=flkvr bet ). Pl. ha A digitlis videokamerk egyre nvekv hnyadban a Full HD felbontst alkalmazzk. mondatban a videokamera a kulcssz, a kdols az albbi: A digitlis videokamerk egyre nvekv hnyadban a Full HD felbontst alkalmazzk. . A bngszk alaprtelmezetten flkvr betkkel jelentik meg, ha mskpp akarjuk, CSS-el alakthat ki a kvnt formzs. ( lsd CSS rsz Bettpusok s Szveg fejezeteit ) j)-k)-l) Tartalmi kiemelsre a .. ( strong= ers kiemels ), kihangslyozsra .. ( em=emphasis=hangsly), szvegben val kiemelsre a . ( mark=jelzs, jel ) pros cmkk szolglnak. A bngszk a strong esetben flkvr betkkel, az em esetn dltbetvel, a mark hasznlatakor srga httrrel jelentik meg a megjellt szavakat. Ha vltoztatni akarunk rajta, az CSS-el vgezhet el. Pl.: A medencbe ugrlni veszlyes s szigoran tilos ! mondatban a szigoran tilos-t kiemelve: A medencbe ugrlni veszlyes s szigoran tilos !

Az em vagy mark cmkvel a fentivel analg mdon trtnik a kdols. Pusztn formai meggondolsbl a flkvr, dltbets vagy sznes httrrel val megjelentst CSS-el kell ltrehozni, a fenti i, b, strong, em, mark HTML cmkk tartalmi megklnbztetst ( is ) jellnek. Figyelem! A mark cmkt egyenlre mg csak a Chrome, az Internet Explorer 9 s Firefox 4 s 5 rtelmezik. m) A .. pros cmkvel ( small=kicsi ) kisbets megjegyzseket, szerzi jogra val korltozsokat, stb. lehet blokkszinten bevinni. Pl. egy szoksos angol nyelv szerzi jogra vonatkoz kittel: No part of this book, including interior and cover design, may be reproduced or transmitted in any form,
by any means without the prior written permission of the publisher. Az i)-j)-k)-l)-m) cmkk megjelentse:

n) A . ( bidirectional order=ktirny rend ) pros cmkvel meghatrozhat a szveg rsi/olvassi irnya. Jellemzje a dir ( dir=direction=irny ), lehetsges rtkei az ltr ( left-to-right=balrl jobbra ) s az rtl ( right-to-left=jobbrl balra ). Alaprtelmezett rtk a balrl jobbra halads, teht csak a jobbrl balra rs/olvass esetn van rtelme megadni. ( A szvegirny CSS-el is definilhat, de a HTML a javasolt, hogy CSS nlkl is tartalmilag helyes maradjon a weboldal ). Magyar szvegben taln Arany Jnos ismert mondatval lehet alkalmazni ( mely kimondva visszafel is ugyanazt jelenti mint odafel), ekkor gy kdoland a fordtott szvegirny: Gza kk az g o) Az pros cmke a weblap szerzjnek vagy a hivatkozott informcinak az elrhetsgt definilja. Ha a weboldal trzs ( body ) rszbe van rva, 48

akkor a weboldal szerzjnek, ha a trzs egy szakaszba, akkor az adott szakasz szerzjnek elrhetsgre vonatkozik. Blokkszint elem, alaprtelmezetten dlt betvel jelenik meg. Figyelem! ltalban egy postai cmet nem az cmkvel, hanem a s
cmkkkel lehet s kell kdolni ! p) Elre formzott szveget a pros cmkvel ( preformatted=elre formzott ) lehet a HTML lapba kdolni. Mint mr a korbbiakbl kiderlt, a HTML az elvlaszt karakter ( inter-element whitespace ) tpustl ( szkz, tabultor, j sor ) s szmtl fggetlenl mindig csak egy szkzt hasznl. Az editorban szerkesztett un. ASCII-rajzok ( karakterekbl komponlt kpek ), versek, stb. formzst viszont a . cmkk alkalmazsval a kdols is megrzi. Pl. Jzsef Attila Szletsnapomra c. versnek els kt versszakt az eredeti formban lerva, majd az elformzsi kddal krbefogva, a bngszk megrzik az eredeti formt: Harminckt ves lettem n meglepets e kltemny csecse becse: ajndk, mellyel meglepem e kvhzi szegleten magam magam. Az n)-o)-p) cmkk megjelentse:

q)-r)-s) Szveg vltoztatsa az eredeti tartalom megrzsvel kt mdon trtnhet. - Mikor az eredeti s a mdostott - beszrt vagy trlt szerkesztett tartalmat is egyarnt clszer feltntetni, az . ( ins=insert = beilleszt, beszr ) s . . ( delete = trl ) pros cmkk alkalmazandk. Pl. egy utazsra val kszldskor a teendk listjban az elvgzett feladatok s az idkzben felmerlt j teendk regisztrlsa az eredeti lista tartalmt is megrizve az albbi (helytakarkossg miatt egyms mell rt) listkban kdolhat: Az eredeti teendk listja:

napolajat venni

becsomagolni A mdostott teendk listja:

napolajatfogkrmet venni

becsomagolni

virgokat megntzni

A mdosts sorn a napolaj fogkrmre vltozott, a becsomagols trlve lett, s a teendk a virgok megntzsvel lettek kiegsztve. ( Mint lthat, egy listaelemben tbb ins s del is elhelyezhet. ) A mdostsokhoz a datetime jellemzvel hozzrendelhetk a beilleszts vagy trls idpontjai azonban a bngszk jelenleg ezt nem veszik figyelembe. - Az ( s=struck=thzott ) pros cmkvel azt jelljk, hogy az eredeti informci jelenleg nem rvnyes. Pl. rvltozs esetn: A termk ra: 10.000 Ft. Akcis ra mg egy htig: 8.500 Ft !

A trlt s nem aktulis/rvnyes elemeket thzva, a beszrt elemeket alhzva jelentik meg a bngszk ( ez konvenci, de CSS-el mdosthat ). ( lsd CSS rsz Bettpusok s Szveg fejezeteit ) t) Egy adott tartomnyon belli rtk definilhat a . pros elemmel. Miutn egy ismert rtktartomnyon bell rtelmezett, mindig meg kell adni a tartomny kt szls rtkt a min s max jellemzkkel. Az opcionlis title jellemz tooltip formjban abszolt szmknt vagy szzalkosan mutatja meg a konkrt rtket, ha a kurzorral a tartomny fl llunk ( kattintani nem kell ). Pl: Ekkort ugrott a hrmasugr az ugrgdrben:
Egyenlre az Opera 11.x s a Chrome ismeri fel s rtelmezi a meter cmkt. u) Hossz szavakba sortrsi lehetsget lehet ( akr tbb helyen ) is bekdolni. Ha a sz nem fr el az adott sorban az oldalon vagy a div-ben ahol tallhat, elvlasztjel nlkl a megadott hely(ek)en tri meg a bngsz, s j sorban folytatja. Cmkje a pratlan ( res ) elem, ( wbr = word break = sz megszaktsa ). Pl.: szak-Wales-ben van egy kis falu, amit ltalban Llanfair PG nven emltenek, de a teljes neve egy 58 bets szbl ll, s klnbz rekordok knyve szerint ez a leghosszabb helysgnv Nagy-Britanniban ( vagy egsz Eurpban ? ). Turistabuszok mlenek ide, hogy a ltogatk trikt vagy bgrt vehessenek a falu teljes nevvel, mely gy hangzik: Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch. A bngsz ablaka szlessgnek fokozatos cskkentsvel megfigyelhet, hogy a sztrs a kdolt helye(ke)n kvetkezik be. Az Opera-k s az Internet Explorer-ek nem rtelmezik a wbr cmkt. v) A kpletekben, fggvnyekben szerepl vltozk a . pros cmkvel kdolhatk. A vltozkat a bngszk dlt betvel jelentik meg. Pl.: Pthagorasz kpletbe foglalta a derkszg hromszg a s b befogi, ill. c tfogja mrete kztti trvnyszersget. A t)-u)-v) cmkk megjelentse:

A felhasznlt tartalmi/formzsi HTML cmkk: Cmke: Funkcija: als indexet definil pros elem fels indexet definil pros elem rvidebb sorkzi ( inline ) idzetet definil pros elem idzetblokkot definil pros elem rvidtst, mozaikszt definil pros elem meghatrozst definil pros elem dltbets szveget definil pros elem cmhivatkozst definil pros elem egy ismert tartomnyon belli rtket definil pros elem vltoz rtket definil pros elem sztrsi lehetsget definil pratlan elem flkvr szveget definil pros elem ers kiemelst definil pros elem kihangslyozst definil pros elem szvegrsz kiemelst definilja pros elem kisbets szveget definil pros elem elformzott szveget definil pros elem beszrt szveget definil pros elem trlt szveget definil pros elem 52 nem rvnyes/mr nem aktulis szveget definil pros elem dokumentum szerzjnek elrhetsgt definilja pros elem szveg rsi/olvassi irnyt definilja pros elem 2.12. A weboldal egyes rszeinek formzst elsegt HTML cmkkHa a kdolt dokumentumban egy adott rsznl nincsen olyan, a korbbi fejezetekben trgyalt HTML cmke, amihez formzs vagy hivatkozs lenne rendelhet, mestersgesen bevihetk ilyen cmkk. Az alaprtelmezett megjelentst nem befolysoljk (lsd thead, tbody analgia) de elklnl krnyezeti szintet hoznak ltre a kvnt kijells ( s gy a formzs ) szmra. Ebben a fejezetben csak a formzst elsegt HTML cmkk kdolst s azok alkalmazhatsgt trgyaljuk, magt a rszletes formzsi technikt s lehetsgeket a CSS-rsz trgyalja - itt csak egy-egy megjelentsi plda szerepel illusztrciknt. 2.12.1. A . pros cmkk ( division=szakasz ) egy ltalnos trolelemet (trol tmbt) jellnek ki ( ltalban a weblap egy logikailag sszetartoz rszt alkotjk ), a benne elhelyezked tetszleges tartalmakra ( szveg, lista, tblzat, kp, hivatkozsok, stb. ) egysgesen lehet hivatkozni, ill. formzst hozzrendelni. Ha tbb ilyen div szakasz is van egy oldalon ( s ez a gyakori eset ), az egyes trolelemek az id jellemzjk ( identifier=azonost ) rtkvel ( clszeren a trolelemre jellemz nvvel ) azonosthatk. Az id-k rtkeinek egyedieknek kell lennik, azaz mindegyik csak egyszer szerepelhet egy weblapon, klnben nem lesz egyrtelm az azonostsuk. Az id-knek betvel kell kezddnik, nem tartalmazhatnak szkzt, magyar megnevezs esetn legyenek kezetmentes kisbets szavak. A HTML kdba a trolelemeket berva a HTML tartalom s alaprtelmezett megjelentse nmagban nem vltozik meg, a CSS-ben hozzjuk rendelt formzsi tulajdonsgokkal egytt azonban nagyon fontos szerepk van a weblap megjelentsnek kialaktsban. a) Pldaknt helyezzk el a weboldalon - az els lelmiszeres listnkat, melyhez lelmiszerek listja cmet rendelnk hozz, hogy az a listval egy egysget alkosson, egytt legyenek mozgathatk, hivatkozhatk - s a rzss kpet, melyhez hasonl clbl s mdon hozzrendeljk a Vrs rzsk cmet. A div szakaszok kdolsa a listbl ill. kpbl, s a tlk sortrssel elvlasztott, vagy bekezdsbe foglalt cmekbl ll ( sortrs vagy bekezds nlkl a cm a kp mell kerlne ). A bekezds elnye, hogy gy a cmre mg kln is lehet hivatkozni. A lists trolelem id-je (azonostja) legyen etel, a rzss rozsa ( az kezetmentessg miatt ). Ha fell lesz a cm: lelmiszerek listja kenyr

tej Ha alul lesz a cm: kenyr tej vaj53vaj Vrs rzsk lelmiszerek listja Vrs rzsk ( A kt lista kdolst helytakarkossg miatt helyeztk egyms mell, a HTML lapon egymst kveten kell kdolni ket. ) Miutn a formzsra nem adtunk mg meg CSS-tulajdonsgokat, a HTML dokumentum megtekintsekor semmilyen vltozst nem okoz a fenti szakaszok kialaktsa. Ha viszont a CSS-ben formzzuk a div szakaszokat, szmtalan megjelentsi mdot ( httr, keret, betszn, stb. ) rendelhetnk hozzjuk, melyek a CSS-ben brmikor megvltoztathatk. Pldul:Figyelem! Egy blokkszint elemet nmagban semmi rtelme div blokkba rakni, hiszen az anlkl is id azonostval hivatkozhatv, formzhatv tehet .54Az id azonost ugyanis ltalnos jellemz, szinte minden cmkhez hasznlhat ( kivtelek a head, html, meta, style s title, de ezeknl rtelmetlen is lenne a hasznlata ), teht a cmsorok, bekezdsek, listk, tblzatok, idzetblokkok nmagukban is megklnbztethetv, hivatkozhatv s formzhatv tehetk: ... .. .. .. . Megjegyzs: Egy tetszleges elem id-kkel val hivatkozhatv s formzhatv ttele a 2010. szeptember-decemberi bngszstatisztiks tblzaton is bemutathat, pl. ha a tblzattrzset tbb rszre osztjuk, s az egyes rszeket id azonostjuk alapjn ( CSS-ben ) formzzuk: Bngszcsaldok statisztikja 2010 szeptemberoktbernovember december Firefox 53,36% 52,68%52,62% 51,92% Internet Explorer31,20%31,24%30,53% 29,97% Chrome10,99%11,61%12,32% 13,37% Opera3,47%3,44%3,46% 3,50% Safari0,58%0,61%0,63% 0,71% SafariMobile0,09%0,11%0,13% 0,17% egyb0,31%0,31%0,31% 0,36% *ennek 36,4%-a IE6 s IE7 A tbb tbody rsz bekdolsa nem okoz tartalmi vagy az alaprtelmezett megjelentsben val vltozst, CSS-ben viszont klnfle formzs rendelhet hozzjuk, pl.55b) A weblap legalapvetbb, f szerkezeti elemei div ltalnos trolelemekben helyezhetk el. Egy weblap trzsnek ( body ) tipikus szerkezete a fejlcbl ( header ), a befoglal terletbl ( container vagy wrapper ) s a lblcbl ( footer ) ll. A befoglal terlet tartalmazza a navigcis rszt (nav=navigation) s a konkrt tartalmat ( content ). A tartalom tovbbi tmbkbl llhat, mint pl. f rsz ( main ), szakasz ( section ), cikk ( article ), oldals informcis sv ( aside ), stb. Nem felttlenl jelenik meg minden szerkezeti elem minden weblapon, s az egyes szerkezeti elemek a formzs kialaktsa rdekben tetszleges szm div rszekre tovbb oszthatk. A fenti szerkezeti elemek kijellse s azonostsa ltalban a div cmkkkel s id jellemzik rtkeivel trtnhet: - fejlc esetn ( nem egyenl a head=fejjel ! ) fejlc tartalma ( pl. logo, emblma, jelmondat, stb. ) - befoglal terlet esetn vagy navigcis rsz, tartalom ( cikkekkel, oldalhasbos kiegsztsekkel, dszt elemekkel, stb. ) - lblc esetn lblc tartalma ( pl. a weblap ksztje, frissts idpontja, copyright, csatlakoz dokumentumokhoz hivatkozsok, szerz elrhetsge, stb. ) 56A fentiek analgijra a navigcis rsznek .., a tartalomnak .., azon bell .., stb. mdon alakthat ki sajt trolelem. A weboldal f szerkezeti egysgei div szakaszokkal kialaktva ( pirossal a container elem ):2.12.2. A fbb szerkezeti elemek sajt, j HTML cmkvel is rendelkeznek, de ezeket a cmkket csak a Firefox 4 s 5, Chrome, Opera 11.1, Internet Explorer 9 s Safari 5 bngszk ismerik fel, az Internet Explorer 8, Firefox 3.6 s Opera 11.0 mg nem: .. helyett helyett helyett .. ...Tovbbi, f szerkezeti elemeket definil j pros cmkk a section ( weboldal egy tipikusan cmmel is rendelkez - szakasza ), az aside ( a f gondolatmenethez rintlegesen csatlakoz tartalom ), s az article ( jsgcikk, blog-bejegyzs ). A weblap trzsnek szerkezete teht az j HTML cmkkkel definilva pl. az albbi lehet:57Kdolsa pedig: meta-adatok fejlc tartalma . navigcis rsz(ek) tartalma ( akr kett is lehet, pl. a webhelyre s a weblapra ) tbb is lehet belle tbb is lehet belle tbb is lehet belle lblc tartalma A sajt HTML cmks szerkezeti kialakts nemcsak egyszerbb a div-es kialaktsnl, de a (legjabb) bngszk rtelmezni tudjk, hogy milyen strukturlis elemrl van sz ( a div cmke jellemz/rtk prost nem rtelmezik, csak egyszeren megjelentik ). 2.12.3.1. A figure trolelembe foglalhatk a kpek, diagrammok, brk, listk, s a hozzjuk tartoz cm, felirat vagy magyarzat. Ezeket a begyazott elemeket a figure ( bra ) s figcaption ( figure caption = bra cme ) pros HTML cmkkkel lehet egy kzs elemknt kezelni s formzni. A div-es kdolsnl ( lsd 2.12.1/a pont ) ez elegnsabb megolds, de egyenlre mg csak a Firefox 4 s 5, Chrome ill. az Internet Explorer 9 rtelmezi. Pl. az els szmozott listnkat lelmiszerek listja cmmel egymshoz rendelve a kdols: Ha fell van a cm: Ha alul van a cm: lelmiszerek listja kenyr kenyr tej tej vaj vaj lelmiszerek listja 58Vagy pl. egy kphez rendelt cm esetn a kdols: Ha fell van a cm: Vrs rzsk Ha alul van a cm: Vrs rzsk 2.12.3.2. A cmsorok a hgroup ( heading group=cmsor csoport ) pros cmkvel csoportosthatk egy befoglal elembe, amennyiben a cmhierarchiban a h1 utn pl. a h2 cmsor csak alcmknt szerepel, s nem egy alfejezet cmsort alkotja. Pldnkban visszatrve az ENSZ Emberi Jogok Egyetemes Nyilatkozatra: a) Ha a h2 cmsorok a h1 cmsorral megadott szveg egy-egy alfejezetnek cmsoraknt szerepelnek, akkor a mr korbban trgyalt mdon trtnik a kdols: Az ENSZ Emberi Jogok Egyetemes Nyilatkozatnak kezdete Els cikkely Minden. emberi lny szabadon szletik.. Msodik cikkely Mindenki, brmely megklnbztetsre, nevezetesen fajra, sznre, nemre, nyelvre, vallsra,. b) Ha a h2 cmsor a h1 cmsor alcmeknt szerepel, de nem tartozik hozz kln alfejezet, akkor a kdols: Az ENSZ Emberi Jogok Egyetemes Nyilatkozatnak kezdete Els s msodik cikkely Minden emberi lny szabadon szletik Mindenki, brmely megklnbztetsre, nevezetesen fajra, sznre, nemre, nyelvre, vallsra, Tovbbi cmsor csoportokat kpezve a ksbbi szvegrszeknl a korbbiaktl fggetlenl mindig jrakezdhet a cmhierarchia szerinti szmozs. A Chrome, Safari 5, Internet Explorer 9, Firefox 4 s 5 felismerik ezt a cmkt, az Internet Explorer 8 s Opera 11.x mg nem. 2.12.4. Soron bell ( inline ) a .. pros cmkvel jellhet ki olyan tartalom, ami kln formzhat. A span cmkt a div-hez hasonlan az id egyedi azonostval lehet elltni ( ha egy oldalon tbb is van belle ) . Pl.: A medencbe ugrlni veszlyes s szigoran tilos ! mondatban a szigoran tilos-t kiemelve ezttal csak formzs ( nem mint korbban, tartalmi kiemels ) cljbl: A medencbe ugrlni veszlyes s szigoran tilos !59A span cmke kdolsval nmagban megint nem trtnik vltozs a HTML oldal alaprtelmezett megjelentsben, a CSS-b

html5 css3 osszefoglalo v5

Documents