html5 css3 osszefoglalo v10

1

HTML5 + CSS3

SZABVNYKVET STATIKUS WEBOLDALAK

SZERKESZTSE

0.x verzi

2014. janur

2

TARTALOM TARTALOM .............................................................................................................................. 2 ELSZ ..................................................................................................................................... 4 1. ALAPOK ................................................................................................................................ 6

1.1. Tartalom s forma: HTML s CSS ................................................................................. 6 1.2. A weblapkszts hardver s szoftver ignye .................................................................. 7 1.3. Statikus webhelyek kialaktsnak szoksos mdja ...................................................... 15

2. HTML5 ................................................................................................................................. 16 2.1. A HTML nyelvtana ....................................................................................................... 16 2.2. A weboldal szerkezete ................................................................................................... 17 2.3. Az els konkrt weblap ................................................................................................. 21 2.4. Alapvet HTML cmkk ............................................................................................... 23 2.5. Listk ............................................................................................................................. 27 2.6. Tblzatok ..................................................................................................................... 32 2.7. Kpek ............................................................................................................................ 47 2.8. Mozgkpek s hang ..................................................................................................... 49 2.9. Begyazott bngsztartalom ....................................................................................... 54 2.10. Karakter entitsok ....................................................................................................... 57 2.11. Tartalmi/formzsi HTML cmkk ............................................................................. 58 2.12. A weboldal egyes rszeinek formzst elsegt HTML cmkk ............................. 67 2.13. Hivatkozsok ............................................................................................................... 74

2.13.1. Kls hivatkozsok .............................................................................................. 74 2.13.2. Bels hivatkozsok ............................................................................................... 75 2.13.3. Kpek hasznlata hivatkozsokhoz ...................................................................... 80 2.13.4. Hivatkozsok hasznlata multimdihoz s e-mail-hez ....................................... 83 2.13.5. Kptrkpek ......................................................................................................... 83

2.14. rlapok ........................................................................................................................ 86 2.14.1. Az input cmke s kiegszt ( label, datalist, option ) cmki ............................ 87 2.14.2. Egyb ( select, fieldset, textarea ) cmkk............................................................ 94 2.14.3. Egy rlap megszerkesztse ................................................................................... 98

2.15. Meta-adatok ............................................................................................................... 100 2.16. Webhely hierarchikus mappaszerkezettel ................................................................. 101 2.17. HTML5 sszefoglal ................................................................................................. 107

3. CSS3 ................................................................................................................................... 113 3.1. Kitltszveg s kitltkp ......................................................................................... 113 3.2. Kpformtumok .......................................................................................................... 114 3.3. Sznek .......................................................................................................................... 116 3.4. rtkek s mrtkegysgek ......................................................................................... 122 3.5. Az elemi doboz-modell ............................................................................................... 124 3.6. A CSS nyelvtana ......................................................................................................... 126 3.7. A CSS hierarchija ...................................................................................................... 136 3.8. Bettpusok .................................................................................................................. 138 3.9. Sznek definilsa ........................................................................................................ 146 3.10. Httrszn definilsa ................................................................................................ 148 3.11. Blokkszint elemek elhelyezse I. ............................................................................ 149

3.11.1. Mretek ............................................................................................................... 149 3.11.2. Elhelyezs ........................................................................................................... 150

3.12. Szveg formzsa ...................................................................................................... 152 3.12.1. Szveg pozcionlsa s dsztse ...................................................................... 153 3.12.2. Szveg trdelse s elvlasztsa ........................................................................ 159

3

3.12.3. Szveg rnyka .................................................................................................. 160 3.13. Listk formzsa ....................................................................................................... 164 3.14. Standard vonaltpus szgletes szeglyek ................................................................. 167 3.15. Standard vonaltpus lekerektett szeglyek ............................................................. 176 3.16. Kpbl ksztett szeglyek ........................................................................................ 182 3.17. Krvonal .................................................................................................................... 189 3.18. Blokkszint elemek elhelyezse II. ........................................................................... 191

3.18.1. Elhelyezs mdja ................................................................................................ 191 3.18.2. Lthatsg .......................................................................................................... 201 3.18.3. Lthatsgi sorrend ............................................................................................ 201

3.19. Doboz rnykok ........................................................................................................ 206 3.20. Httrkpek definilsa ............................................................................................. 209

3.20.1. Httrkpek ismtldse .................................................................................... 211 3.20.2. Htterek hatkre ............................................................................................... 215 3.20.3. Httrkpek helyzete .......................................................................................... 216 3.20.4. Httrkpek mrete ............................................................................................ 219 3.20.5. Httrkpek grgethetsge ............................................................................... 221 3.20.6. sszevontan megadhat httrkp tulajdonsgok .............................................. 222 3.20.7. Tbb httrkp egyidej alkalmazsa ................................................................ 222

3.21. Tblzatok formzsa ................................................................................................ 224 3.21.1. Nem tblzat-specifikus tulajdonsgok alkalmazsa ......................................... 226 3.21.2. Tblzat-specifikus tulajdonsgok alkalmazsa ................................................. 231

3.22. Tlnyls ................................................................................................................... 236 3.23. Egyes elemekhez kapcsold kurzor-megjelents ................................................... 241 3.24. Egrkurzorral egyes elemek megjelentsnek a megvltoztatsa ............................ 242

3.24.1. Hirtelen tmenet ................................................................................................. 243 3.24.2. Folyamatos tmenet ............................................................................................ 245 3.24.3. Animci ............................................................................................................ 249

3.25. Tbbhasbos elrendezs ............................................................................................ 255 3.26. Szntmenetek ........................................................................................................... 265

3.26.1. Lineris szntmenetek ....................................................................................... 265 3.26.2. Sugrirny szntmenetek ................................................................................ 269 3.26.3. Peridikusan ismtld szntmenetek .............................................................. 273

3.27. Skbeli transzformcik ............................................................................................. 280 3.28. Trbeli transzformcik ............................................................................................ 286 3.29. CSS alapbellts ....................................................................................................... 297 3.30. Specilis formzsok pszeudo-elemekkel ................................................................. 299 3.31. rlap formzsa ........................................................................................................ 308 3.32. Legrdl menk ...................................................................................................... 311 3.33. Weblap elrendezsek ................................................................................................. 314

4. FGGELK I. - Trtneti sszefoglal .......................................................................... 334 4.1 Elzmnyek I. ( Internet )............................................................................................. 334 4.2 Elzmnyek II. ( hiperszveg, jellnyelv ) ................................................................ 335 4.3 Elzmnyek III. ( HTTP, HTML, www ) .................................................................... 335 4.4 Elzmnyek IV. ( W3C, CSS, PNG ) .......................................................................... 336 4.5 Elzmnyek V. ( XHTML ) ......................................................................................... 337 4.6. Rvid bngsztrtnelem ....................................................................................... 339 4.7. A jelen s belthat jv ( HTML5 s CSS3 ) ............................................................ 341

4

ELSZ

A HTML5 fejlesztsnek kezdete 2004-re, a CSS3- mg rgebbre, kb. 1999 - 2000-re vezethet vissza. Az azta eltelt sok v kanyarokkal, lellsokkal s zskutckkal teli, kln-bz cges rdekek ltal befolysolt fejlesztsei mr-mr elkoptattk ezeket a fogalmakat. A szabvnyostsukat koordinl szervezet ( World Wide Web Consortium ) is kb. 2009-ig csak flszvvel foglalkozott velk, s mg 2011 elejn is a HTML5 elkszltt legkorbban a 2020-as vek elejre prognosztizlta.

2011-ben azonban hatrozott fordulat kvetkezett be mind a gyakorlati felhasznls, mind a szabvnyosts tern.

A gyors verzivltsokkal verseng bngszgyrtk szolgltatsaikban a HTML5 s CSS3 kompatibilitst hangslyosan kezdtk kezelni, s a Microsoft csatlakozsa ezen techni-kknak a termkeiben val alkalmazshoz mrfldkvet jelent a webszerkeszts szabvnyo-stsa tjn. Minden jelents mobileszkz is tmogatja a HTML5 technolgit, a CSS3 pedig ( tbbek kztt ) segti az asztali s mobil eszkzkre val kzel egysges tervezst, gy a mobil platformok ( tblagp s okostelefon ) gyors terjedse tovbb nveli a HTML5 s CSS3 alkalmazsnak lehetsgt s clszersgt.

A World Wide Web Consortium HTML5 logo-t vezetett be a technika npszersts-re s egyrtelmen btortani kezdte a mindennapi hasznlatt. A rgta hzd HTML5 fej-lesztseknek rgztettk s csaknem egy vtizeddel elrehoztk a vglegestsi menetrendjt, s sor kerlt az els CSS3 ajnlsok elfogadsra.

