bull Kup książkębull Poleć książkę bull Oceń książkę

bull Księgarnia internetowabull Lubię to raquo Nasza społeczność

SPIS TREśCI

Wprowadzenie 1Rozdział 1 Struktura 10Rozdział 2 Tekst 38Rozdział 3 Listy 60Rozdział 4 Łącza 72Rozdział 5 Obrazy 92Rozdział 6 Tabele 124Rozdział 7 Formularze 142Rozdział 8 Dodatkowe elementy HTML 174Rozdział 9 Flash wideo i audio 198Rozdział 10 Prezentacja CSS 224Rozdział 11 Kolor 244Rozdział 12 Tekst 262Rozdział 13 Pudełka elementoacutew 298Rozdział 14 Listy tabele i formularze 328Rozdział 15 Układ 356Rozdział 16 Obrazy 404Rozdział 17 Układ w HTML5 426Rozdział 18 Proces i projekt 450Rozdział 19 Informacje praktyczne 474 Skorowidz 493

Kup książkę Poleć książkę

Kup książkę Poleć książkę

17Układ

w HTML5

X Elementysłużącedookreślaniaukładustron dostępnew HTML5

X Jakstareprzeglądarkiobsługująnoweelementy

X OkreślaniewyglądunowychelementoacutewHTML5 przy użyciustyloacutew

Kup książkę Poleć książkę

428 UKŁADW HTML5

HTML5wprowadzazbioacuternowychelementoacutewułatwiającychdefiniowaniestrukturystrony

Zostałyoneopisanew osobnymrozdziale(a nieprzyokazjiprezentowaniainnychelementoacutewHTMLprzedstawionychwe wcześniejszejczęściksiążki)gdyżterazkiedyjużwiemyjak określaćukładstronprzyużyciuarkuszystyloacutewłatwiejbędzienamzrozumiećjaknależyjestosowaćTe noweelementybędąodgrywałyznaczącąrolęw tworzeniunowoczesnychukładoacutewstronW tymrozdziale

bull PoznamynoweelementyHTML5służącedookreślaniaukładustronorazichzastosowania

bull Dowiemysiędlaczegostanowiąużytecznąalternatywędla elementoacutewltdivgt

bull Dowiemysięjaksprawićbystarszeprzeglądarkirozpoznawałytenoweelementy

PodobniejakwszystkienowościwprowadzanedoHTML5i CSS3takżetenoweelementymogąsięjeszczezmienićjednaksąonejużpowszechnieużywaneprzeztwoacutercoacutewstroni prawdopodobnietakżeCzytelnikbędziechciał z nichskorzystać

Kup książkę Poleć książkę

429UKŁADW HTML5Kup książkę Poleć książkę

430 UKŁADW HTML5

TrADyCyJnEUKŁADyHTML

PrzezwielelattwoacutercystronWWWużywalielementoacutewltdivgt do grupowaniapowiązanychzesobąelementoacutewstron(takichjak elementytworzącenagłoacutewekartykułstopkęlubpasekboczny)Dookreślaniafunkcjijakieteelementyltdivgtpełniąnastronieużywanebyłyatrybutyclassorazid

Z prawejstronyprzedstawionyzostałprzykładdosyćczęstospotykanegoukładustrony(stosowanynajczęściejna blogach)

W goacuternejczęścistronyznajdujesięnagłoacutewekzawierającylogoorazpodstawoweelementynawigacyjne

Poniżejnagłoacutewkaznajdujesięjeden(lubwięcej)artykułlubwpisCzasamiumieszczanesątakżekroacutetkiepodsumowaniaz łączamiprowadzącymido konkretnychwpisoacutew

Z prawejstronyumieszczonyjestpasekboczny(zawierającynpformularzdowyszukiwaniałączadoinnychnajnowszychartykułoacutewczysekcjiwitrynya byćmożenawetdoreklamy)

Tworząctakąwitrynęautorzyzazwyczajumieszczająjejposzczegoacutelnegłoacutewnesekcjewewnątrzelementoacutewltdivgtokreślającichprzeznaczenieprzyużyciuatrybutoacutewclass orazid

ltbodygt

ltdiv id=pagegt

ltdiv id=headergt

ltdiv id=contentgt

ltdiv id=footergt

ltdiv id=sidebargt

ltdiv id=navgt

ltdiv class=articlegt

ltdiv class=articlegt

Kup książkę Poleć książkę

431UKŁADW HTML5

nOWEELEMEnTyHTML5SŁUżąCEDOTWOrZEniA

UKŁADoacuteWSTrOnW językuHTML5wprowadzonyzostałzbioacuternowychelementoacutewsłużącychdooznaczaniafragmentoacutewtworzonychstronnazwytychelementoacutewokreślająrodzajzawartościjakąnależyw nichumieszczaćChoćmogąsięjeszczezmieniaćniepowstrzymujeto autoroacutewstronprzedichstosowaniem

Przykładprzedstawionyobokmadokładnietakąsamąstrukturęjaktenzamieszczonynapoprzedniejstronieniemniejwielespośroacutedużytychwcześniejelementoacutewltdivgt zostałozastąpionychnowymielementamiHTML5i taknagłoacutewekzostałumieszczonywewnątrzelementultheadergtelementynawigacyjneznalazłysięw elemencieltnavgta artykułymdashwewnątrzodrębnychelementoacutewltarticlegtElementytezostałystworzonepotobyautorzystronmogliza ichpomocąopisywaćstrukturętworzonychstronCzytnikiekranowenpmogąpozwolićużytkownikomna ignorowanienagłoacutewkoacutewi stopeki prezentowaćjedyniegłoacutewnązawartośćstronPodobniewyszukiwarkimogąnadawaćwiększeznaczeniezawartościelementoacutewltarticlegtniżelementoacutewltheadergti ltfootergtSądzężeCzytelniktakżeprzyznaże zastosowanietychelementoacutewułatwiaanalizękoduźroacutedłowegostrony

ltbodygt

ltdiv id=pagegt