A HTML5 szabvnyostsi folyamata a tervek szerint 2014 decemberben zrul le, s ez lesz a HTML, a vilghl alapnyelve. A CSS3 esetben modulokra bontott, folyamatos fejleszts zajlik.

A HTML5-ben az 5 nem csupn egy verziszm vltozs, hanem a webes jell-nyelv legjabb genercijrl van sz. Ugyanakkor visszafel kompatibilis a korbbi HTML/XHTML verzikkal, s kdolsa tekintetben nem revolci ( a mlttal val gykeres szakts ), hanem evolci ( fokozatos fejlds ). Ha valaki egy rgebbi HTML/XHTML ver-ziban kszlt weblapja kdjban csak a dokumentumtpus meghatrozst trja, mris HTML5-s weblapja van legfeljebb elavult elemeket is hasznl s nem l a szmos j szolgltats lehetsgvel. Az j szabvny teht nagyon tolerns s felhasznlbart, s mg a hibs kdok rtelmezsre is tmutatst ad a klnbz bngszknek.

j perspektvt nyitnak a CSS3 ltal lehetv tett megjelentsi megoldsok, melyek a kpszerkesztk s szkript-nyelvek egyes funkciit tvve egysgesebb szerkezet s gyor-sabban mkd weblapokat eredmnyeznek. Az elkvetkez vben vrhat a CSS3 egyes j moduljainak ( tbbhasbos elrendezs, transzformcik, animcik ) vglegezse.

A jelenleg zajl mlyrehat vltozsok kvetkeztben idszer a korbban megszerzett HTML/XHTML s CSS ismereteknek az j szabvny szerinti jrartelmezse s bvtse, ill. a most tanulst kezdknek mr az j alapokon val indulsa.

A HTML5 + CSS3 dnten a World Wide Web Consortium s a Wikipedia pub-likcii alapjn kszlt, clja egy olyan eszkz nyjtsa az rdekldk kezbe, melynek segt-sgvel programozsi ismeretek s elriaszt szakkifejezsek nlkl ( de mgis a HTML s

5

CSS aktulisan rtelmezett szablyos 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 keres-programok hatkonyan hasznlhatnak.

A webhelyeken felhasznlhat multimdia tartalmak ( kp, hang, animci, video ) lt-rehozsa a tma terjedelmnl s eltr jellegnl fogva nem kpezi az sszefoglal trgyt, az alkalmazsok sorn adottnak vesszk, hogy valamilyen formban mr rendelkezsre ll egy ilyen tartalom.

Ebben a mg viszonylag kplkeny, tmeneti idszakban ( a HTML5.0 ajnlsra je-llt, az egyes CSS3 modulok ajnls, ajnlsra jellt s munkaanyag stdiumban vannak ) egy rugalmasan reaglni kpes elektronikus sszefoglal/ismertet remlhetleg sikeresen szolglja az rdekldk ismeretszerzst.

Budapest, 2014. janur

6

1. ALAPOK

1.1. Tartalom s forma: HTML s CSS

A weboldalak strukturlt tartalma HTML jellnyelvben ( HTML = Hypertext Markup Language = hiperszveg jellnyelv ms fordtsban lernyelv ), a formzs s elrendezs CSS stlus(lap)nyelvben ( CSS = Cascading Style Sheets = klnfle magyar fordtsban lpcszetes vagy rangsorolt vagy egymsba gyazott vagy lpcszetesen egymsra pl vagy tbbszint stluslapok ) trtn kdolssal llthat el.

A HTML ( strukturlt tartalom ) s CSS ( formzs, elrendezs ) hasznlatval kt olyan - egymshoz jl illeszked s felhasznlbart - 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 pl. mdia-fgg - megjelents trsthat, kls stlusok alkalmazhatk, s hasznlatukkal ttekinthet kdols s gyorsabb weboldal-letlts rhet el.

A HTML jellnyelv s CSS stlus(lap)nyelv mindenki szmra ingyenesen elrhet s knnyen megtanulhat, tovbbfejlesztsket s szabvnyostsukat a World Wide Web Con-sortium ( rviden W3C ) nemzetkzi non-profit szervezet koordinlja.

Br sokan hasznlnak vizulis ( WYSIWYG = what you see is what you get, magyarra ALAKH-nek fordthat =Azt Ltod, Amit Kapsz, Hen ) weblapkszt programokat ( kiejtse vizivig ), melyek alig ignylik a kdolsban val jrtassgot, a szabvnykvet weboldal ptkockinak ismerete a megrts s tovbbfejlds szempontj-bl elengedhetetlen.

A webszerkeszt tanfolyamok ltalban az Adobe cg Creative Suite ( CS ) webes grafikus ( kereskedelmi ) programcsomagjait ( a Dreamweaver s a Fireworks/Photoshop/ Flash valamilyen kombincijt ) hasznljk.

Mind a HTML, mind a CSS kdols a minden opercis rendszerhez ingyenesen mel-lkelt egyszer szvegszerkeszt ( plain text editor ) programmal elllthat. Ezen kvl szmtalan ingyenes s kereskedelmi, klnbz funkcikat tmogat szerkesztprogram van forgalomban. A lnyeg azonban nem egy adott programnak, hanem a kt nyelv kreatv mdon val, nll hasznlatnak az elsajttsa.

A szabvnyos kdols alkalmazsnak ( az idtllsg, a jobb ttekinthetsg s kny-nyebb tovbbfejleszthetsg mellett ) az a clja, hogy egy adott weblapot minden bngsz lehetleg ugyanolyan mdon jelentsen meg. Miutn tendencijukban a bngszk a szab-vnyok felismersnek s azonos rtelmezsnek irnyba fejldnek, a szabvnykvet kdo-ls a leghatkonyabb mdja a tervez szndka szerinti, idtll s egysges megjelentsnek.

HTML-el s CSS-el alapveten statikus weblapok kszthetk, a dinamikus/interaktv weboldalak a statikus struktrba gyazott egyb elemekkel ( szkript-nyelvekkel ) valstha-tk meg.

A szkript-nyelvek trgyalsa meghaladja a HTML5 + CSS3 kereteit, azonban nhny j CSS3 tulajdonsggal kialakthatak mr egyes dinamikus jelleg hatsok is.

7

1.2. A weblapkszts hardver s szoftver ignye

A weblapkszts alapjainak megtanulshoz s statikus weblapok szerkesztshez nin-csen szksg specilis mszaki httrre vagy pnzgyi befektetsre, de mg lland internet-kapcsolatra sem. Egy egyszer editor-t mr eleve minden mikroszmtgphez adnak ( nem javasolt viszont a formzott - rich text - szveget elllt programok - pl. WordPad, Word, stb. - hasznlata a HTML/CSS kdolshoz ! ), s a legismertebb bngszk ingyenes letltse utn a tanuls s/vagy weblap-szerkeszts off-line zemben is trtnhet. A bngszk hasz-nlata nem ignyel jelents processzor-teljestmnyt vagy memriaignyt, letltsk egyen-knt 25-35 MB-ot vesz ignybe.

Hasznos lehet a Windows-os PC-k Notepad-je ( Jegyzettmb ) helyettestsre kifej-lesztett Notepad++ editor ( aktulis verzija 6.5 ), illetve a ksz weblap szerverre val fel-tltshez a Total Commander fjlkezel ( aktulis verzija 8.5 ) is, melyek ingyenesek s hatkonyak, s mindkett magyar nyelven is letlthet.

Egy weblap megjelentst bngsz hajtja vgre, mely egy adott opercis rendszerrel mkdik egytt. A jelenleg hasznlatos fbb opercis rendszer csaldok s fbb bngszik:

desktop/laptop ( x86 processzoros ) eszkzk Microsoft Windows

Megnevezs Forgalmazs kezdete Bngszi Forgalmazsuk

kezdete

XP ( experience ) 2001 oktber

Internet Explorer 6 2001 augusztus

Internet Explorer 7 2006 november

Safari for Windows 5.1 2011 jlius

Internet Explorer 8 2009 mrcius

Firefox, Chrome, Opera hat hetente frisslnek

Vista 2007 janur




7 2009 oktber



Internet Explorer 10 2013 februr

Internet Explorer 11 2013 november


8

8 2012 oktber Internet Explorer 10 2012 oktber


8.1 2013 oktber Internet Explorer 11 2013 oktber

Firefox, Chrome, Opera hathetente frisslnek

- az Internet Explorer 6 s Internet Explorer 7 hasznlata mr marginlisra cskkent - az Apple 2008-tl Safari for Windowst is forgalmazott, ennek fejlesztse az 5.1.7

verzival megsznt ( ez mg letlthet az Apple honlapjrl XP, Vista s Windows7-re, de hasznlata elenysz )

- a Windows-os felhasznlk tbbsge nem Internet Explorer-t, hanem Firefox for Windows-t, Chrome for Windows-t, Opera for Windows-t, ill. kis bngszk-et (Avant Browser, Comodo Dragon, K-Meleon, Lunascape, Maxthon, Rockmelt, SRWare Iron, stb.) hasznl

- sajtos megolds a Google Chrome Frame-je: amennyiben a Windows-os felhasz-nl letlti, az az Internet Explorer alatt fut, gy az IE-t hasznlva az j HTML5/ CSS3 funkcik s tulajdonsgok is rtelmezettek s megjelenthetk lesznek. 2014 elejtl felhagy a Google a fejlesztsvel, mivel gy vli, hogy a HTML5/CSS3-at nem tmogat Internet Explorer-ek arnya annyira visszaszorul, hogy nem rdemes kln termket fenntartani a kiegsztskre

Apple ( Mac ) OS X

Az X egyrszt arra utal, hogy ez az Apple tizedik opercis rendszer csaldja ( az X mint rmai 10-es ), msrszt a Unix-ra, melynek alapjra pl.

Verziszm Megnevezs Forgalmazs

kezdete Processzor Bngszje

10.0 Cheetah 2001. mrcius POWER PC IE for Mac

10.1 Puma 2001. szeptember POWER PC IE for Mac

10.2 Jaguar 2002. augusztus POWER PC IE for Mac, Safari 1.0

10.3 Panther 2003. oktber POWER PC IE for Mac, Safari 1.3

10.4 Tiger 2005. prilis POWER PC s Intel Safari 4.1

10.5 Leopard 2007. oktber POWER PC s Intel Safari 5.0

9

10.6 Snow Leopard 2009. augusztus Intel Safari 5.1

Chrome, Firefox, Opera

10.7 Lion 2011. jlius Intel Safari 6.1


10.8 Mountain Lion 2012. februr Intel Safari 6.1


10.9 Mavericks 2013. oktber Intel Safari 7.0


Az opercis rendszer els ngy verzija az Apple s az IBM ltal kzsen kifejlesztett POWER PC ( Performance Optimized With Enhanced RISC Performance Chip ) procesz-szorokon futott, kt verzi mindkt processzorra kszlt, majd teljesen ttrtek az Intel-re.

A 10.8-tl elmaradt a megnevezsbl a Mac sz, a verziszm mellett a ragadoz nagy-macskkat a 10.9-tl kaliforniai helysgnevek vltjk fel.

- A Microsoft IE 5.5-el megszntek az Internet Explorer Maces bngszverzii - A Safari a 6.0-tl kln nem tlthet le, csak az jabb opercis rendszerrel vagy software

update-knt adjk a Safari bngszket a Mac OS X rendszerekhez - A Mavericks a Safari 7.0-val elvileg a 10.6 Snow Leopard-ig visszamenen ingyenesen

letlthet - A Mac OS X-es felhasznlk szmottev rsze Chrome for Mac ( ill. kis rszben Firefox

for Mac s Opera for Mac ) bngszt hasznl. A Chrome 21-tl, a Firefox 17-tl mr csak a Mac OS X 10.6-al s az annl jabb opercis rendszerekkel hasznlhatk

Linux

A Chrome s Firefox a Windows-os s Mac-es kiadsokkal szinkronban Linux-os verzikkal is megjelenik, az Opera a 12.1-es kiadst kveten ( Presto-rl Blink-re vlts ) nem ksztett Linux-ra is bngszt.

a) mobil ( ARM processzoros ) eszkzk

Microsoft Windows RT

Tabletekre kszlt, az asztali Windows programokat nem futtat opercis rendszer, melynek jvjrl klnfle tallgatsok ltnak napvilgot. Jelenleg csak a Microsoft s a nemrg tulajdonba kerlt Nokia Mobile forgalmaz Windows RT-s tabletet, s az alkalmaz-sokkal val elltottsga is szerny.

10

Google Android

Verziszm Megnevezs Forgalmazs kezdete

Android 1.0 Apple pie 2008 oktber

Android 1.1 Banana bread 2009 februr

Android 1.5 Cupcake 2009 prilis

Android 1.6 Donut 2009 szeptember

Android 2.0 Eclair 2009 oktber

Android 2.1 Eclair 2010 janur

Android 2.2 Froyo 2010 mjus

Android 2.3 Gingerbread 2010 december

Android 3.0 Honeycomb 2011 februr

Android 3.1 Honeycomb 2011 mjus

Android 3.2 Honeycomb 2011 jlius

Android 4.0 Ice Cream Sandwich 2011 oktber

Android 4.1 Jelly Bean 2012 jnius

Android 4.2 Jelly Bean 2012 oktber

Android 4.3 Jelly Bean 2013 jlius

Android 4.4 KitKat 2013 oktber

Az Android-nak ( az opercis rendszernek megfelel verziszm, fokozatosan bvl HTML5/CSS3 funkcikkal rendelkez ) sajt bngszje van. A 4.0-tl hasznlhat az asztali verzikkal egytt 6 hetente frissl Chrome for Android bngsz. A Firefox for Android is az asztali bngszvel egytt frissl, viszont mr az Android 2.2 verzitl is hasznlhat.

Mivel az Android 2.1 s annl korbbi verzik mr eltntek, a 3.x pedig el sem terjedt, az Android-os tbor az opercis rendszer alapjn kettszakad 2.2/2.3 ( okostelefonos ) ill. 4.x ( okostelefonos s tabletes ) csoportra. Az elbbinek a Firefox for Android, az utbbinak a Chrome for Android s Firefox for Android rvn az j HTML5/CSS3 funkcikat kezel bngszkkal val folyamatos s visszamenleges elltottsga elvileg biztostott.

Az Android-hoz hasznlt tovbbi ismertebb bngszk az Opera Mini/Mobile, a Dolphin HD/Mini s a Boat.

11

Apple iOS

2007 jniusban az els iPhone-al jelent meg az 1.0 verzi ( melyet mg iPhone OS-nek hvtak ), 2008 jliusban a 2.0, 2009 jniusban a 3.0 verzit adtk ki. Az opercis rend-szer csak az Apple mobil eszkzein ( iPhone, iPod Touch, iPad ) hasznlhat, az egyes tpu-sokon alkalmazhat legfrissebb verzikat az albbi tblzat mutatja:

eszkzk a legjabb

hasznlhat iOS/SafariMobile

iOS/SafariMobile kiads dtuma

iPhone ( eredeti ), iPod Touch ( eredeti ) 3.1 2010 februr

iPhone 3G, iPod Touch 2 4.2 2010 november

iPod Touch 3, iPad ( eredeti ) 5.1 2012 mjus

iPhone 3GS, iPhone 4, iPhone 4S, iPhone 5, iPod Touch 4, iPad 2, iPad 3, iPad Mini 6.1 2013 janur

iPhone 4, iPhone 4S, iPhone 5, iPhone 5C, iPhone 5S, iPod Touch 5, iPad 2, iPad 3,

iPad 4, iPadAir, iPad Mini, iPad Mini2 7.0 2013 szeptember

A fenti opercis rendszerekhez hasonl verziszmmal csatlakoznak az alaprtelmezett SafariMobile ( iOS Safari ) bngszk. Az iOS tbor az iOS7/SafariMobile ingyenes s visszamenleges frisstssel ( opercis rendszer s bngsz alapjn ) viszonylag homogn maradhat.

A Safari Mobile alternatvjaknt hasznlhatk a Chrome for iOS, Atomic s Dolphin bngszk is.

Microsoft Windows Phone ( WP )

Verziszm Forgalmazs kezdete Bngsz

Windows Phone 7.0 2010 oktber Internet Explorer Mobile for WP ( IE 8 alapon )

Windows Phone 7.5 2011 oktber Internet Explorer Mobile for WP ( IE 9 alapon )

Windows Phone 7.8 2013 februr Internet Explorer Mobile for WP ( IE 9 alapon )

Windows Phone 8 2012 oktber Internet Explorer Mobile for WP ( IE 10 alapon )