ltheadergt

ltdiv id=contentgt

ltfootergt

ltasidegt

ltnavgt

ltarticlegt

ltarticlegt

Kup książkę Poleć książkę

432 UKŁADW HTML5

ltheadergt lth1gtKuchnia Yokolth1gt ltnavgt ltulgt ltligtlta href=rdquordquo class=rdquocurrentrdquogtstrona głoacutewna ltagtltligt ltligtlta href=rdquordquogtzajęcialtagtltligt ltligtlta href=rdquordquogtcateringltagtltligt ltligtlta href=rdquordquogto nasltagtltligt ltligtlta href=rdquordquogtkontaktltagtltligt ltulgt ltnavgtltheadergt

HTMLrodzial-17html5-layouthtml

nAgŁoacuteWKii STOPKiltheadergt ltfootergt

Elementy ltheadergt i ltfootergtmogąbyćużywanedo tworzenia

bull głoacutewnegonagłoacutewkai stopkiprezentowanychodpowiednionagoacuterzei nadolekażdejstronywitryny

bull nagłoacutewkai stopkiumieszczanychw poszczegoacutelnychelementachltarticlegt oraz ltsectiongt

W tymprzykładzieelementltheadergtzawieralogowitrynyorazgłoacutewneelementynawigacyjneZ koleielementltfootergtzawierainformacjeo prawachautorskichorazodnośnikidostronz politykąprywatnościi warunkamikorzystaniazestronyElementyltheadergti ltfootergtmożnatakżeumieszczaćwewnątrzelementoacutewltarticlegt orazltsectiongtW takichprzypadkachpowinnyonezawieraćodpowiednionagłoacuteweki stopkękonkretnegoartykułulubsekcjistrony

Przykładowonastroniezawierającejkilkawpisoacutewblogowychkażdyz nichmożebyćumieszczonyw osobnejsekcjiW takimprzypadkuw elemencieltheadergtmożnaumieścićtytułwpisuorazjegodatęnatomiastw elemencieltfootergtmdashodnośniki

umożliwiającepodzieleniesięartykułemw portalachspołecznościowych

Wartozauważyćżewszystkieprzykładyprzedstawionew tymrozdzialepochodząz jednegoplikuo nazwiehtml5-layouthtml

ltfootergt ampcopy 2011 Kuchnia Yokoltfootergt

HTMLrodzial-17html5-layouthtml

Kup książkę Poleć książkę

433UKŁADW HTML5

ltnavgt ltulgt ltligtlta href=rdquordquo class=rdquocurrentrdquogtstrona głoacutewnaltagtltligt ltligtlta href=rdquordquogtzajęcialtagtltligt ltligtlta href=rdquordquogtcateringltagtltligt ltligtlta href=rdquordquogto nasltagtltligt ltligtlta href=rdquordquogtkontaktltagtltligt ltulgtltnavgt

HTML rodzial-17html5-layouthtml

nAWigACJAltnavgt

Element ltnavgtjestprzeznaczonydoumieszczaniagłoacutewnychblokoacutewnawigacyjnychwitrynytakichjaklistałączydo jejgłoacutewnychdziałoacutew

Wroacutećmydoprzykładowejstronyblogagdybyśmychcielizakończyćartykułlistąłączydoinnychpowiązanychz nimwpisoacutewniemożnabyichbyłouznaćzagłoacutewneelementynawigacyjnea cozatymidzienienależałobyichumieszczaćw elemencieltnavgt

W czasiekiedypowstawałataksiążkaprojektanciużywającyjęzykaHTML5zdecydowaliżeelementltnavgtbędzieużywanydoumieszczaniałączywyświetlanychu dołukażdejzestronwitryny(czylidostronzawierającychpolitykęprywatnościwarunkikorzystaniainformacjeo ułatwieniachdostępuitd)Wciążjednakniewiadomoczytakierozwiązaniezyskapopularnośći będziepowszechniestosowane

Kup książkę Poleć książkę

434 UKŁADW HTML5

ArTyKUŁyltarticlegt

ltarticlegt ltfiguregt ltimg src=rdquoimagesbok-choijpgrdquo alt=rdquoBok Choirdquo gt ltfigcaptiongtBok choiltfigcaptiongt ltfiguregt lthgroupgt lth2gtJapońska kuchnia wegetariańskalth2gt lth3gtKurs pięciotygodniowylth3gt lthgroupgt ltpgtPodczas pięciotygodniowego kursu będącego wprowadzeniem do tradycyjnej japońskiej kuchni wegetariańskiej uczymy przyrządzania wybranych potraw z ryżu i makaronultpgtltarticlegt ltarticlegt ltfiguregt ltimg src=rdquoimagesteriyakijpgrdquo alt=rdquoSos teriyakirdquo gt ltfigcaptiongtSos teriyakiltfigcaptiongt ltfiguregt lthgroupgt lth2gtMistrzowie sosoacutewlth2gt lth3gtKurs jednodniowylth3gt lthgroupgt ltpgtIntensywny jednodniowy kurs na ktoacuterym uczymy przyrządzania najlepszych sosoacutew używanych w kuchni japońskiejltpgtltarticlegt

HTMLrodzial-17html5-layouthtmlElement ltarticlegtpełnifunkcjępojemnikaw ktoacuterymsąumieszczanedowolnesekcjestronyprzyczympowinnyonebyćstosunkowoautonomicznei nadawaćsiędozebraniaw większągrupę

Mogątobyćposzczegoacutelneartykułylubwpisydoblogakomentarzelubwpisynaforumczywszelkieinneniezależnefragmentytreści

Jeślistronazawierakilkaartykułoacutew(albonawetpodsumowaniakilkuartykułoacutew)tokażdyz nichpowinienzostaćumieszczonyw osobnymelemencieltarticlegt

Elementy ltarticlegtmożnazagnieżdżaćnpwpisdo blogazostanieumieszczonyw jednymelemencieltarticlegta poszczegoacutelnekomentarzedotegowpisuznajdąsięw kolejnychelementach