Az opercis rendszer alapjn az okostelefonos Windows-tbor is kettszakad 7.x s 8.x-re ( a 7.x nem frissthet tovbb 8.x-re.

12

BlackBerry OS A RIM ( Research in Motion ) 1999-ben pager/e-mail klienshez dobta piacra a Black-

berry OS els verzijt, mely a 3.x-tl ( 2002 ) hasznlhat okostelefonhoz. A 4.0 ( 2003 jnius ), 5.0 ( 2008 augusztus ) s 6.0 ( 2010 augusztus ) verzik mr nem frissthetk. A 2011 augusztusi 7.0 ( ill. a 2012 januri 7.1 upgrade-je ) s a 2013-as Blackberry OS 10 az l opercis rendszerek, melyek sajt bngszvel rendelkeznek. 2013-tl a cg is a Blackberry nevet vette fel a RIM helyett.

Mozilla Firefox OS ( FFOS, FxOS, B2G ) 2011 nyarn jelentette be a Mozilla, hogy ( B2G = Boot to Gecko ) nven nylt forrs-

kd, ARM processzorokon fut, webes technolgikon ( HTML5, CSS s JavaScript ) alapul opercis rendszert fejleszt. 2013 februrjban mutattk be a barcelonai Mobile World Expo-n immr Firefox OS nven, kereskedelmi forgalomba pedig 2013. jlius 1-tl kerltek az 1.0 verzit futtat, belp szint okostelefonok. A tervek szerint 6 hetente jnnek a hibajavtsok s 3 havonta az j opercis rendszer verzik ( az 1.1. sszel csakugyan megrkezett ). 2013 vgig 4 szolgltat 14 orszgban vezette be, a tmeges elterjedst fleg a fejld orszgok als rkategrijban vrjk 2014-15 folyamn, immron a tablet-es piacon is - alkalmazsai a tbbi mobilos platformon is futtathatk.

Piacrl kivonul mobil opercis rendszerek A Microsoft Windows Mobile opercis rendszere piacvezetnek indult 2003-ban

okostelefonra s zseb-PC-khez, 2007-ben volt a cscson 42%-os piaci rszesedssel - a Nokia s Apple kivtelvel valamennyi jelents gyrt forgalmazta - de 2010-re az Android s iOS dominancia kvetkeztben 5% krlire esett a rszesedse, a gyrtk szintn a Nokia s Apple kivtelvel - Androidra vltottak. Az opercis rendszer csald tagjai: Windows Mobile 2003 ( 2003 ), Windows Mobile 2003 SE ( Second Edition ) ( 2004 ), Windows Mobile 5.0 ( 2005 ), Windows Mobile 6.0 ( 2007 ), Windows Mobile 6.1 ( 2008 ), Windows Mobile 6.5 ( 2009 ). 2010-tl az j alapokra plt, vele nem kompatibilis Windows Phone mobil opercis rendszer csald vltotta fel a Windows Mobile 6.x-eket.

A WebOSt eredetileg a Palm fejlesztette ki 2009-ben Palm WebOS nven okos-telefonokra s tabletekre. Felvsrolta a Hewlett-Packard, majd 2012 elejn, miutn megszn-tette a mobil eszkzeinek gyrtst, a 3.0 verziig jutott opercis rendszert Open WebOS nv alatt nylt forrskdv tette. Jelenleg csak az LG hasznlja az okos tv-kszlkeiben.

A Symbian-t a 80-as vek vgtl a Psion kezdte fejleszteni EPOC nven kzi szmt-gpekhez az 5-s verziig jutva el vele. 1998-ban a Nokia-val, Motorola-val s Ericsson-nal ltrehoztk a Symbian Software konzorciumot, melyhez egy vvel ksbb a Panasonic, Siemens s Sony-Ericsson is csatlakozott. Az els okostelefon a 6-os verzival immr Symbian OS-knt - 2000-ben ( Ericsson ), ill. 2001-ben ( Nokia ) debtlt. A Nokia telefon-jaival elszr piacvezetv vlt, majd 2010-tl a konkurensekkel szemben versenyhtrnyba kerlt. 2011-tl az Accenture-hz szerveztk ki az immr nylt forrsv tett opercis rend-szer (2016-ig trtn) tmogatst, a Symbian-os okostelefonok gyrtst pedig 2012 vgvel beszntettk.

A bngszk frisstse A Chrome, Firefox s Opera asztali s mobil verziit egyarnt 6 hetente adja ki. A Firefox gynevezett ESR ( Extended Support Release = kiterjesztett tmogats kiads ) verzival is rendelkezik azok szmra, akik nem kvnjk kvetni a gyakori frisstst ezt 54 htig automatikusan elltjk biztonsgi frisstsekkel, az idkzben bevezetett j funkcikkal viszont nem. A jelenlegi utols ESR kiads a 2013. szi Firefox 24 ESR volt. A Safari s az

13

Internet Explorer j asztali s mobil verzii az opercis rendszerek frisstsvel egytt ( kb. egy msfl venknt ) jelennek meg ( ez jelents vltozs az IE korbbi sokves ciklushoz kpest ).

A weblap szerkesztsnl figyelembe veend tendencik

Az ARM processzoros okostelefonok s tabletek rtkestse 2010 vgn meghaladta a

x86 processzoros asztali/hordozhat gpekt. Az ARM mobil platformok terjedse a belthat jvben tovbbra is exponencilisan nni fog, mg a x86-os desktop/laptop-ok termk- letciklusuk rett szakaszba rtek.

A fenti rtkestsi tendencik kvetkeztben az ARM mobil platformos kszlkek

llomnya 2013 kzepn meghaladhatta a desktop/laptop-okt.

14

A mobil eszkzllomny nvekedse fzisksssel br de maga utn vonja az internetes adatforgalom egyre nvekv rsznek mobil platformokra trtn thelyezdst:

Magyarorszgon 2013 vgn a magyar weblapok letltsnek kb. 10%-a trtnik mobil

kszlkrl.

A mikroszmtgp rendszerek hskorszakbeli soksznsge a 90-es elejre meg-sznt, a x86 processzorokon fut Windows-ok, majd a 2000-es vek kezdettl az Internet Explorer-ek rszesedse vekig a 95%-ot is meghaladta. A mobil eszkzk terjedsvel ismt soksznv vlik, megn az internethez kapcsold rendszerek szma:

Az elbbiekben felsoroltak mellett szmos j platform is teret nyerhet ( mobil Ubuntu Linux, Tizen, Sailfish opercis rendszerek ). Ezrt klnsen fontos lehet a HTML5 mint platform-fggetlen alkalmazs elterjedse.

15

1.3. Statikus webhelyek kialaktsnak szoksos mdja

A szmtgpben egy kln ( al-mappkat nem tartalmaz ) mappban clszer a web-oldalak valamennyi alkotelemnek ( a tartalmat hordoz HTML oldalaknak, a formzst ad CSS stluslap(ok)nak, a felhasznland multimdis elemeknek ) a gyjtse.

A gyjtmappa ( site root ) 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.

Megjegyzs: Nhny rgi szerkesztprogram .html helyett mg .htm kiterjesztst hasznl. Ez ugyanolyan j, de akkor kvetkezetesen mindenhol .htm-et kell alkalmazni.

A weblapkszts ill. annak tanulsa kt ton trtnhet:

- vagy elszr a HTML kdols ( a strukturlt tartalom ) ellltsa, ill. annak megtanu-lsa, aztn a ksz tartalom CSS formzsa, ill. a CSS megtanulsa

- vagy a strukturlt 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 - egy-egy zrt szablyrendszerben mozogva - knnyebb kiigazodni s elrehaladni. Ugyan-akkor 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 vonat-koz CSS fejezetekre - gy mindenki maga dntheti el, hogy melyik mdszert tallja clra-vezetbbnek, 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.

Megjegyzs: A bngszk frissl verzii folyamatosan vezetik be az j HTML5/CSS3 funkcik rtelmezst. Az elkszlt honlapot a fbb bngszkkel ( Chrome, Firefox, Internet Explorer, Safari, Opera ) ellenrizni kell, hogy nincs-e mg olyan eltrs valamelyik funkci rtelmezsben, ami valamelyikk esetben problmt okozna a megjelentsben.

A knny megjegyezhetsg rdekben a trgyaland kdolsok a Chrome 30 s Firefox 25, ill. az elkvetkez idszakban hasznlatos Internet Explorer 11 s Safari 6.1 s 7 verzik figyelembevtelvel trtnnek. A Safari 6.1-7-el csak az 5 vnl nem idsebb Apple gppel rendelkezk tudjk a lertak szerint elkszlt honlapot ellenrizni, de a trgyalt tmk esetben az ltalban j egyezst mutat a Chrome 30-al. Az IE 11 csak Windows 7 s 8.1-hez kszlt, az Opera 15 a Chrome 28-al mutat j egyezst, s szinkronban frisslnek, teht az Opera 17 a trgyalt tmk esetben - a Chrome 30-al azonos megjelentst kell hogy biztostson, gy els megkzeltsben kln hasznlata elhagyhat.

16

2. HTML5

2.1. A HTML nyelvtana

2.1.1. Cmkk s elemek

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 v-tizedes XHTML-es hagyomny, rszben a kisbet-nagybet keveredsbl szrmaz hiba-forrsok 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 zr-cmkeknt , 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 stb.

Pratlanul csak nhny cmke szerepelhet, ezek hasznlatakor a kdolt HTML tartalom:

tartalom egy rsze tartalom msik rsze

tartalom tovbbi rsze .stb.

A pros cmkk kezd- s zrcmki ltal bezrt tartalmi rszek az elemek. A fenti smbl teht egy elem a

tartalom egy rsze , egy msik elem a

tartalom msik rsze tartalom tovbbi rsze .

A pratlan cmkk res elemet alkotnak, teht res elem pl. a

s a A fentiekbl ltszik, hogy a cmkk ( elemek ) egymsba is gyazhatk, azaz a pros

cmkk kzrefoghatnak pratlan cmkket ( res elemeket ) vagy tovbbi pros cmke-prokat ( ms elemeket ).

A kdols ttekinthetsgt javtja, ha az egyes elemeket j sorokban kezdjk ( ez a tartalom strukturlsa szempontjbl azonos a folyamatosan rt kddal ):

tartalom egy rsze tartalom msik rsze tartalom tovbbi rsze .stb.

17

2.1.2. Jellemzk s rtkek

Egy elemnek lehet jellemzje ( attribute = attributum, jellegzetes tulajdonsg ) s a legtbb jellemznek van rtke ( value = rtk ) - ezek az adott elemhez valamilyen jrulkos informcit adnak meg. A jellemz ( tulajdonsg-nak is fordtjk magyarra, de miutn a CSS-nl is lesz tulajdonsg, s ott ms angol szt hasznlnak erre, rdemes a magyarban is klnbsget tenni ) a kezd cmkbe, a 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. Az rtk nlkl is megadhat nhny jellemzre ekkor csak egyszeren deklarlunk valamit - kln felhvjuk majd a figyelmet.

A HTML-ben kdolt tartalom teht jellemzkkel s rtkekkel is rendelkez HTML-cmkkkel gy nz ki:

tartalom egy rsze megint tartalmi rsz stb.

Egy elemhez tbb jellemz is definilhat, a jellemzk megadsi sorrendje kzmbs, s res betkz vlasztja el ilyenkor egymstl a jellemz-rtk prokat. Pldul:

tartalom egy rsze stb.

Pratlan cmkkhez ( res elemekhez ) hasonl mdon megadhat egy vagy tbb jel-lemz:

stb.

A jellemzk s rtkek csak az adott konkrt elemre vonatkoznak, s pros cmke ese-tn a zrcmkvel, ill. pratlan cmke esetn a zr cscsos zrjellel rvnyket vesztik.

2.1.3. Strukturlt tartalom

Egy weboldal strukturlt tartalmnak HTML-kdolssal trtn ltrehozsa a HTML-cmkknek s esetleges jellemziknek/rtkeiknek a tartalomba val behelyezsbl ll. Ezt az elemi kockkbl felptett logikai szerkezetet ( strukturlt tartalmat ) a HTML-cmkk alapjn a bngszk rtelmezik s megjelentik.

Az egyes ( pros s/vagy pratlan ) cmkk jellegkbl addan - sorban egyms mel-l ( inline ) vagy blokkszeren egyms al ( block ) helyezik el az ltaluk ltrehozott eleme-ket. A megjelentssel kapcsolatos minden tovbbi feladatot a CSS stlus(lap)nyelv lt el.

2.2. A weboldal szerkezete

Minden weboldal 3 f rszbl ll:

a) dokumentumtpus meghatrozs b) fej c) trzs