Kup książkę Poleć książkę

435UKŁADW HTML5

SEKCJEbOCZnEltasidegt

ltasidegt ltsection class=rdquopopular-recipesrdquogt lth2gtPopularne przepisylth2gt lta href=rdquordquogtYakitori (grillowany kurczak)ltagt lta href=rdquordquogtTsukune (mielone kotleciki z kurczaka)ltagt lta href=rdquordquogtOkonomiyaki (smaczne naleśniki)ltagt lta href=rdquordquogtMizutaki (gulasz z kurczaka)ltagt ltsectiongt ltsection class=rdquocontact-detailsrdquogt lth2gtKontaktlth2gt ltpgtKuchnia Yokoltbr gt al Wegetariańska 27ltbr gt Warszawaltpgt ltsectiongtltasidegt

HTML rodzial-17html5-layouthtmlElement ltasidegtmakilkazastosowańzależnychodtegoczyznajdujesięwewnątrzelementultarticlegtczy poza nim

W przypadkuumieszczeniaelementultasidegtwewnątrzelementultarticlegtpowinienonzawieraćinformacjepowiązanez artykułemleczniekonieczniez jegopodstawowymznaczeniemZatakielementzwiązanyz artykułemmożnabyuznaćnpwyroacuteżnionycudzysłoacutewlub słownik

Jeślinatomiastelementltasidegtjestumieszczonypozaelementemltarticlegtto służyjakopojemnikdlatreścizwiązanychz całąstronąMożnabyw nimumieścićnp łączadoinnychsekcjiwitrynylistęostatnichpublikacjipolewyszukiwaniaalboostatniewpisyautorana Twitterze

Kup książkę Poleć książkę

436 UKŁADW HTML5

SEKCJEltsectiongt

ltsection class=rdquopopular-recipesrdquogt lth2gtPopularne przepisylth2gt lta href=rdquordquogtYakitori (grillowany kurczak)ltagt lta href=rdquordquogtTsukune (mielone kotleciki z kurczaka)ltagt lta href=rdquordquogtOkonomiyaki (smaczne naleśniki)ltagt lta href=rdquordquogtMizutaki (gulasz z kurczaka)ltagtltsectiongtltsection class=rdquocontact-detailsrdquogt lth2gtKontaktlth2gt ltpgtKuchnia Yokoltbr gt al Wegetariańska 27ltbr gt Warszawaltpgtltsectiongt

HTMLrodzial-17html5-layouthtmlElement ltsectiongtsłużydo grupowaniainnychpowiązanychzesobąelementoacutewZazwyczajkażdatakasekcjamawłasnynagłoacutewek

Przykładowonastroniegłoacutewnejwitrynymożesięznaleźćkilkaelementoacutewltsectiongt zawierającychroacuteżnesekcjestronytakiejaknajnowszepublikacjenajpopularniejszeproduktyorazformularzedosubskrypcjibiuletynuinformacyjnego

Ponieważelementltsectiongt grupujepowiązanezesobąelementymożnaw nimumieścićkilkaelementoacutewltarticlegtreprezentującychartykułypoświęconetejsamejtematycelubmającetosamoprzeznaczenie

Alternatywniejeślistronazawierabardzodługiartykułtokorzystającz elementultsectiongtmożnapodzielićjegotreśćnakilkafragmentoacutew

Elementultsectiongtnienależyużywaćjakopojemnikazawierającegocałątreśćstrony(chybażecałąjejzawartośćstanowijedenspoacutejnyfragmenttreści)Jeśliszukamyelementuktoacuterynadałbysiędorolipojemnikazawierającegocałąstronęw tymceluwciążnajlepiejzastosowaćelement ltdivgt

Kup książkę Poleć książkę

437UKŁADW HTML5

grUPynAgŁoacuteWKoacuteWlthgroupgt

Element lthgroupgtsłużydo grupowaniaodjednegodo kilkuelementoacutewlth1gt ndash lth6gttakbybyłyonetraktowanejako jedennagłoacutewek

Elementulthgroupgtmożnaby użyćdopodaniazaroacutewnotytułuumieszczonegow elemencielth2gtjak i podtytułuumieszczonegow nagłoacutewkulth3gt

Tenelementzostałprzyjętyz mieszanymiuczuciamiKiedytwoacutercyjęzykaHTML5zaproponowaligoporazpierwszypojawiłysięskargiktoacuteredoprowadziłydousunięciagoz propozycjistandarduniecopoacuteźniejjednakpewneosobyzmieniłyzdaniei elementlthgroupgtponownieznalazłsięw propozycjiHTML5niektoacuterzytwoacutercystronnielubiągoi preferująumieszczaniepodtytułoacutewwewnątrzelementoacutewltpgt (używająprzy tymatrybutuokreślającegoże danyelementjestnagłoacutewkiemniższegostopnia)

lthgroupgt lth2gtJapońska kuchnia wegetariańskalth2gt lth3gtKurs pięciotygodniowylth3gtlthgroupgt

HTML rodzial-17html5-layouthtml

niektoacuterzysugerująże elementlthgroupgtmaniewielezastosowańoproacutecztegoże możnagoużyćdookreślaniastyloacutewniemniejcieszysiępopularnościąwśroacutedtychprojektantoacutewktoacuterzysązwolennikamigrupowanianagłoacutewkagłoacutewnegooraznagłoacutewkaniższegostopnia(gdyżobamogąstanowićintegralneczęścinagłoacutewka)

Kup książkę Poleć książkę

438 UKŁADW HTML5

iLUSTrACJEltfiguregt ltfigcaptiongt

Element ltfiguregtzostałjużprzedstawionyw rozdziale5poświęconymobrazomMożeonzawieraćdowolnetreścido ktoacuterychodwołujesięgłoacutewnatreśćartykułu(nietylkoobrazy)

Koniecznienależyzauważyćżeartykułniepowinientracićznaczeniaw przypadkuprzesunięciazawartościelementultfiguregt(doinnejczęścistronylubnawetprzeniesieniagonainnąstronę)