18

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 meg-adva a dokumentumtpus, akkor a bngsz trkkz zemmdba ( quirks mode ) vlthat, s magtl prblhatja rtelmezni a kdolst ez termszetesen magban hordozza a hibs meg-jelents 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 web-oldal.

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 meta-adatok 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 visszatrnk, itt elegend csak a karakterkszlet, a weblap cme s a CSS stlus megadsnak ismertetse.

A fej HTML kdolsa: ( fontos a meta-adatok sorrendjnek betartsa ! )

karakterkszlet megadsa

weblap cme kls stluslap csatolsa

begyazott stlus megadsa

b/1) A karakterkszlet megadsa: vagy meta a cmke, charset ( charset = character set = karakterkszlet ) a jellemz, utf-8 vagy iso-8859-2 az rtk. A meta-nak nincsen zrcmkje, egyedl hasznland ( pratlan cmke ).

19

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 2012. janurban elfogadott 6.1 de a verzi-szmot nem kell definilni a charset-ben). Az UTF-8 a Universal Character Set Transforma-tion Format ( Univerzlis Karakterkszlet talaktsi Formtum ) 8-bites vltozata.

Megjegyzs: A Windows XP eltti opercis rendszerek nem ismerik az UTF-8-at, s tbb webszerkeszt program is az ISO-8859 szerinti karakterkdolst ajnlja fel alap-rtelmezettknt. 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. ). Az 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 br-zolsa megegyezik ). A HTML5 ajnlstervezet minden nyelven az UTF-8 alkalmazst javasolja.

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 specilis 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 ( pl. dvzljk szmtgpnk kpernyjn!, stb. ).

Az angol nyelvben a The quick brown fox jumps over the lazy dog ( A gyors barna rka tugorja a lusta kutyt ) az sszes angol bett tartalmaz szoksos ellenrz szveg.

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 s a Kedvencek/Knyvjelzk menjben jelenik meg.

b/3) Kls CSS stluslap(ok) csatolsa:

A link ( kapocs ) a cmke, rel ( relation = viszony ) s href ( hypertext reference =hiper-szveges hivatkozs ) a jellemzk, stylesheet ( stluslap ) s a .css kiterjeszts CSS fjl neve az rtkek. A link-nek nincsen zrcmkje, egyedl hasznland ( pratlan cmke ).

A rel jellemz jelzi a bngsznek, hogy a hivatkozott ( CSS ) dokumentum milyen viszonyban van a hivatkoz ( HTML ) dokumentummal. ( A megadott rtk szerint stluslap viszonyban van vele. )

20

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 nv szabadon vlaszthat, de clszeren utaljon a tartalmra, kisbets, kezetek s szkz nlkli legyen. A kiterjeszts ktelezen .css.

b/4) Bels vagy begyazott CSS stlus megadsa:

A szoksos eljrs az, hogy egy webhelyen bell az sszes HTML oldalhoz kls stlus-lapo(ka)t kapcsolunk ( lsd b/3 ). Egyoldalas vagy klnll weboldal esetn, ill. ha egy web-hely egy adott 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 cmkvel teht egy nem-HTML kdols gyazdik be egy HTML oldalba.

Megjegyzs: 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 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 vonat-kozik. 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

21

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 nincsen a kdols szempontjbl jelentsge, mi ugyan-csak 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:

dokumentumtpus definci pratlan cmke (valjban nem cmke, hanem deklarci ) HTML dokumentumot definil pros cmke a dokumentumra vonatkoz informcikat definil pros cmke a dokumentum trzst definilja pros cmke a dokumentum cmt definilja pros cmke a dokumentum s egy kls forrs kztti kapcsolatot definil pratlan cmke a dokumentumra vonatkoz meta-adatokat definil pratlan cmke bels vagy begyazott stlus defincit hoz ltre pros cmke

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-stlus-lap fjlnvvel. A tanknyvekben szoksosan alkalmazott kezd cm pl. Az els weblapom, a stluslapnv pl. display.css, a bels stlus pedig egyelre 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 ellen-rzsre is hasznlhat. )

A HTML dokumentumnak ekkor gy kell kinznie:

Az els weblapom


22

( A stlusra mg nincsen semmi megadva, a HTML-gyakorls kzben azonban gy is rdemes berni a CSS-re utal cmkket. )

A HTML-lapot egy erre a clra ltrehozott gyjtmappba kell menteni. Minden tovb-bi vltoztatst elszr szintn menteni ( CTR+S vagy Fjl/Ments ) kell, mieltt megnz-zk az F5-el frisstett eredmnyt, melyet a fbb bngszk mindegyikvel rdemes ellen-rizni.

Figyelem! Ha az editor a mentst .txt kiterjesztssel vgzi el, a kiterjesztseket .html-re ill. .css-re kell cserlni.

A fenti ( nagyon egyszer, de mr ) mkdkpes weboldalt gy mutatjk a bngszk:

Lthat, hogy a HTML-kdols fej rszben megadott informcibl csak a cmet mu-tatja ( a cmsorban ) a bngsz, a trzsben ltrehozott tartalom az, amit weboldalknt meg-jelent.