Dlategonależygoużywaćwyłączniew sytuacjachgdy w treściartykułuznajdujesięjedynieodwołaniedo elementu(a niegdystanowionintegralnączęśćtejtreści)

Otokilkaprzykładoacutewzastosowańelementultfiguregt

bull obrazy bull klipywideo bull wykresy bull diagramy bull listingikodu bull tekstyuzupełniającegłoacutewnątreśćartykułu

W elemencieltfiguregt należytakżeumieszczaćelement ltfigcaptiongtsłużącydo podaniatekstowegoopisuzawartościelementultfiguregt

ltfiguregt ltimg src=rdquoimagesbok-choijpgrdquo alt=rdquoBok choirdquo gt ltfigcaptiongtBok choiltfigcaptiongtltfiguregt

HTMLrodzial-17html5-layouthtml

W przedstawionymprzykładziewidaćżeelementltfiguregt zostałdodanydoartykułu(ltarticlegt)

Kup książkę Poleć książkę

439UKŁAD W HTML5

Może się wydawać dziwne że po prezentacji nowych elementoacutew HTML5 wracamy do elementu ltdivgt (w końcu te nowe elementy mają go zastępować)

Element ltdivgt wciąż pozostaje ważnym sposobem grupowania powiązanych ze sobą elementoacutew stron gdyż przedstawione wcześniej nowe elementy HTML5 należy stosować wyłącznie w ściśle określonych celach

Wszędzie tam gdzie nowe elementy HTML5 nie nadają się do zastosowania trzeba będzie nadal używać elementu ltdivgt W tym przykładzie został on zastosowany jako pojemnik dla całej zawartości strony

Pewnie niektoacuterzy zastanawiają się dlaczego nie ma elementu ltcontentgt w ktoacuterym można by umieścić głoacutewną zawartość strony Wynika to z faktu że wszystko co znajduje się poza elementami ltheadergt ltfootergt oraz ltasidegt można uznać za głoacutewną część strony

GrUPoWAniE ELEMEnToacuteW W sEKcjE

ltdiv class=rdquowrapperrdquogt ltheadergt lth1gtKuchnia Yokolth1gt ltnavgt lt-- zawartość paska nawigacyjnego --gt ltnavgt ltheadergt ltsection class=rdquocoursesrdquogt lt-- zawartość sekcji --gt ltsectiongt ltasidegt lt-- zawartość paska bocznego --gt ltasidegt ltfootergt lt-- zawartość stopki --gt ltfootergtltdivgtlt-- wrapper --gt

HTML rodzial-17html5-layouthtml

Kup książkę Poleć książkę

440 UKŁADW HTML5

UMiESZCZAniEELEMEnToacuteWbLOKOWyCHW ŁąCZACH

HTML5pozwalaumieszczaćwewnątrzelementoacutewltagt dowolneelementyblokowewrazz zawartościąDziękitemucałybloktreścimożnaprzekształcićw łącze

niejesttonowyelementwprowadzonydoHTML5niemniejwewcześniejszychwersjachjęzykatakierozwiązaniebyłouznawaneza nieprawidłowe

Wartozwroacutecićuwagęnatoże kodtejstronyroacuteżnisięniecoodkodupozostałychprzykładoacutewprezentowanychw tymrozdziale

lta href=rdquointroductionhtmlrdquogt ltarticlegt ltfiguregt ltimg src=rdquoimagesbok-choijpgrdquo alt=rdquoBok Choirdquo gt ltfigcaptiongtBok choiltfigcaptiongt ltfiguregt lthgroupgt lth2gtJapońska kuchnia wegetariańskalth2gt lth3gtKurs pięciotygodniowylth3gt lthgroupgt ltpgtPodczas pięciotygodniowego kursu będącego wprowadzeniem do tradycyjnej japońskiej kuchni wegetariańskiej uczymy przyrządzania wybranych potraw z ryżu i makaronultpgt ltarticlegt ltagt

HTMLrodzial-17html5-layouthtml

Kup książkę Poleć książkę

441UKŁADW HTML5

UŁATWiEniESTArSZyMPrZEgLąDArKOM

ZrOZUMiEniA nOWEgOKODU

StarszeprzeglądarkiktoacuterenierozpoznająnowychelementoacutewHTML5będąjeautomatycznietraktowaćjakoelementywewnątrzwierszoweDlategoabyimpomoacutecdoużywanegoarkuszastyloacutewnależydodaćprzedstawionąobokregułęktoacuteraokreślawszystkieteelementyjakoblokowe

DodatkowopierwsząwersjąprzeglądarkiinternetExplorerktoacuterapozwalałanakojarzeniestyloacutewz tyminowymielementamiHTML5jest iE9AbyokreślićwyglądtychelementoacutewprzyużyciustyloacutewwewcześniejszychwersjachinternetExploreranależyużyćprostegoskryptuJavaScriptnazywanegopodkładką HTML5 (angHTML5 shim)

Abykorzystaćz tegorozwiązanianietrzebaznaćjęzykaJavaScriptWystarczydołączyćdoswojejstronyskryptprzechowywanyna serwerachgoogleMożnagoumieścićwewnątrzkomentarzy warunkowychsprawdzającychczyużywanawersjaprzeglądarkijestwcześniejszaodiE9(stądzastosowaniewyrażenialt IE 9)

header section footer aside nav article figure display block

CSS rodzial-17

lt--[if lt IE 9]gt ltscript src=rdquohttphtml5shivgooglecodecomsvn trunkhtml5jsrdquogtltscriptgtlt[endif]--gt

HTML rodzial-17html5-layouthtml

niestetytorozwiązaniewymagabyużytkownicykorzystającyz przeglądarkiiE8lubwersjiwcześniejszychmieliwłączonąobsługęjęzykaJavaScriptJeśliobsługatabędziewyłączonaniebędąw staniezobaczyćzawartościnowychelementoacutewHTML5

Kup książkę Poleć książkę

442 UKŁADW HTML5Kup książkę Poleć książkę

443UKŁADW HTML5

nagłoacutewekorazstopkastronyzostałyumieszczoneodpowiedniow elementachltheadergtorazltfootergtinformacjeo zajęciachzostałyzgrupowanew elemencieltsectiongtz atrybutemclass o wartościcourses(ktoacuterymaodroacuteżniaćgoodpozostałychelementoacutewltsectiongtumieszczonychnastronie)Pasekbocznyzostałumieszczonyw elemencieltasidegt

Każdyz kursoacutewzostałprzedstawionyw osobnymelemencieltarticlegti uzupełnionyelementamiltfiguregtorazltfigcaptiongt zawierającymiobrazeknagłoacutewekkażdegokursumadodatkowypodnagłoacuteweka obateelementysąumieszczonewewnątrzelementulthgroupgtPasekbocznyzawieralistęprzepisoacuteworaz informacjekontaktoweumieszczonew dwoacutechosobnychelementach ltsectiongt

WyglądcałejstronyjestokreślanyprzyużyciuCSSJedynaroacuteżnicapoleganatymżew selektorachzostałyużytenoweelementy HTML5copozwalastworzyćregułyodnoszącesiędo tychelementoacutewAbyarkuszstyloacutewdziałałw starszychwersjachprzeglądarekinternetExplorer(wcześniejszychodwersji9)stronazawieraodwołaniedospecjalnegoskryptuJavaScript(dostępnegonaserwerachfirmygoogle)umieszczonew komentarzachwarunkowych

PrZyKŁADUKŁADWHTML5

TenprzykładprzedstawiawitrynępoświęconągotowaniumdashjejstrukturazostałautworzonaprzywykorzystaniunowychelementoacutewHTML5 (a nieelementoacutewltdivgt)

Kup książkę Poleć książkę

444 UKŁADW HTML5

PrZyKŁADUKŁADW HTML5

ltDOCTYPE htmlgtlthtmlgt ltheadgt lttitlegtUkład w HTML5lttitlegt ltstyle type=rdquotextcssrdquogt header section footer aside nav article figure figcaption display block body color 666666 background-color f9f8f6 background-image url(ldquoimagesdark-woodjpgrdquo) background-position center font-family Georgia Times serif line-height 14em margin 0px wrapper width 940px margin 20px auto 20px auto border 2px solid 000000 background-color ffffff header height 160px background-image url(imagesheaderjpg) h1 text-indent -9999px width 940px height 130px margin 0px nav footer clear both color ffffff background-color aeaca8 height 30px nav ul margin 0px padding 5px 0px 5px 30px nav li display inline margin-right 40px nav li a

Kup książkę Poleć książkę

445UKŁADW HTML5

PrZyKŁADUKŁADW HTML5

color ffffff nav li ahover nav li acurrent color 000000 sectioncourses float left width 659px border-right 1px solid eeeeee article clear both overflow auto width 100 hgroup margin-top 40px figure float left width 290px height 220px padding 5px margin 20px border 1px solid eeeeee figcaption font-size 90 text-align left aside width 230px float left padding 0px 0px 0px 20px aside section a display block padding 10px border-bottom 1px solid eeeeee aside section ahover color 985d6a background-color efefef a color de6581 text-decoration none h1 h2 h3 font-weight normal h2

Kup książkę Poleć książkę

446 UKŁADW HTML5

PrZyKŁADUKŁADW HTML5

margin 10px 0px 5px 0px padding 0px h3 margin 0px 0px 10px 0px color de6581 aside h2 padding 30px 0px 10px 0px color de6581 footer font-size 80 padding 7px 0px 0px 20px ltstylegt lt--[if lt IE 9]gt ltscript src=rdquohttphtml5shivgooglecodecomsvntrunkhtml5jsrdquogtltscriptgt lt[endif]--gt ltheadgt ltbodygt ltdiv class=rdquowrapperrdquogt ltheadergt lth1gtKuchnia Yokolth1gt ltnavgt ltulgt ltligtlta href=rdquordquo class=rdquocurrentrdquogtstrona głoacutewnaltagtltligt ltligtlta href=rdquordquogtzajęcialtagtltligt ltligtlta href=rdquordquogtcateringltagtltligt ltligtlta href=rdquordquogto nasltagtltligt ltligtlta href=rdquordquogtkontaktltagtltligt ltulgt ltnavgt ltheadergt ltsection class=rdquocoursesrdquogt ltarticlegt ltfiguregt ltimg src=rdquoimagesbok-choijpgrdquo alt=rdquoBok choirdquo gt ltfigcaptiongtBok choiltfigcaptiongt ltfiguregt lthgroupgt lth2gtJapońska kuchnia wegetariańskalth2gt lth3gtKurs pięciotygodniowylth3gt lthgroupgt

Kup książkę Poleć książkę

447UKŁADW HTML5

PrZyKŁADUKŁADW HTML5

ltpgtPodczas pięciotygodniowego kursu będącego wprowadzeniem do tradycyjnej japońskiej kuchni wegetariańskiej uczymy przyrządzania wybranych potraw z ryżu i makaronultpgt ltarticlegt ltarticlegt ltfiguregt ltimg src=rdquoimagesteriyakijpgrdquo alt=rdquoSos teriyakirdquo gt ltfigcaptiongtSos teriyakiltfigcaptiongt ltfiguregt lthgroupgt lth2gtMistrzowie sosoacutewlth2gt lth3gtKurs jednodniowylth3gt lthgroupgt ltpgtIntensywny jednodniowy kurs na ktoacuterym uczymy przyrządzania najlepszych sosoacutew używanych w kuchni japońskiejltpgt ltarticlegt ltsectiongt ltasidegt ltsection class=rdquopopular-recipesrdquogt lth2gtPopularne przepisylth2gt lta href=rdquordquogtYakitori (grillowany kurczak)ltagt lta href=rdquordquogtTsukune (mielone kotleciki z kurczaka)ltagt lta href=rdquordquogtOkonomiyaki (smaczne naleśniki)ltagt lta href=rdquordquogtMizutaki (gulasz z kurczaka)ltagt ltsectiongt ltsection class=rdquocontact-detailsrdquogt lth2gtKontaktlth2gt ltpgtKuchnia Yokoltbr gt al Wegetariańska 27ltbr gt Warszawaltpgt ltsectiongt ltasidegt ltfootergt ampcopy 2011 Kuchnia Yoko ltfootergt ltdivgtlt-- wrapper --gt ltbodygtlthtmlgt