Ha a karakterkszlet hibsan van megadva, a weblapon a fenti kdols pl. gy jelenhet meg:

A lang=hu jellemz/rtk elhagysa - vagy ms fnyelv definilsa ( pl. sk = szlo-vk, cz = cseh, stb. ) nem befolysolja a megjelentst, csak a keresprogramok keressi hatsfokt ronthatja.

23

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 bng-szvel 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 ) pratlan cmke ( res elem ) definilja. Az elz szvegnkbe berva a sortrs cmkjt:

Hell vilg!Legyen szp napod!

Termszetesen ez ekvivalens mdon gy is megadhat:


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 m-don 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 cmsorok pros cmki 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.

Figyelem! A h1.h6 cmsorok nem keverendk ssze a title cmmel, mely a weboldal elnevezst adja meg.

Ha a mr meglv szvegnket ktszint cmsorknt ( fcm, alcm ) hasznljuk, s a tovbbi cmsor-hierarchia bemutatsra tovbbi alcmekknt mg hozzrunk valamit, akkor a kdols:

24

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.

A bngszkkel az alaprtelmezett megjelents:

Megjegyzs: A cmsorokat mindig a tartalmi fontossguk szerint, s soha nem a meg-jelens alapjn kell kdolni. Brmelyik cmsorbl CSS-el a fentitl eltr, tetszleges meg-jelents hozhat ltre.

A CSS rsz Bettpusok, Sznek definilsa, Blokkszint elemek elhelyezse I. s Szveg fejezetekben foglaltakkal formzhatk a cmsorok.

2.4.3. A bekezds pros cmkje a . ( p=paragraph=bekezds ). A korb-ban hasznlt szvegbl ksztve kt bekezdst:

Hell vilg! Legyen szp napod! Mg hozzrtunk valamit. s mg valamit. Hell vilg!Legyen szp napod!

A bngszk a bekezdseket is blokkszint elemknt kezelik, azaz kln sorban kez-ddnek 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.

A bngszk alaprtelmezetten gy jelentik meg a bekezdseket:

25

Figyelem! A msodik bekezdsbl az is ltszik, hogy a HTML cmkk egymsba is gyazhatk, lsd a .... kdolst. Jelen esetben pratlan cmke ( ) kerlt a p elembe, 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).

Megjegyzs: 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 fokoz-hat, melynek kdja ( hr=horizontal line =vzszintes vonal ). A blokkszint res elem.

A korbbi 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:

26

2.4.5. A kdols sorn tehetnk magunknak olyan megjegyzseket/emlkeztetket, melyek 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 bngszk ezt gy mutatjk:

A felhasznlt alapvet HTML-cmkk:

Cmke: Funkcija:

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

27

2.5. Listk

A listk nem sortrsekkel, cmekkel vagy bekezdsekkel, hanem sajt HTML cm-kkkel 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 ren-dezett, 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 is rendelhetk. A szmozatlan lista kezd- s zrcmkje ( unordered list=nem rendezett lista ), az egyes listaelemeket a szmozottal meg-egyez 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 kenyr tej tej vaj vaj

A kt lista kdolst helytakarkossg miatt helyeztk egyms mell, a weblapon egy-mst kveten kell bekdolni ket ( a bngszk balrl jobbra, fentrl lefel haladva olvassk mindig a kdolst, a fenti forma rtelmetlen lenne szmukra ) !

A bngsz alaprtelmezs szerint gy jelenti meg a szmozott ( rendezett ) s szmo-zatlan ( felsorolsi ) listkat:

28

Listk egymsba is gyazhatk, pl. az egyes listaelemekbe jabb al-listk helyezhetk. Az gy kapott, tbbszintnek is nevezett listk kivlan alkalmasak ttekintheten tagolt tar-talmak, pl. tartalomjegyzkek, munkatervek, vzlatok, stb. ltrehozsra.

Szmozott s szmozatlan listk is egymsba foglalhatk ( lsd a szmozatlan listban a szmozott vajas listt ):

kenyr kenyr

fehr kenyr fehr kenyr barna kenyr barna kenyr

tej tej

zsros tej zsros tej zsrszegny tej zsrszegny tej

vaj vaj

szott vaj szott vaj nem szott vaj nem szott vaj margarin margarin

Ismt helytakarkossg miatt vannak egyms mellett a listk kdjai !

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

Figyelem! A HTML cmkk korbban emltett egymsba gyazsnak krdse itt mr jl megfigyelhet - a begyazott elemeket mindig be kell zrni a begyaz elem zrsa eltt!

29

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 meg-emltsre, mert a listk kdolsnl fordul el az egyik ilyen kivtel szndkosan nem is pontostjuk, hogy az mire vonatkozik. )

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 cm-kjnek 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 szve-get, majd a szmozott lista folytatsnak szmozst nem ismt 1-tl, hanem folytatlagosan kvnjuk megadni.

30

Ha az els szmozott lelmiszeres listnk elejn a kenyr helyre kt j ttel ( hs, fel-vgott ) majd egy magyarz szveg kerl, a folytatott listt 3-rl indul szmozssal kdol-va:

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

A bngszkben val megjelents:

b) Az alaprtelmezetten 1. 2. 3. al halad nvekv szmozst a listaelemek kezd cm-

kihez rendelt value ( rtk ) jellemzvel s a kvnt rtkkel lehet ms sorszmozsra mdo-stani. Ennek akkor van pldul jelentsge, ha egy szmozott listbl kiragadunk lista-elemeket, de mgis meg akarjuk rizni az eredeti szmozst.

Maradva a szmozott lelmiszeres listnknl, de 2. 4. s 6.-ra mdostva a szmozst:

kenyr tej vaj

A bngszkben a megjelents:

31

c) Az alaprtelmezetten nvekv szmozst a szmozott lista kezd cmkjhez meg-adott reversed ( fordtott ) jellemzvel lehet visszafel szmozsra mdostani. ( Slgerlist-kat, versenyek helyezettjeit, stb. gyakran visszafel sorszmozva adjk meg. )

Az elemet a start jellemzvel is bvtve tetszleges ltalunk vlasztott kezdrtkrl indthat a visszafel szmozs.

Az lelmiszeres listnk pl. 5-tl visszafel szmozva: kenyr tej vaj

Figyelem! Az Internet Explorer-ek nem rtelmezi a visszafel szmozst ( 5.-tl felfel nvekv szmozst mutat ).

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:

az jszvetsg evanglisti Jnos Jnos Lukcs Lukcs Mt Mt Mrk Mrk az jszvetsg evanglisti

( Csak a jobb helykihasznls miatt vannak egyms mellett ! )

32

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.

A listk alaprtelmezettl eltr formzsa belertve a vzszintes kialaktst is - CSS-el trtnik. Lsd a CSS rsz Listk formzsa s a Blokkszint elemek elhelyezse I.-II. fejezeteket.

Valamennyi lista blokkszint elem, azaz kln sorban kezddik, s az utna kvetkez elem automatikusan j sorba kerl.

A listknl felhasznlt HTML cmkk:

Cmke: Funkcija:

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

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,

33

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

34

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 bngszk alap-rtelmezetten fell jelenti meg - majd soronknt kvetkeznek a fejlcek s az adatok. Szab-lyos alak a tblzat, nincsenek res s/vagy sszevonand cellk.

Bngszk statisztikja 2013. szeptember - december hnap szeptember oktber november december Chrome 28-32 33,85% 35,41% 35,91% 36,53% Firefox 23-27 34,47% 34,60% 34,53% 34,72% Internet Explorer 9-118,19%7,95%7,68% 7,57% Internet Explorer 6-85,04%4,38%4,31% 3,78% Firefox 22 s a rgebbiek4,26%3,44% 3,06% 2,88% Opera 12.1 s a rgebbiek1,75%1,63%1,50% 1,46% Chrome 27 s a rgebbiek1,44%1,36%1,23% 1,21% Opera 15-200,46%0,59%0,72% 0,87% Safari-k0,91%0,91% 0,87%0,85% mobil bngszk 9,63% 9,73% 10,19% 10,13%

35

Alaprtelmezetten a tblzat keret nlkl, a cellatartalomnak megfelel oszlopszles-sggel s sormagassggal jelenik meg, a fejlcek ( th elemek ) kzpre igaztva flkvren, az adatok ( td elemek ) balra zrva norml bettpussal formzottak:

Egy-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 cellaegyests ( spanning = tvels ).

Az oszloptfogs bemutatsra a 2013. szeptember - decemberi statisztikjt gy adjuk meg, hogy egy res cellval kezdd j sort is adunk a tblzathoz, melyben a kthavonknti idintervallumot fel tudjuk tntetni, gy a kt j szveges cella oszloptfogsval az albbi tblzat addik:

Bngszk statisztikja 2013. szeptember - december szeptember s oktber november s december

hnap szeptember oktber november december Chrome 28-32 33,85% 35,41% 35,91% 36,53% Firefox 23-27 34,47% 34,60% 34,53% 34,72%

Internet Explorer 9-11 8,19% 7,95% 7,68% 7,57%


Firefox 22 s a rgebbiek 4,26% 3,44% 3,06% 2,88%

Opera 12.1 s a rgebbiek 1,75% 1,63% 1,50% 1,46%

Chrome 27 s a rgebbiek 1,44% 1,36% 1,23% 1,21%

Opera 15-20 0,46% 0,59% 0,72% 0,87% Safari-k 0,91% 0,91% 0,87% 0,85%

mobil bngszk 9,63% 9,73% 10,19% 10,13%

36

Az oszloptfogsokat s az res cellt is tartalmaz tblzat kdolsa: Bngszk statisztikja 2013. szeptember - december szeptember s oktbernovember s december hnap szeptember oktber november december Chrome 28-32 33,85% 35,41% 35,91% 36,53% Firefox 23-27 34,47% 34,60% 34,53% 34,72% Internet Explorer 9-118,19%7,95%7,68% 7,57% Internet Explorer 6-85,04%4,38%4,31% 3,78% Firefox 22 s a rgebbiek4,26%3,44% 3,06% 2,88% Opera 12.1 s a rgebbiek1,75%1,63%1,50% 1,46% Chrome 27 s a rgebbiek1,44%1,36%1,23% 1,21% Opera 15-200,46%0,59%0,72% 0,87% Safari-k0,91%0,91% 0,87%0,85% mobil bngszk 9,63% 9,73% 10,19% 10,13%

37

Az alaprtelmezett megjelents:

A sortfogs bemutatsval folytatva a kdolst, a fenti tblzat msodik s harmadik sornak egyestett kezd celljba berjuk az idintervallum szt:

Bngszk statisztikja 2013. szeptember - december

idintervallum szeptember s oktber november s december szeptember oktber november december Chrome 28-32 33,85% 35,41% 35,91% 36,53% Firefox 23-27 34,47% 34,60% 34,53% 34,72%



Firefox 22 s a rgebbiek 4,26% 3,44% 3,06% 2,88%

Opera 12.1 s a rgebbiek 1,75% 1,63% 1,50% 1,46%

Chrome 27 s a rgebbiek 1,44% 1,36% 1,23% 1,21%

Opera 15-20 0,46% 0,59% 0,72% 0,87% Safari-k 0,91% 0,91% 0,87% 0,85% mobil

bngszk 9,63% 9,73% 10,19% 10,13%

A mdostott tblzat kdolsakor a msodik s harmadik sor kezd cellit ( res ill. hnap ) ki kellett hagyni, hiszen ezek helyt foglalja el a sortfogsos ( idintervallum ) cella:

38

Bngszk statisztikja 2013. szeptember - december idintervallumszeptember s oktber november s december szeptember oktber novemberdecember Chrome 28-32 33,85% 35,41% 35,91% 36,53% Firefox 23-27 34,47% 34,60% 34,53% 34,72% Internet Explorer 9-118,19%7,95%7,68% 7,57% Internet Explorer 6-85,04%4,38%4,31% 3,78% Firefox 22 s a rgebbiek4,26%3,44% 3,06% 2,88% Opera 12.1 s a rgebbiek1,75%1,63%1,50% 1,46% Chrome 27 s a rgebbiek1,44%1,36%1,23% 1,21% Opera 15-200,46%0,59%0,72% 0,87% Safari-k0,91%0,91% 0,87%0,85% mobil bngszk 9,63% 9,73% 10,19% 10,13%

39

A fenti kdols alaprtelmezett megjelentse:

Megjegyzs: A sor- s oszlopsszevons termszetesen a ... fejlcekkel analg mdon brmelyik ... adatcellval is kdolhat. Adatcellk oszlop-sszevonsnl az alaprtelmezetten balra zrt megjelents miatt gyelni kell arra, hogy ha nem egyrtelm az adat hovatartozsa, akkor CSS-el kzpre kell azt pozcionlni.

Egy tblzat cellinak tartalma lehet jabb tblzat vagy lista is. Megjegyzend azonban, hogy a tblzatok tbbszrs egymsba gyazsa az ttekinthetsg rovsra megy s lasstja a letltdst s megjelentst, teht a gyakorlatban korltozottan clszer a hasz-nlata.

A tblzatba val jabb tblzat s lista begyazsra pldaknt a korbbi statisztika decemberi adatainak tovbbi rszletezst hasznljuk fel. Az Internet Explorer 6-8 szmozott, az Internet Explorer 9-11 szmozatlan lista, a Safari-k tblzat formjban kerlnek bekdolsra a mr meglv tblzatba. Az adatok az albbiak:

IE 6: 0,03% Safari 5.0 s rgebbiek: 0,11% IE 7: 0,14% Safari 5.1: 0,16% IE 8: 3,61% Safari 6.0: 0,09% IE 9: 1,83% Safari 6.1: 0,15% IE 10: 2,05% Safari 7.0: 0,31% IE 11: 3,69%

A begyazand IE 6-8 lista: A begyazand IE 9-11 lista:

IE 6: 0,03% IE 9: 1,83% IE 7: 0,14% IE 10: 2,05% IE 8: 3,61% IE 11: 3,69%

40

A begyazand Safari tblzat:

Safari 5.0 s rgebbiek0,11%

Safari 5.10,16%

Safari 6.00,09%

Safari 6.10,15%

Safari 7.00,31%

Nem maradt ms htra, mint a begyazand listk s a tblzat kdjainak bersa a mr meglv, eredeti tblzatkd vonatkoz adatcelliba: Bngszk statisztikja 2013. szeptember - december szeptember oktbernovember december Chrome 28-32 33,85% 35,41% 35,91% 36,53% Firefox 23-27 34,47% 34,60% 34,53% 34,72% Internet Explorer 9-118,19%7,95%7,68%

IE 9: 1,83% IE 10: 2,05% IE 11: 3,69%

Internet Explorer 6-85,04%4,38%4,31%

IE 6: 0,03% IE 7: 0,14% IE 8: 3,61%

41

Firefox 22 s a rgebbiek4,26%3,44% 3,06% 2,88% Opera 12.1 s a rgebbiek1,75%1,63%1,50% 1,46% Chrome 27 s a rgebbiek1,44%1,36%1,23% 1,21% Opera 15-200,46%0,59%0,72% 0,87% Safari-k0,91%0,91% 0,87%

Safari 5.0 s rgebbiek0,11%

Safari 5.10,16%

Safari 6.00,09%

Safari 6.10,15%

Safari 7.00,31%

mobil bngszk 9,63% 9,73% 10,19% 10,13%

Folyamatosan tblzatsorokba tmrtve jval rvidebbnek tnne a kdols, de az ttekinthetsg kedvrt maradt a tagolt felpts.

Mint az albbi kpen ismt lthat, alaprtelmezetten a fejlcek s adatcellk tartalmnak megfelel oszlopszlessgeket s sormagassgokat alaktanak ki a bngszk, az adatokat balra igaztjk norml karakterekkel, a fejlceket pedig kzpre igaztjk flkvr karakterekkel. Begyazott tblzatok/listk esetben gy elg vegyes kp alakul ki ( hiszen a begyazott tblzat fejlce a befogad tblzat adata, az egyszer adat s a lista/tblzat a balra igazts ellenre sem kerl felttlenl egyms al az egyes oszlopokban, stb. ), ezrt az

42

ilyen sszetett tblzat jrulkos CSS formzsa az ttekinthetsg rdekben szinte mindig szksges. Az alaprtelmezett megjelents:

Megjegyzs: Mieltt folytatnnk a tblzatok kdolsnak bemutatst, rdemes ele-mezni a fenti tblzat tartalmt:

Az Internet Explorer 6/7/8 kpezik a HTML5/CSS3 jdonsgok hasznlatra kln programozsi eljrsok nlkl alkalmatlan, kb. 4 %-os forgalmi rszarnyt. Az IE6 s IE7 emltstl elhanyagolhat hasznlatuk miatt - a tovbbiakban eltekintnk, az IE8-al kapcsolatos problmkat az egyes trgyalt fejezeteknl emltjk meg. 2014 prilisa (Windows XP tmogatsnak megsznse) utn vrhatan az IE 8 hasznlata is marginalizldik.