Kup książkę Poleć książkę

Kup książkę Poleć książkę

PODSUMOWAniEUKŁADW HTML5

X noweelementyHTML5określająprzeznaczenieroacuteżnychfragmentoacutewstronWWWi opisująich strukturę

X Tenoweelementyułatwiajązrozumieniekodu(w poroacutewnaniuzestosowanymiwcześniejelementami ltdivgt)

X StarszeprzeglądarkiktoacuterenierozumiejąjęzykaHTML5należypoinstruowaćktoacuterez tychnowychelementoacutewsąelementamiblokowymi

X AbynoweelementyHTML5działaływ przeglądarceiE8(orazwersjachwcześniejszych)koniecznejestużycieskryptuJavaScriptdostępnegonaserwerachfirmygoogle

Kup książkę Poleć książkę

Kup książkę Poleć książkę

Skorowidz

Kup książkę Poleć książkę

SKOROWIDZ

AAdobe Fireworks

Patrz FireworksAdobe Illustrator

Patrz IllustratorAdobe Photoshop

Patrz Photoshopadres

IP 9poczty elektronicznej 84URL 150 479

bezwzględny 78względny 79 82 91

AJAX 216akapit 22 43alfa 253 255Android 212animacja 7 200 206

223 281arkusz styloacutew

kaskadowy Patrz CSSzewnętrzny 235 240

atrybut 37action 150align 102 410alt 98 120 123 160

478 479autoplay 213 218bgcolor 137border 137cellpadding 136cellspacing 136checked 154 155cite 51class 176 183 186 197

288 430 443codecs 214cols 153colspan 132 138 141content 190controls 213 218format 162frameborder 189globalny 176 182height 99 160 188 213href 76 78 86 87 91 234

mailto 84target 85

http-equiv 190id 86 87 91 150 162

176 182 186 197 206 237 430

lang 24loop 213 218maxlength 151 152method 150 158multiple 157name 151 152 154 155

156 159 190nazwa 24placeholder 167poster 213preload 213 218rel 234required 164rows 153rowspan 133 141scrolling 189seamless 189selected 156size 151 152 157src 98 123 160 188 213

214 218 219style 235title 52title 98 120type 64 65 214 219

checkbox 155date 165email 166file 158hidden 161image 160password 152radio 154search 166submit 159text 151textcss 234url 166

value 154 155 156 159wartość 24width 99 136 160

188 213audio 200autor 54 190

Bbezpieczentildestwo 152browser quirk

Patrz przeglądarka dziwactwo

CCDN 277Chrome 6 53 212 213

319 346cień 287 319 342CMS 7 32 48 487

szablon 32 33Content Delivery Network

Patrz CDNCSS 51 64 65 226 230

238 243 327błąd Patrz przeglądarka

dziwactwokomentarz 248platforma Patrz platformareguła Patrz regułaschemat pozycjonowania

Patrz schemat pozycjonowania

wersja 241cytat 51czcionka 266 267 268 269

270 271 276 297 341 394

kroacutej 270 272wielkość 273 274 275

czytnik ekranowy 6 49 77 134 431

Ddefinicja 53 62 66deklaracja 230 243

DOCTYPE 180 181 197 315 323

Digital Rights Management Patrz DRM

DNS 8 9dokument 14 16domena 486dostawca usług internetowych

Patrz ISP

Kup książkę Poleć książkę

SKOROWIDZ

Dreamweaver 48DRM 212dźwięk 216

Eedytor

HTML 48wizualny 48

ekran 6dotykowy 290rozdzielczość 377rozmiar 376

element Patrz też znaczniklt-- --gt 181 197ltagt 76 77 78 84

185 440 479ltabbrgt 52ltacronymgt 52ltaddressgt 54ltarticlegt 431 432

434 436ltasidegt 431 435 439ltaudiogt 203 218

221 223ltbgt 44 101 185

228 360ltblockquotegt 49 51 369ltbr gt 47ltbuttongt 161ltcentergt 178ltcitegt 53ltcontentgt 439ltddgt 66ltdelgt 55ltdfngt 53ltdivgt 186 197 206 228

323 361 403 430 436 439 449

ltdlgt 66ltdtgt 66ltemgt 49 50 101

185 228ltfieldsetgt 163 169

343 349ltfigcaptiongt 119 421

438 443ltfiguregt 119 120 421

438 443ltfontgt 178

ltfootergt 431 432 439 443

ltformgt 150 158 168 173lth1gt 42 101 184 228

360 479ltheadgt 190 479ltheadergt 431 432

439 443lthgroupgt 437 443lthr gt 47ltigt 44 228 360ltiframegt 176ltiframegt 188 197ltimggt 98 101 123 178

185 228 360 410ltinputgt 151 152 154

161 165 166 167ltinsgt 55ltlabelgt 162 169 344ltlegendgt 163ltligt 64 65 184 332

333 360ltlinkgt 234 240 392

394 395ltmetagt 176ltmetagt 190 197ltnavgt 431 433ltolgt 64 332ltoptiongt 156ltpgt 22 43 101 184

228 323 360ltqgt 51ltsgt 55ltscriptgt 206 207ltsectiongt 432 436 443ltselectgt 156 157ltsourcegt 214 219ltspangt 187 197 228 344ltstrikegt 178ltstronggt 50ltstylegt 235ltsubgt 45ltsupgt 45lttablegt 130 136 141lttbodygt 134lttdgt 130 132 133

141 349lttextareagt 153lttfootgt 134 135

ltthgt 131 132 133 138 337 349

lttheadgt 134 135lttitlegt 479lttrgt 130 141ltugt 55ltulgt 65 184 323 332

333 360ltvideogt 203 208 209

212 213 215 221 223

blokowy 101 184 228 316 327 360 362 440

body 26 228 361cientilde 319dziecka 237grupowanie 439head 26HTML 19 20 21 23

24 58konstrukcyjny 360margines 306 307 360nachodzący na inny

363 368nawigacyjny 186 316 323

361 383 385 430 431 432 433 462 470

obramowanie 306 307 308 309 311 318 327 341 360

kolor 310styl 309szerokość 308 318zaokrąglenia 320

321 327pływający 363 369 370

372 403położenie 362 363

bezwzględne 362 367 368

ustalone 363 368względne 362 368

potomny 237przesunięcie 363pusty 47title 26ukrywanie 316 317

Kup książkę Poleć książkę

SKOROWIDZ

elementwewnątrzwierszowy 101

185 228 316 327 360 417 441

właściwość Patrz właściwość

wymiary 302 303 304wypełnienie 306 307

312 360wyśrodkowanie 314zawierający Patrz rodzic

em 273 275 282 302etykieta 340

FFirefox 6 157 212 319Fireworks 107 303 346Flash 200 202 203 206

216 217 221 223Flash Of Unstyled Content

Patrz FOUCFlash Of Unstyled Text

Patrz FOUTFlash Player 202Flash Video Converter 210FontSquirrel 277format

AVI 208CML 179Flash Video

Patrz format FLVFLV 201 210 215GIF 106 110 120

animowany 116przezroczysty 117

H264 208 210 212 215 221

JPEG 106 108 109 120MathML 179MP3 216 219MPEG 208Ogg Theora 208Ogg Vorbis 219PNG 106 110 111

przezroczysty 117 397QuickTime 208SVG 115 179SWF 202WebM 208 212 215 221Windows Media 208

formularz 144 146 148 150 169 173 229 330 340 342 343 349 355

metodaget 150post 150 158

pole Patrz poleFOUC 277FOUT 277

GGIMP 250Google Analytics 482 483

484 485gradient 418

Hhasło 152HSB 254HSL 254 255 261 310HSLA 254 255 261HTML 4 5 7 19 20 27 37

edytor Patrz edytor HTMLhistoria 178wersja 176 178

HTML4 52 53 178HTML5 7 52 178 428 441

443 449podkładka HTML5shim Patrz HTML5

podkładkaHyperText Markup Language 27

Patrz też HTML

IIllustrator 115 462InDesign 462inline frame Patrz

ramka pływającainterlinia 282Internet Explorer 6 51 212

303 312 313 314 315 323 396 440 443

Internet Service Provider Patrz ISP

ISP 9

JJavaScript 117 164 182

340 396 441 443 449

biblioteka 203 205jednostka em Patrz emjęzyk

XML Patrz XMLJavaScript Patrz JavaScript

Kkarta 26kerning 283klip wideo Patrz wideokod

HTML 19 20 34źroacutedłowy 48

kodowanie 208 214kolor 246 261 341

alfa Patrz alfaHSB Patrz HSBHSL Patrz HSLHSLA Patrz HSLAjasność 251 254 255jednolity 111kod szestnastkowy 248

250 251 261 310kontrast 252 261 419nasycenie 251 254 255nazwa 248 251 261odcientilde 251 254 255RGB Patrz RGB

komentarz 176 181 186 197CSS Patrz CSS komentarzwarunkowy 441

Llista 62 69 70 229

330 349definicji 62 66 70element 64nieuporządkowana 62 65

66 69 70 323 332numerowana Patrz

lista uporządkowanarozwijana 147 156

162 340

Kup książkę Poleć książkę

SKOROWIDZ

uporządkowana 62 64 69 70 332

wielokrotnego wyboru 157wypunktowana Patrz

lista nieuporządkowanazagnieżdżona 67 70

Łłącze 74 89 91 416 417

440 478tworzenie 76w obrębie witryny 79

Mmetoda

get 150post 150

mikroformat hCard 54Mozilla Firefox Patrz Firefox

Nnagłoacutewek 16 20 42 432

436 479grupa 437poziom 42

nieprzezroczystość 253

Oobraz 94 96 106 406 425

438 467animowany 116format Patrz formatpobieranie 118podpis 119rastrowy 115rozdzielczość 106 114tła 412 419umiejscowienie w kodzie 100wektorowy 115wymiary 99 106 112 114

118 408 410obszar przed zagięciem 378odstępu pomijanie 46odtwarzacz 208

audio 216Flash 210 221

Opera 6 212

PPaintneT 107PaintShop pro 107pasek przewijania 189

305 362Photoshop 107 116 250 462Photoshop Elements 107PixeImator 107platforma 390

960GS 390 391 392 397blogowa 7 32 486 489Grid System Patrz

platforma 960GShandlu elektronicznego 7 32

487 489plik

audio 216 218indexhtml 81przesyłanie 147 158

podmienianie 416pole

adresupoczty elektronicznej 166URL 166

daty 165etykieta 162grupowanie 343hasła 147przesyłania plikoacutew 147

158 162przycisk Patrz przycisktekstowe 341

jednowierszowe 146 147 162 340

wielowierszowe 147 153 162 340

weryfikacja 164wyboru 147 154 162wyroacutewnywanie 343 344

345 355wyszukiwania 167

pomijanie odstępoacutew 46Posterous 487protokoacuteł

FTP 488 489SSL 152

przeglądarka 6 241 340 440Chrome Patrz Chromedziwactwo 241 323

Firefox Patrz FirefoxInternet Explorer

Patrz Internet ExplorerMozilla Firefox Patrz Firefoxokno głoacutewne 27Opera Patrz OperaSafari Patrz Safari

przezroczystość 117 397 Patrz też nieprzezroczystość

przycisk 416graficzny 147 160opcji 147 154 162przesyłający 147 159