A bngszk egyre jabb verzii folyamatosan bvtik az j HTML s CSS funkcik rtelmezsnek krt, ugyanakkor teljeskren egyikk sem tmogat minden jdonsgot. A hossz letciklus bngszk ( Internet Explorer, Safari ) kzl az IE 11 s Safari 6.1-7 verzik az j funkcik nagy tbbsgt rtelmezik s alkalmazzk, a lersaink ezekre vonatkoznak. A 6 hetente frisstett bngszk ( Chrome, Firefox, Opera ) rtelemszeren gyorsabban ptik be az jdonsgokat, az egymst kvet verzik kztt a trgyalt tmk vonatkozsban nincsen ugrsszer vltozs. A mobil bngszk alapveten HTML5-bartok, s az asztali bngszverzikkal egytt frisslnek.

Fentiek alapjn a lersainkat jelenleg a magyar webforgalom 86%-a teljes mrtkben, tovbbi 10%-a egyes (fleg j CSS3) funkcik kivtelvel alkalmazhatja, 4% pedig az jdon-sgokat egyltaln nem rtelmezi. 2014 vgre ( a HTML5 szabvny vgleges elfogadsnak tervezett idejre a lers remlhetleg a forgalom 95%-ra teljesen alkalmazhatv vlik.

43

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 megismtelhet, 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 ( thead elem ) s tblzat lblc ( tfoot elem ) egy tblzaton bell csak egy-egy lehet, de mindegyikk tartalmazhat egynl tbb tr sort is. A tblzattrzsek ( tbody ele-mek ) szma nincsen korltozva.

Egy tblzatnak kdolssal trtn szerkezeti egysgekre bontst ( a jelenlegi helyzet-hez kpesti sszehasonlts cljbl ) a 2012. els negyedves bngszhasznlati statisztikn mutatjuk be:

Bngszk statisztikja 2012. els negyedvben hnap janur februr mrcius

Firefox 6-11 33,58% 34,19% 34,84%

Chrome 13-18 25,56% 26,58% 27,17%

Internet Explorer 8 14,32% 13,84% 12,46%

Firefox 5 s a rgebbiek 11,27% 9,94% 9,25%


Opera 11.1-12.0 2,57% 2,56% 2,62%


Chrome 12 s a rgebbiek 1,14% 1,16% 1,18%


egyb* 3,26% 3,42% 3,60%

*nagyobbik rszt a mobil bngszk teszik ki

Bekdolva a tblzatot gy, hogy a thead, tbody s tfoot cmkket elhelyezzk a meg-felel szerkezeti egysgeknl ( a tblzattrzset nem bontottuk fel tbb rszre, teht csak egy tbody-t alkalmazva ):

Bngszk statisztikja 2012. els negyedvben

44

hnap janur februr mrcius Firefox 6-11 33,58% 34,19% 34,84% Chrome 13-18 25,56% 26,58% 27,17% Internet Explorer 814,32%13,84%12,46% Firefox 5 s rgebbiek11,27%9,94%9,25% Internet Explorer 95,80%6,10% 7,10% Opera 11.1-12.02,57%2,56%2,62% Internet Explorer 71,90%1,69%1,37% Chrome 12 s rgebbiek1,14%1,16%1,18% Internet Explorer 60,60%0,52% 0,41% egyb* 3,26% 3,42% 3,60% *nagyobbik rszt a mobil bngszk teszik ki

Megjegyzsek: A tblzat lblce ltalban folyamatos szveg, melynek nem kell k-vetnie a tblzat oszlopainak tagolst. Ilyen esetben a szveg a th-ba, vagy a th elhagysval az els td elembe rhat ( th hasznlatakor alaprtelmezetten vastag dlt betkkel jelenne meg a szveg ). Az oszloptfogst azrt kdoltuk be, hogy a tblzat oszlopainak szlessge ne a lblc szveghez, hanem a tblzat rdemi rszhez - a fejlcekhez s adatcellkhoz iga-zodjon.

Figyelem! A tfoot elemet kdolhattuk volna a caption elem al vagy fl, vagy a thead s tbody elemek kz, a bngszk akkor is a tblzat aljn jelentik meg a lblcet. A thead elemre ugyangy rvnyes ez a megllapts ha a tblzat vgre kdoljuk, akkor is fell jelenik meg.

45

A tblzat szerkezetre vonatkoz csoportost HTML cmkk beiktatsa ( eltekintve a lblc hozzadstl ) nmagban nem okozott semmilyen vltozst a bngszk alaprtel-mezett megjelentsben:

CSS-el klnbz tulajdonsgokat rendelve a thead, tbody, tfoot cmkkhez vltozatos formzsi lehetsgek addnak. Egy egyszer plda a fenti szerkezeti egysgek szerinti ( a CSS rszben ismertetend ) formzs eredmnyekppeni megjelentsre:

2.6.3. A s cmkkkel a tblzat egy vagy tbb oszlopa, ill. azokbl kpzett oszlopcsoportok definilhatk, s rendelhet hozzjuk pl. formzs. Nem ktelez valamennyi oszlopot bekdolni, csak azokat, melyekre hivatkozni akarunk.

46

Az oszlopocsoport kdjt a caption s az els tr kz kell elhelyezni ( de ha a tblzat vgre kdoljuk, akkor is rtelmezik a bngszk ). Az elz tblzat oszlopok szerinti definilsa teht ( a negyedik oszlophoz nem rendeltnk semmit ):

Bngszk statisztikja 2012. els negyedvben hnap janur februr mrcius

..stb

Az oszlopokra vonatkoz csoportost cmkk bekdolsa nem okoz vltozst az alap-

rtelmezett megjelentsben. Ha viszont klnbz szn htteret rendelnk CSS-el a kijellt oszlopokhoz, a formzott megjelents:

Megjegyzs: A bngszk csak korltozottan rtelmeznek col-hoz rendelt tulajdons-gokat, ezrt a gyakorlatban kevss hasznlatos a colgroup -al megvalstott formzs.

Figyelem: A TBLZATOKAT EGY WEBLAP SZERKEZETI KIALAKTSRA FELHASZNLNI ELAVULT S NEM JAVASOLT MEGOLDS !

Megjegyzs: A tblzatok blokkszint elemek. Alaprtelmezettl eltr megjelentsk mindig CSS-el trtnjen. ( lsd a CSS rsz Tblzatok formzsa fejezetet )

47

A tblzatoknl felhasznlt HTML cmkk:

Cmke: Funkcija:

tblzatot definil pros cmke tblzat fejlcet definil pros cmke tblzat sort definil pros cmke tblzat cellt definil pros cmke tblzat cmet definil pros cmke tblzatfejet definil pros cmke tblzattrzset defrinil pros cmke tblzat lblcet definil pros cmke tblzat oszlopcsoportot definil pros cmke tblzat oszlopo(ka)t definil pratlan cmke

2.7. Kpek

A web-es multimdia tartalmak kzl az llkpek kezelse rgta kiforrott, ttekint-heten s egyrtelmen szablyozott. A mozgkpekrl mindez nem mondhat el - azzal a kvetkez fejezet foglalkozik.

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

A bngszk a sok kpformtum kzl a GIF, JPEG s PNG formtumokat tudjk rtelmezni ( a Google ltal fejlesztett, de rajta kvl egyelre csak az Opera ltal tmogatott j WebP elterjedsrl mg korai tallgatsba bocstkozni ).

A formtumok fbb tulajdonsgainak ismertetse a CSS rsz Kpformtumok feje-zetben 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 he-lyezni a szveget anlkl, hogy meg kellene vrniuk a kpek letltdst ), gy nem ugrik a rszben megjelent oldal a kp(ek) ksbb ismertt vlt mrete(i) miatt.

Ha a kp fizikai mrettl eltr szlessget s magassgot adunk meg, nagyts, ki-csinyts, vagy ( tudatos vagy figyelmetlensgbl elkvetett ) torzts kvetkezik be. A nagy-

48

ts vagy kicsinyts nem rinti a kp felbontst kicsinytskor nem fog gyorsabban letl-tdni, nagytskor pixeleseds lphet fel.

A szlessg s magassg kdolsa:

b) Az alt jellemz ( alt=alternative text=helyettest szveg ) kpet helyettest szve-ges 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 meg-adni. 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 ( tool-tip = rvid sg szveg, elemlers, buborkszveg ) - gy ez nyomtatsban nem ltszdik.

Valamennyi felsorolt jellemzt felhasznlva egy kp HTML kdja:

Pldaknt egy szvegben elhelyeznk egy kpet: A rzsa ide beillesztjk egy rzsa kpt sok vrs rzsa helyettest szveggel s az egrrel a kpre llva megjelen rzsk felirattal a rzsaflk csaldjnak egyik nemzetsge, nemestett fajait vi

html5 css3 osszefoglalo v10

Documents