340 342pseudoelement 288

first-letter 288first-line 288

pseudoklasa 288 289active 289 290 417first-child 349focus 290 341hover 288 289 290 336

341 342 417last-child 349link 289visited 288 289

Rramka pływająca 188RealAudio 204reguła 226 230 238 243

font-face 270 276import 394

RGB 248 250 251 261RGBA 253 261rodzic 361 369 371 372

SSafari 6 53 157 158 167

212 319Scalable Vector Graphics

Patrz format SVGschemat pozycjonowania

362 363 364 365Search Engine Optimization

Patrz SEO

Kup książkę Poleć książkę

SKOROWIDZ

Secure Socket Layer Patrz protokoacuteł SSL

sekcja 436selektor 230 236 243

[$=] 291[=] 291[] 291[ =] 291[~=] 291[=] 291elementu

dziecka 237potomnego 237sąsiadującego 237

identyfikatora 237klasy 237ogoacutelny elementu 237typu 237uniwersalny 237

SEO 476 478 480 485serwer

poczty elektronicznej 487systemu nazw domen

Patrz DNSWWW 6 9 486

kopia zapasowa 486przepustowość 486przestrzentilde dyskowa 486

siatka 386 403960 pikseli 386 387

388 389 403sieć udostępniania treści

Patrz CDNskrypt

JavaScript 7 202SWFObject 206 210 211

217 221słowo kluczowe 478 479 480sortowanie kart 460sprajt 416 425stopka 432strona www

adres 479folder Patrz

strona www kataloghierarchia wizualna

464 466katalog 80

głoacutewny 81nadrzędny 81 83podrzędny 81 83

mapa 460optymalizacja pod kątem

wyszukiwania Patrz SEO

projektowanie 358 372 374 380 386 390 397 428 430 449 452 454 460 464 468 473

rozmiar 378siatka Patrz siatkastrona

docelowa 484wyjścia 484

struktura 80 358 372 374szkielet 462 473śledzenie ruchu 485tytuł 479układ 362 363 364 365

366 367 394 395 430 449 452 464

elastyczny 381 384grupowanie informacji 468o stałej szerokości

380 382wielokolumnowy 374

użytkownik Patrz użytkownikw nowym oknie

przeglądarki 85zawartość 464

symbol specjalny Patrz znak specjalny

system zarządzania treścią Patrz CMS

szablon 390

Ttabela 126 129 138 141

330 336 349 355długa 134 135 141kolor tła 137 337komoacuterka 129 130 134

337 355łączenie 132 133pusta 338

nagłoacutewek 131 134 135 337

stopka 134

szerokość 136obramowania 137

wiersz 130tapeta 421tekst 229 264

alternatywny 98 479czcionka Patrz czcionkadodany 55formatowanie 264interlinia 282kursywa 44 48 49 50

53 54 278linia pisma

bazowa 267goacuterna 267średnia 267

łącza 76podkreślony 55pogrubiony 44 48 50 278przekreślony 55usunięty 55uzupełniający 438wcięty 49 51 67 286wydłużenie

dolne 267 282goacuterne 267 282

wysokość x 267wyśrodkowanie 314zdezaktualizowany 55

TextEdit 30Tumblr 487

UUniform Resource Locator 78

Patrz też adres URLużytkownik 456 457

458 483

VVimeo 204 208 209

WWeb Developer Toolbar 347wideo 200 208 223 438wireframe Patrz

strona www szkielet

Kup książkę Poleć książkę

SKOROWIDZ

witryna Patrz strona wwwwłaściwość 231 243 320

important 238background 415background-attachment 413background-color 239 249

336 341 343background-image 94 341

412 418background-position

414 417background-repeat 413border 311 336 341 343border-collapse 339border-color 310border-image 318border-radius 320 321

341 343border-separate 339border-spacing 339 349border-style 309border-width 308box-shadow 319clear 371 373color 248 341 342 343cursor 346display 316 323 327dziedziczenie 239 312

313 349empty-cells 338 339float 362 369 370 373

397 403 410font-family 239 270

272 276font-size 273 282 341font-style 279font-weight 278height 302 408letter-spacing 283 336line-height 282 349list-style 335list-style-image 333list-style-position 334list-style-type 64 65

332 355margin 103 307 313

323 333 373margin-left 314

margin-right 314max-height 304max-width 303min-height 304min-width 303-moz-border-image 318-moz-border-radius 320-moz-box-shadow 319opacity 253overflow 304 305 373padding 103 307 312

323 336 343position

absolute 366fixed 367relative 365static 364

rgba 253text-align 284 314

336 337text-decoration 281text-indent 286text-shadow 287 319 342text-transform 280 336vertical-align 285visibility 317 327-webkit-border-image 318-webkit-border-radius 320-webkit-box-shadow 319width 302 323 336 343

369 373 373 408word-spacing 283

z-index 363 368WordPresscom 487wspoacutełczynnik odrzucentilde 484wtyczka 202 208wyszukiwarka 49 98 131

190 286 431 478 479 481 485

XXML 178

YYouTube 204 208 209

Zzdjęcie 96znacznik 37 Patrz też element

otwierający 19 20 22semantyczny 40 49strukturalny 40zamykający 19 20 23

znakrsquo Patrz znak prawy apostrofamp 192lsquo Patrz znak lewy apostrofldquo 192rdquo 192cent Patrz znak centapound Patrz znak funta szterlingayen Patrz znak jenaeuro Patrz znak eurotimes Patrz znak mnożeniadivide Patrz znak dzieleniacopy Patrz znak

praw autorskichreg Patrz znak

handlowy zarejestrowany

apostroflewy 192prawy 192

centa 192cudzysłowu 192dzielenia 192euro 192funta szterlinga 192handlowy 192

zarejestrowany 192jena 192mniejszości 192mnożenia 192praw autorskich 192specjalny 192trade Patrz znak handlowyukośnika 19 20większości 192

Żżądanie 6

Kup książkę Poleć książkę

Kup książkę Poleć książkę