Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00485 008041 10478303 na godz. na dobę w sumie
HTML i CSS. Zaprojektuj i zbuduj witrynę WWW - książka
HTML i CSS. Zaprojektuj i zbuduj witrynę WWW - książka
Autor: Liczba stron: 506
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-6520-4 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> css
Porównaj ceny (książka, ebook, audiobook).

 

Książka zdobyła Nagrodę im. Hanny i Jerzego Kuryłowiczów edycji 2014, za najlepsze tłumaczenie książki technicznej dla Pana Piotra Rajcy!

 

 

Twój przewodnik po świecie webmasterów!

 

Umiejętność projektowania i budowania stron WWW jest obecnie bardzo ceniona. Firma, organizacja, artysta, a często nawet osoba prywatna chcą mieć własną witrynę. I mimo że liczba stron w sieci jest wprost niewyobrażalna, wciąż jest tam miejsce na nowe! Dlatego odpowiedz sobie na pytanie: czy chcesz zbudować swoją własną witrynę, poszerzyć swoje kwalifikacje i zdobyć lepszą pracę? Tak? To zapraszamy do lektury!

Ta pozycja jest doskonałym przewodnikiem, który wprowadzi Cię w świat projektowania i budowania stron WWW. W trakcie lektury dowiesz się też, jak uzyskać dostęp do serwera i opublikować swoją witrynę. Cała książka została podzielona na trzy części. Pierwsza poświęcona jest językowi HTML. Z nią poznasz niezbędne znaczniki oraz techniki tworzenia układu strony. Druga została poświęcona kaskadowym arkuszom stylów (CSS). Dzięki nim Twoja witryna nabierze kształtów i kolorów. Zobacz, co potrafi CSS3 - jeszcze niedawno takie cuda nie śniły się webmasterom. Ostatnia część to praktyczne porady oraz wskazówki, które pozwolą Ci uniknąć najczęstszych problemów. Ta książka to Twój klucz do świata webmasterów!

 

Dzięki tej książce:

  • opanujesz tajniki i składnię języka HTML
  • poznasz niesamowite możliwości CSS3
  • unikniesz typowych problemów
  • opublikujesz swoją pierwszą witrynę WWW na serwerze

Poznaj tajniki projektowania i budowania stron WWW!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

• Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność SPIS TREśCI Formularze Wprowadzenie Rozdział 1. Struktura Rozdział 2. Tekst Rozdział 3. Listy Rozdział 4. Łącza Rozdział 5. Obrazy Rozdział 6. Tabele Rozdział 7. Rozdział 8. Dodatkowe elementy HTML Rozdział 9. Flash, wideo i audio Rozdział 10. Prezentacja CSS Rozdział 11. Kolor Rozdział 12. Tekst Rozdział 13. Pudełka elementów Rozdział 14. Listy, tabele i formularze Rozdział 15. Układ Rozdział 16. Obrazy Rozdział 17. Układ w HTML5 Rozdział 18. Proces i projekt Rozdział 19. Informacje praktyczne Skorowidz 1 10 38 60 72 92 124 142 174 198 224 244 262 298 328 356 404 426 450 474 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ądunowychelementówHTML5 przy użyciustylów. Kup książkęPoleć książkę HTML5wprowadzazbiórnowych elementówułatwiającychdefiniowanie strukturystrony. Zostałyoneopisanew osobnymrozdziale(a nieprzyokazji prezentowaniainnychelementówHTMLprzedstawionych we wcześniejszejczęściksiążki),gdyżteraz,kiedyjużwiemy, jak określaćukładstronprzyużyciuarkuszystylów,łatwiej będzienamzrozumieć,jaknależyjestosować.Te nowe elementybędąodgrywałyznaczącąrolęw tworzeniu nowoczesnychukładówstron.W tymrozdziale: • PoznamynoweelementyHTML5służącedookreślania układustronorazichzastosowania. • Dowiemysię,dlaczegostanowiąużytecznąalternatywę dla elementów div . • Dowiemysię,jaksprawić,bystarszeprzeglądarki rozpoznawałytenoweelementy. PodobniejakwszystkienowościwprowadzanedoHTML5 i CSS3,takżetenoweelementymogąsięjeszczezmienić, jednaksąonejużpowszechnieużywaneprzeztwórcówstron i prawdopodobnietakżeCzytelnikbędziechciał z nichskorzystać. 428 UKŁADW HTML5 Kup książkęPoleć książkę UKŁADW HTML5 429 Kup książkęPoleć książkę TrADyCyJnEUKŁADyHTML PrzezwielelattwórcystronWWWużywalielementów div do grupowaniapowiązanychzesobąelementówstron(takich jak elementytworzącenagłówek,artykuł,stopkęlubpasekboczny). Dookreślaniafunkcji,jakieteelementy div pełniąnastronie, używanebyłyatrybutyclassorazid. body div id= page div id= header div id= nav div id= content div class= article div id= sidebar div class= article div id= footer Z prawejstronyprzedstawiony zostałprzykładdosyćczęsto spotykanegoukładustrony (stosowanynajczęściej na blogach). W górnejczęścistronyznajduje sięnagłówekzawierającylogo orazpodstawoweelementy nawigacyjne. Poniżejnagłówkaznajdujesię jeden(lubwięcej)artykułlub wpis.Czasamiumieszczanesą takżekrótkiepodsumowania z łączamiprowadzącymi do konkretnychwpisów. Z prawejstronyumieszczony jestpasekboczny(zawierający np.formularzdowyszukiwania, łączadoinnych,najnowszych artykułówczysekcjiwitryny, a byćmożenawetdoreklamy). Tworząctakąwitrynę,autorzy zazwyczajumieszczająjej poszczególnegłównesekcje wewnątrzelementów div , określającichprzeznaczenie przyużyciuatrybutówclass orazid. 430 UKŁADW HTML5 Kup książkęPoleć książkę nOWEELEMEnTyHTML5 SŁUżąCEDOTWOrZEniA UKŁADóWSTrOn W językuHTML5wprowadzonyzostałzbiórnowychelementów służącychdooznaczaniafragmentówtworzonychstron.nazwy tychelementówokreślająrodzajzawartości,jakąnależyw nich umieszczać.Choćmogąsięjeszczezmieniać,niepowstrzymuje to autorówstronprzedichstosowaniem. body div id= page header nav div id= content article article footer aside Przykładprzedstawionyobok madokładnietakąsamą strukturęjaktenzamieszczony napoprzedniejstronie. niemniejwielespośródużytych wcześniejelementów div zostałozastąpionychnowymi elementamiHTML5. i taknagłówekzostał umieszczonywewnątrz elementu header ,elementy nawigacyjneznalazłysię w elemencie nav ,a artykuły —wewnątrzodrębnych elementów article . Elementytezostałystworzone poto,byautorzystronmogli za ichpomocąopisywać strukturętworzonychstron. Czytnikiekranowenp.mogą pozwolićużytkownikom na ignorowanienagłówków i stopeki prezentowaćjedynie głównązawartośćstron. Podobniewyszukiwarkimogą nadawaćwiększeznaczenie zawartościelementów article niżelementów header i  footer .Sądzę, żeCzytelniktakżeprzyzna, że zastosowanietych elementówułatwiaanalizękodu źródłowegostrony. UKŁADW HTML5 431 Kup książkęPoleć książkę nAgŁóWKii STOPKi header footer Elementy header i  footer mogąbyćużywane do tworzenia: • głównegonagłówkai stopki prezentowanychodpowiednio nagórzei nadolekażdej stronywitryny; • nagłówkai stopki umieszczanych w poszczególnych elementach article oraz  section . W tymprzykładzieelement header zawieralogo witrynyorazgłówneelementy nawigacyjne.Z koleielement footer zawierainformacje o prawachautorskichoraz odnośnikidostronz polityką prywatnościi warunkami korzystaniazestrony.Elementy header i  footer można takżeumieszczaćwewnątrz elementów article oraz section .W takich przypadkachpowinnyone zawieraćodpowiednionagłówek i stopkękonkretnegoartykułu lubsekcjistrony. Przykładowonastronie zawierającejkilkawpisów blogowychkażdyz nichmoże byćumieszczonyw osobnej sekcji.W takimprzypadku w elemencie header można umieścićtytułwpisuorazjego datę,natomiastw elemencie footer —odnośniki 432 UKŁADW HTML5 rodzial-17/html5-layout.html HTML header h1 Kuchnia Yoko /h1 nav ul li a href=”” class=”current” strona główna /a /li li a href=”” zajęcia /a /li li a href=”” catering /a /li li a href=”” o nas /a /li li a href=”” kontakt /a /li /ul /nav /header rodzial-17/html5-layout.html HTML footer copy; 2011 Kuchnia Yoko /footer umożliwiającepodzielenie sięartykułemw portalach społecznościowych. Wartozauważyć,żewszystkie przykładyprzedstawionew tym rozdzialepochodząz jednego plikuo nazwiehtml5-layout. html. Kup książkęPoleć książkę nAWigACJA nav HTML rodzial-17/html5-layout.html nav ul li a href=”” class=”current” strona główna /a /li li a href=”” zajęcia /a /li li a href=”” catering /a /li li a href=”” o nas /a /li li a href=”” kontakt /a /li /ul /nav Element nav jest przeznaczonydoumieszczania głównychblokównawigacyjnych witryny,takichjaklistałączy do jejgłównychdziałów. Wróćmydoprzykładowej stronybloga:gdybyśmychcieli zakończyćartykułlistąłączy doinnychpowiązanychz nim wpisów,niemożnabyichbyło uznaćzagłówneelementy nawigacyjne,a cozatymidzie, nienależałobyichumieszczać w elemencie nav . W czasiekiedypowstawałata książka,projektanciużywający językaHTML5zdecydowali, żeelement nav będzie używanydoumieszczania łączywyświetlanychu dołu każdejzestronwitryny (czylidostronzawierających politykęprywatności,warunki korzystania,informacje o ułatwieniachdostępuitd.). Wciążjednakniewiadomo, czytakierozwiązanie zyskapopularnośći będzie powszechniestosowane. UKŁADW HTML5 433 Kup książkęPoleć książkę ArTyKUŁy article Element article pełni funkcjępojemnika,w którym sąumieszczanedowolnesekcje strony,przyczympowinnyone byćstosunkowoautonomiczne i nadawaćsiędozebrania w większągrupę. Mogątobyćposzczególne artykułylubwpisydobloga, komentarzelubwpisynaforum czywszelkieinneniezależne fragmentytreści. Jeślistronazawierakilka artykułów(albonawet podsumowaniakilkuartykułów), tokażdyz nichpowinienzostać umieszczonyw osobnym elemencie article . Elementy article można zagnieżdżać,np.wpis do blogazostanieumieszczony w jednymelemencie article , a poszczególnekomentarze dotegowpisuznajdąsię w kolejnychelementach. rodzial-17/html5-layout.html HTML article figure img src=”images/bok-choi.jpg” alt=”Bok Choi” / figcaption Bok choi /figcaption /figure hgroup h2 Japońska kuchnia wegetariańska /h2 h3 Kurs pięciotygodniowy /h3 /hgroup p Podczas pięciotygodniowego kursu będącego wprowadzeniem do tradycyjnej japońskiej kuchni wegetariańskiej uczymy przyrządzania wybranych potraw z ryżu i makaronu. /p /article article figure img src=”images/teriyaki.jpg” alt=”Sos teriyaki” / figcaption Sos teriyaki /figcaption /figure hgroup h2 Mistrzowie sosów /h2 h3 Kurs jednodniowy /h3 /hgroup p Intensywny jednodniowy kurs, na którym uczymy przyrządzania najlepszych sosów używanych w kuchni japońskiej. /p /article 434 UKŁADW HTML5 Kup książkęPoleć książkę SEKCJEbOCZnE aside HTML rodzial-17/html5-layout.html aside section class=”popular-recipes” h2 Popularne przepisy /h2 a href=”” Yakitori (grillowany kurczak) /a a href=”” Tsukune (mielone kotleciki z kurczaka) /a a href=”” Okonomiyaki (smaczne naleśniki) /a a href=”” Mizutaki (gulasz z kurczaka) /a /section section class=”contact-details” h2 Kontakt /h2 p Kuchnia Yoko br / al. Wegetariańska 27 br / Warszawa /p /section /aside Element aside makilka zastosowań,zależnych odtego,czyznajdujesię wewnątrzelementu article , czy poza nim. W przypadkuumieszczenia elementu aside wewnątrz elementu article powinien onzawieraćinformacje powiązanez artykułem, leczniekonieczniez jego podstawowymznaczeniem. Zatakielementzwiązany z artykułemmożnabyuznać np.wyróżnionycudzysłów lub słownik. Jeślinatomiastelement aside jestumieszczony pozaelementem article , to służyjakopojemnikdla treścizwiązanychz całą stroną.Możnabyw nim umieścićnp. łączadoinnych sekcjiwitryny,listęostatnich publikacji,polewyszukiwania alboostatniewpisyautora na Twitterze. UKŁADW HTML5 435 Kup książkęPoleć książkę rodzial-17/html5-layout.html HTML section class=”popular-recipes” h2 Popularne przepisy /h2 a href=”” Yakitori (grillowany kurczak) /a a href=”” Tsukune (mielone kotleciki z kurczaka) /a a href=”” Okonomiyaki (smaczne naleśniki) /a a href=”” Mizutaki (gulasz z kurczaka) /a /section section class=”contact-details” h2 Kontakt /h2 p Kuchnia Yoko br / al. Wegetariańska 27 br / Warszawa /p /section SEKCJE section Element section służy do grupowaniainnych powiązanychzesobą elementów.Zazwyczajkażda takasekcjamawłasny nagłówek. Przykładowonastroniegłównej witrynymożesięznaleźć kilkaelementów section zawierającychróżnesekcje strony,takiejaknajnowsze publikacje,najpopularniejsze produktyorazformularze dosubskrypcjibiuletynu informacyjnego. Ponieważelement section grupujepowiązanezesobą elementy,możnaw nim umieścićkilkaelementów article reprezentujących artykułypoświęconetejsamej tematycelubmającetosamo przeznaczenie. Alternatywnie,jeślistrona zawierabardzodługiartykuł, tokorzystającz elementu section ,możnapodzielić jegotreśćnakilkafragmentów. Elementu section nie należyużywaćjakopojemnika zawierającegocałątreśćstrony (chybażecałąjejzawartość stanowijeden,spójnyfragment treści).Jeśliszukamyelementu, którynadałbysiędoroli pojemnikazawierającego całąstronę,w tymcelu wciążnajlepiejzastosować element  div . 436 UKŁADW HTML5 Kup książkęPoleć książkę grUPynAgŁóWKóW hgroup HTML rodzial-17/html5-layout.html hgroup h2 Japońska kuchnia wegetariańska /h2 h3 Kurs pięciotygodniowy /h3 /hgroup niektórzysugerują,że element hgroup maniewiele zastosowańoprócztego, że możnagoużyćdookreślania stylów.niemniejcieszysię popularnościąwśródtych projektantów,którzysą zwolennikamigrupowania nagłówkagłównegooraz nagłówkaniższegostopnia (gdyżobamogąstanowić integralneczęścinagłówka). Element hgroup służy do grupowaniaodjednego do kilkuelementów h1 – h6 , takbybyłyonetraktowane jako jedennagłówek. Elementu hgroup można by użyćdopodaniazarówno tytułuumieszczonego w elemencie h2 , jak i podtytułuumieszczonego w nagłówku h3 . Tenelementzostałprzyjęty z mieszanymiuczuciami. KiedytwórcyjęzykaHTML5 zaproponowaligoporaz pierwszy,pojawiłysię skargi,któredoprowadziły dousunięciagoz propozycji standardu.niecopóźniejjednak pewneosobyzmieniłyzdanie i element hgroup ponownie znalazłsięw propozycji HTML5.niektórzytwórcy stronnielubiągoi preferują umieszczaniepodtytułów wewnątrzelementów p (używająprzy tymatrybutu określającego,że danyelement jestnagłówkiemniższego stopnia). UKŁADW HTML5 437 Kup książkęPoleć książkę iLUSTrACJE figure figcaption rodzial-17/html5-layout.html HTML figure img src=”images/bok-choi.jpg” alt=”Bok choi” / figcaption Bok choi /figcaption /figure W przedstawionymprzykładzie widać,żeelement figure zostałdodanydoartykułu ( article ). Element figure zostałjuż przedstawionyw rozdziale5. poświęconymobrazom.Może onzawieraćdowolnetreści, do którychodwołujesięgłówna treśćartykułu(nietylkoobrazy). Koniecznienależyzauważyć, żeartykułniepowinientracić znaczeniaw przypadku przesunięciazawartości elementu figure (doinnej częścistronylubnawet przeniesieniagonainnąstronę). Dlategonależygoużywać wyłączniew sytuacjach, gdy w treściartykułuznajduje sięjedynieodwołanie do elementu(a niegdystanowi onintegralnączęśćtejtreści). Otokilkaprzykładów zastosowańelementu figure : • obrazy, • klipywideo, • wykresy, • diagramy, • listingikodu, • tekstyuzupełniającegłówną treśćartykułu. W elemencie figure należytakżeumieszczać element figcaption służący do podaniatekstowegoopisu zawartościelementu figure . 438 UKŁADW HTML5 Kup książkęPoleć książkę GrUPoWAniE ELEMEnTóW W sEKcjE HTML rodzial-17/html5-layout.html div class=”wrapper” header h1 Kuchnia Yoko /h1 nav !-- zawartość paska nawigacyjnego -- /nav /header section class=”courses” !-- zawartość sekcji -- /section aside !-- zawartość paska bocznego -- /aside footer !-- zawartość stopki -- /footer /div !-- .wrapper -- Może się wydawać dziwne, że po prezentacji nowych elementów HTML5 wracamy do elementu div (w końcu te nowe elementy mają go zastępować). Element div wciąż pozostaje ważnym sposobem grupowania powiązanych ze sobą elementów 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 div . W tym przykładzie został on zastosowany jako pojemnik dla całej zawartości strony. Pewnie niektórzy zastanawiają się, dlaczego nie ma elementu content , w którym można by umieścić główną zawartość strony. Wynika to z faktu, że wszystko, co znajduje się poza elementami header , footer oraz aside , można uznać za główną część strony. UKŁAD W HTML5 439 Kup książkęPoleć książkę UMiESZCZAniEELEMEnTóW bLOKOWyCHW ŁąCZACH HTML5pozwalaumieszczać wewnątrzelementów a dowolneelementyblokowe wrazz zawartością.Dzięki temucałybloktreścimożna przekształcićw łącze. niejesttonowyelement wprowadzonydoHTML5, niemniejwewcześniejszych wersjachjęzykatakie rozwiązaniebyłouznawane za nieprawidłowe. Wartozwrócićuwagęnato, że kodtejstronyróżnisię niecoodkodupozostałych przykładówprezentowanych w tymrozdziale. rodzial-17/html5-layout.html HTML a href=”introduction.html” article figure img src=”images/bok-choi.jpg” alt=”Bok Choi” / figcaption Bok choi /figcaption /figure hgroup h2 Japońska kuchnia wegetariańska /h2 h3 Kurs pięciotygodniowy /h3 /hgroup p Podczas pięciotygodniowego kursu będącego wprowadzeniem do tradycyjnej japońskiej kuchni wegetariańskiej uczymy przyrządzania wybranych potraw z ryżu i makaronu. /p /article /a 440 UKŁADW HTML5 Kup książkęPoleć książkę UŁATWiEniESTArSZyM PrZEgLąDArKOM ZrOZUMiEniA nOWEgOKODU CSS rodzial-17/ header, section, footer, aside, nav, article, figure { display: block;} HTML rodzial-17/html5-layout.html !--[if lt IE 9] script src=”http://html5shiv.googlecode.com/svn/ trunk/html5.js” /script ![endif]-- niestety,torozwiązanie wymaga,byużytkownicy korzystającyz przeglądarki iE8lubwersjiwcześniejszych mieliwłączonąobsługęjęzyka JavaScript.Jeśliobsługata będziewyłączona,niebędą w staniezobaczyćzawartości nowychelementówHTML5. Starszeprzeglądarki,którenie rozpoznająnowychelementów HTML5,będąjeautomatycznie traktowaćjakoelementy wewnątrzwierszowe.Dlatego abyimpomóc,doużywanego arkuszastylównależydodać przedstawionąobokregułę, któraokreślawszystkiete elementyjakoblokowe. Dodatkowopierwsząwersją przeglądarkiinternetExplorer, którapozwalałanakojarzenie stylówz tyminowymi elementamiHTML5,jest iE9. Abyokreślićwyglądtych elementówprzyużyciustylów wewcześniejszychwersjach internetExplorera,należyużyć prostegoskryptuJavaScript nazywanegopodkładką HTML5 (ang.HTML5 shim). Abykorzystaćz tego rozwiązania,nietrzebaznać językaJavaScript.Wystarczy dołączyćdoswojejstrony skryptprzechowywany na serwerachgoogle.Możnago umieścićwewnątrzkomentarzy warunkowych,sprawdzających, czyużywanawersja przeglądarkijestwcześniejsza odiE9(stądzastosowanie wyrażenialt IE 9). UKŁADW HTML5 441 Kup książkęPoleć książkę 442 UKŁADW HTML5 Kup książkęPoleć książkę PrZyKŁAD UKŁADWHTML5 Tenprzykładprzedstawiawitrynę poświęconągotowaniu—jejstruktura zostałautworzonaprzywykorzystaniu nowychelementówHTML5 (a nieelementów div ). nagłówekorazstopkastronyzostałyumieszczoneodpowiednio w elementach header oraz footer .informacjeo zajęciach zostałyzgrupowanew elemencie section z atrybutemclass o wartościcourses(którymaodróżniaćgoodpozostałych elementów section umieszczonychnastronie).Pasekboczny zostałumieszczonyw elemencie aside . Każdyz kursówzostałprzedstawionyw osobnymelemencie article i uzupełnionyelementami figure oraz figcaption zawierającymiobrazek.nagłówekkażdegokursumadodatkowy podnagłówek,a obateelementysąumieszczonewewnątrzelementu hgroup .Pasekbocznyzawieralistęprzepisóworaz informacje kontaktowe,umieszczonew dwóchosobnychelementach  section . WyglądcałejstronyjestokreślanyprzyużyciuCSS.Jedyna różnicapoleganatym,żew selektorachzostałyużytenowe elementy HTML5,copozwalastworzyćregułyodnoszącesię do tychelementów.Abyarkuszstylówdziałałw starszychwersjach przeglądarekinternetExplorer(wcześniejszychodwersji9),strona zawieraodwołaniedospecjalnegoskryptuJavaScript(dostępnego naserwerachfirmygoogle),umieszczonew komentarzach warunkowych. UKŁADW HTML5 443 Kup książkęPoleć książkę PrZyKŁAD UKŁADW HTML5 !DOCTYPE html html head title Układ w HTML5 /title style type=”text/css” header, section, footer, aside, nav, article, figure, figcaption { display: block;} body { color: #666666; background-color: #f9f8f6; background-image: url(“images/dark-wood.jpg”); background-position: center; font-family: Georgia, Times, serif; line-height: 1.4em; margin: 0px;} .wrapper { width: 940px; margin: 20px auto 20px auto; border: 2px solid #000000; background-color: #ffffff;} header { height: 160px; background-image: url(images/header.jpg);} 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 { 444 UKŁADW HTML5 Kup książkęPoleć książkę color: #ffffff;} nav li a:hover, nav li a.current { color: #000000;} section.courses { 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 a:hover { color: #985d6a; background-color: #efefef;} a { color: #de6581; text-decoration: none;} h1, h2, h3 { font-weight: normal;} h2 { PrZyKŁAD UKŁADW HTML5 UKŁADW HTML5 445 Kup książkęPoleć książkę PrZyKŁAD UKŁ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;} /style !--[if lt IE 9] script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js” /script ![endif]-- /head body div class=”wrapper” header h1 Kuchnia Yoko /h1 nav ul li a href=”” class=”current” strona główna /a /li li a href=”” zajęcia /a /li li a href=”” catering /a /li li a href=”” o nas /a /li li a href=”” kontakt /a /li /ul /nav /header section class=”courses” article figure img src=”images/bok-choi.jpg” alt=”Bok choi” / figcaption Bok choi /figcaption /figure hgroup h2 Japońska kuchnia wegetariańska /h2 h3 Kurs pięciotygodniowy /h3 /hgroup 446 UKŁADW HTML5 Kup książkęPoleć książkę PrZyKŁAD UKŁADW HTML5 p Podczas pięciotygodniowego kursu będącego wprowadzeniem do tradycyjnej japońskiej kuchni wegetariańskiej uczymy przyrządzania wybranych potraw z ryżu i makaronu. /p /article article figure img src=”images/teriyaki.jpg” alt=”Sos teriyaki” / figcaption Sos teriyaki /figcaption /figure hgroup h2 Mistrzowie sosów /h2 h3 Kurs jednodniowy /h3 /hgroup p Intensywny jednodniowy kurs, na którym uczymy przyrządzania najlepszych sosów używanych w kuchni japońskiej. /p /article /section aside section class=”popular-recipes” h2 Popularne przepisy /h2 a href=”” Yakitori (grillowany kurczak) /a a href=”” Tsukune (mielone kotleciki z kurczaka) /a a href=”” Okonomiyaki (smaczne naleśniki) /a a href=”” Mizutaki (gulasz z kurczaka) /a /section section class=”contact-details” h2 Kontakt /h2 p Kuchnia Yoko br / al. Wegetariańska 27 br / Warszawa /p /section /aside footer copy; 2011 Kuchnia Yoko /footer /div !-- .wrapper -- /body /html UKŁADW HTML5 447 Kup książkęPoleć książkę Kup książkęPoleć książkę PODSUMOWAniE UKŁADW HTML5 X noweelementyHTML5określająprzeznaczenie różnychfragmentówstronWWWi opisują ich strukturę. X Tenoweelementyułatwiajązrozumieniekodu (w porównaniuzestosowanymiwcześniej elementami  div ). X Starszeprzeglądarki,którenierozumiejąjęzyka HTML5,należypoinstruować,którez tychnowych elementówsąelementamiblokowymi. X AbynoweelementyHTML5działaływ przeglądarce iE8(orazwersjachwcześniejszych),koniecznejest użycieskryptuJavaScriptdostępnegonaserwerach firmygoogle. Kup książkęPoleć książkę Kup książkęPoleć książkę Skorowidz Kup książkęPoleć książkę A Adobe Fireworks, Patrz: Fireworks Adobe Illustrator, Patrz: Illustrator Adobe Photoshop, Patrz: Photoshop adres IP, 9 poczty elektronicznej, 84 URL, 150, 479 bezwzględny, 78 względny, 79, 82, 91 AJAX, 216 akapit, 22, 43 alfa, 253, 255 Android, 212 animacja, 7, 200, 206, 223, 281 arkusz stylów kaskadowy, Patrz: CSS zewnętrzny, 235, 240 atrybut, 37 action, 150 align, 102, 410 alt, 98, 120, 123, 160, 478, 479 autoplay, 213, 218 bgcolor, 137 border, 137 cellpadding, 136 cellspacing, 136 checked, 154, 155 cite, 51 class, 176, 183, 186, 197, 288, 430, 443 codecs, 214 cols, 153 colspan, 132, 138, 141 content, 190 controls, 213, 218 format, 162 frameborder, 189 globalny, 176, 182 height, 99, 160, 188, 213 href, 76, 78, 86, 87, 91, 234 mailto:, 84 target, 85 SKOROWIDZ http-equiv, 190 id, 86, 87, 91, 150, 162, 176, 182, 186, 197, 206, 237, 430 lang, 24 loop, 213, 218 maxlength, 151, 152 method, 150, 158 multiple, 157 name, 151, 152, 154, 155, 156, 159, 190 nazwa, 24 placeholder, 167 poster, 213 preload, 213, 218 rel, 234 required, 164 rows, 153 rowspan, 133, 141 scrolling, 189 seamless, 189 selected, 156 size, 151, 152, 157 src, 98, 123, 160, 188, 213, 214, 218, 219 style, 235 title, 52 title, 98, 120 type, 64, 65, 214, 219 checkbox, 155 date, 165 email, 166 file, 158 hidden, 161 image, 160 password, 152 radio, 154 search, 166 submit, 159 text, 151 text/css, 234 url, 166 value, 154, 155, 156, 159 wartość, 24 width, 99, 136, 160, 188, 213 audio, 200 autor, 54, 190 B bezpieczeñstwo, 152 browser quirk, Patrz: przeglądarka dziwactwo C CDN, 277 Chrome, 6, 53, 212, 213, 319, 346 cień, 287, 319, 342 CMS, 7, 32, 48, 487 szablon, 32, 33 Content Delivery Network, Patrz: CDN CSS, 51, 64, 65, 226, 230, 238, 243, 327 błąd, Patrz: przeglądarka dziwactwo komentarz, 248 platforma, Patrz: platforma reguła, Patrz: reguła schemat pozycjonowania, Patrz: schemat pozycjonowania wersja, 241 cytat, 51 czcionka, 266, 267, 268, 269, 270, 271, 276, 297, 341, 394 krój, 270, 272 wielkość, 273, 274, 275 czytnik ekranowy, 6, 49, 77, 134, 431 D definicja, 53, 62, 66 deklaracja, 230, 243 DOCTYPE, 180, 181, 197, 315, 323 Digital Rights Management, Patrz: DRM DNS, 8, 9 dokument, 14, 16 domena, 486 dostawca usług internetowych, Patrz: ISP Kup książkęPoleć książkę Dreamweaver, 48 DRM, 212 dźwięk, 216 E edytor HTML, 48 wizualny, 48 ekran, 6 dotykowy, 290 rozdzielczość, 377 rozmiar, 376 element, Patrz też: znacznik !-- -- , 181, 197 a , 76, 77, 78, 84, 185, 440, 479 abbr , 52 acronym , 52 address , 54 article , 431, 432, 434, 436 aside , 431, 435, 439 audio , 203, 218, 221, 223 b , 44, 101, 185, 228, 360 blockquote , 49, 51, 369 br / , 47 button , 161 center , 178 cite , 53 content , 439 dd , 66 del , 55 dfn , 53 div , 186, 197, 206, 228, 323, 361, 403, 430, 436, 439, 449 dl , 66 dt , 66 em , 49, 50, 101, 185, 228 fieldset , 163, 169, 343, 349 figcaption , 119, 421, 438, 443 figure , 119, 120, 421, 438, 443 font , 178 footer , 431, 432, 439, 443 form , 150, 158, 168, 173 h1 , 42, 101, 184, 228, 360, 479 head , 190, 479 header , 431, 432, 439, 443 hgroup , 437, 443 hr / , 47 i , 44, 228, 360 iframe , 176 iframe , 188, 197 img , 98, 101, 123, 178, 185, 228, 360, 410 input , 151, 152, 154, 161, 165, 166, 167 ins , 55 label , 162, 169, 344 legend , 163 li , 64, 65, 184, 332, 333, 360 link , 234, 240, 392, 394, 395 meta , 176 meta , 190, 197 nav , 431, 433 ol , 64, 332 option , 156 p , 22, 43, 101, 184, 228, 323, 360 q , 51 s , 55 script , 206, 207 section , 432, 436, 443 select , 156, 157 source , 214, 219 span , 187, 197, 228, 344 strike , 178 strong , 50 style , 235 sub , 45 sup , 45 table , 130, 136, 141 tbody , 134 td , 130, 132, 133, 141, 349 textarea , 153 tfoot , 134, 135 th , 131, 132, 133, 138, 337, 349 thead , 134, 135 title , 479 tr , 130, 141 u , 55 ul , 65, 184, 323, 332, 333, 360 video , 203, 208, 209, 212, 213, 215, 221, 223 blokowy, 101, 184, 228, 316, 327, 360, 362, 440 body, 26, 228, 361 cieñ, 319 dziecka, 237 grupowanie, 439 head, 26 HTML, 19, 20, 21, 23, 24, 58 konstrukcyjny, 360 margines, 306, 307, 360 nachodzący na inny, 363, 368 nawigacyjny, 186, 316, 323, 361, 383, 385, 430, 431, 432, 433, 462, 470 obramowanie, 306, 307, 308, 309, 311, 318, 327, 341, 360 kolor, 310 styl, 309 szerokość, 308, 318 zaokrąglenia, 320, 321, 327 pływający, 363, 369, 370, 372, 403 położenie, 362, 363 bezwzględne, 362, 367, 368 ustalone, 363, 368 względne, 362, 368 potomny, 237 przesunięcie, 363 pusty, 47 title, 26 ukrywanie, 316, 317 SKOROWIDZ Kup książkęPoleć książkę element wewnątrzwierszowy, 101, 185, 228, 316, 327, 360, 417, 441 właściwość, Patrz: właściwość wymiary, 302, 303, 304 wypełnienie, 306, 307, 312, 360 wyśrodkowanie, 314 zawierający, Patrz: rodzic em, 273, 275, 282, 302 etykieta, 340 F Firefox, 6, 157, 212, 319 Fireworks, 107, 303, 346 Flash, 200, 202, 203, 206, 216, 217, 221, 223 Flash Of Unstyled Content, Patrz: FOUC Flash Of Unstyled Text, Patrz: FOUT Flash Player, 202 Flash Video Converter, 210 FontSquirrel, 277 format AVI, 208 CML, 179 Flash Video, Patrz: format FLV FLV, 201, 210, 215 GIF, 106, 110, 120 animowany, 116 przezroczysty, 117 H264, 208, 210, 212, 215, 221 JPEG, 106, 108, 109, 120 MathML, 179 MP3, 216, 219 MPEG, 208 Ogg Theora, 208 Ogg Vorbis, 219 PNG, 106, 110, 111 przezroczysty, 117, 397 QuickTime, 208 SVG , 115, 179 SWF, 202 WebM, 208, 212, 215, 221 Windows Media, 208 SKOROWIDZ formularz, 144, 146, 148, 150, 169, 173, 229, 330, 340, 342, 343, 349, 355 metoda get, 150 post, 150, 158 pole, Patrz: pole FOUC, 277 FOUT, 277 G GIMP, 250 Google Analytics, 482, 483, 484, 485 gradient, 418 H hasło, 152 HSB, 254 HSL, 254, 255, 261, 310 HSLA, 254, 255, 261 HTML, 4, 5, 7, 19, 20, 27, 37 edytor, Patrz: edytor HTML historia, 178 wersja, 176, 178 HTML4, 52, 53, 178 HTML5, 7, 52, 178, 428, 441, 443, 449 podkładka, HTML5 shim, Patrz: HTML5 podkładka HyperText Markup Language, 27, Patrz też: HTML I Illustrator, 115, 462 InDesign, 462 inline frame, Patrz: ramka pływająca interlinia, 282 Internet Explorer, 6, 51, 212, 303, 312, 313, 314, 315, 323, 396, 440, 443 Internet Service Provider, Patrz: ISP ISP, 9 J JavaScript, 117, 164, 182, 340, 396, 441, 443, 449 biblioteka, 203, 205 jednostka em, Patrz: em język XML, Patrz: XML JavaScript, Patrz: JavaScript K karta, 26 kerning, 283 klip wideo, Patrz: wideo kod HTML, 19, 20, 34 źródłowy, 48 kodowanie, 208, 214 kolor, 246, 261, 341 alfa, Patrz: alfa HSB, Patrz: HSB HSL, Patrz: HSL HSLA, Patrz: HSLA jasność, 251, 254, 255 jednolity, 111 kod szestnastkowy, 248, 250, 251, 261, 310 kontrast, 252, 261, 419 nasycenie, 251, 254, 255 nazwa, 248, 251, 261 odcieñ, 251, 254, 255 RGB, Patrz: RGB komentarz, 176, 181, 186, 197 CSS, Patrz: CSS komentarz warunkowy, 441 L lista, 62, 69, 70, 229, 330, 349 definicji, 62, 66, 70 element, 64 nieuporządkowana, 62, 65, 66, 69, 70, 323, 332 numerowana, Patrz: lista uporządkowana rozwijana, 147, 156, 162, 340 Kup książkęPoleć książkę uporządkowana, 62, 64, 69, 70, 332 wielokrotnego wyboru, 157 wypunktowana, Patrz: lista nieuporządkowana zagnieżdżona, 67, 70 Ł łącze, 74, 89, 91, 416, 417, 440, 478 tworzenie, 76 w obrębie witryny, 79 M metoda get, 150 post, 150 mikroformat hCard, 54 Mozilla Firefox, Patrz: Firefox N nagłówek, 16, 20, 42, 432, 436, 479 grupa, 437 poziom, 42 nieprzezroczystość, 253 O obraz, 94, 96, 106, 406, 425, 438, 467 animowany, 116 format, Patrz: format pobieranie, 118 podpis, 119 rastrowy, 115 rozdzielczość, 106, 114 tła, 412, 419 umiejscowienie w kodzie, 100 wektorowy, 115 wymiary, 99, 106, 112, 114, 118, 408, 410 obszar przed zagięciem, 378 odstępu pomijanie, 46 odtwarzacz, 208 audio, 216 Flash, 210, 221 Opera, 6, 212 P Paint.neT, 107 PaintShop pro, 107 pasek przewijania, 189, 305, 362 Photoshop, 107, 116, 250, 462 Photoshop Elements, 107 PixeImator, 107 platforma, 390 960.GS, 390, 391, 392, 397 blogowa, 7, 32, 486, 489 Grid System, Patrz: platforma 960.GS handlu elektronicznego, 7, 32, 487, 489 plik audio, 216, 218 index.html, 81 przesyłanie, 147, 158 podmienianie, 416 pole adresu poczty elektronicznej, 166 URL, 166 daty, 165 etykieta, 162 grupowanie, 343 hasła, 147 przesyłania plików, 147, 158, 162 przycisk, Patrz: przycisk tekstowe, 341 jednowierszowe, 146, 147, 162, 340 wielowierszowe, 147, 153, 162, 340 weryfikacja, 164 wyboru, 147, 154, 162 wyrównywanie, 343, 344, 345, 355 wyszukiwania, 167 pomijanie odstępów, 46 Posterous, 487 protokół FTP, 488, 489 SSL, 152 przeglądarka, 6, 241, 340, 440 Chrome, Patrz: Chrome dziwactwo, 241, 323 Firefox, Patrz: Firefox Internet Explorer, Patrz: Internet Explorer Mozilla Firefox, Patrz: Firefox okno główne, 27 Opera, Patrz: Opera Safari, Patrz: Safari przezroczystość, 117, 397, Patrz też: nieprzezroczystość przycisk, 416 graficzny, 147, 160 opcji, 147, 154, 162 przesyłający, 147, 159, 340, 342 pseudoelement, 288 :first-letter, 288 :first-line, 288 pseudoklasa, 288, 289 :active, 289, 290, 417 :first-child, 349 :focus, 290, 341 :hover, 288, 289, 290, 336, 341, 342, 417 :last-child, 349 :link, 289 :visited, 288, 289 R ramka pływająca, 188 RealAudio, 204 reguła, 226, 230, 238, 243 @font-face, 270, 276 @import, 394 RGB, 248, 250, 251, 261 RGBA, 253, 261 rodzic, 361, 369, 371, 372 S Safari, 6, 53, 157, 158, 167, 212, 319 Scalable Vector Graphics, Patrz: format SVG schemat pozycjonowania, 362, 363, 364, 365 Search Engine Optimization, Patrz: SEO SKOROWIDZ Kup książkęPoleć książkę Secure Socket Layer, Patrz: protokół SSL sekcja, 436 selektor, 230, 236, 243 [$=], 291 [*=], 291 [], 291 [^=], 291 [~=], 291 [=], 291 elementu dziecka, 237 potomnego, 237 sąsiadującego, 237 identyfikatora, 237 klasy, 237 ogólny elementu, 237 typu, 237 uniwersalny, 237 SEO, 476, 478, 480, 485 serwer poczty elektronicznej, 487 systemu nazw domen, Patrz: DNS WWW, 6, 9, 486 kopia zapasowa, 486 przepustowość, 486 przestrzeñ dyskowa, 486 siatka, 386, 403 960 pikseli, 386, 387, 388, 389, 403 sieć udostępniania treści, Patrz: CDN skrypt JavaScript, 7, 202 SWFObject, 206, 210, 211, 217, 221 słowo kluczowe, 478, 479, 480 sortowanie kart, 460 sprajt, 416, 425 stopka, 432 strona www adres, 479 folder, Patrz: strona www katalog hierarchia wizualna, 464, 466 katalog, 80 główny, 81 nadrzędny, 81, 83 podrzędny, 81, 83 SKOROWIDZ mapa, 460 optymalizacja pod kątem wyszukiwania, Patrz: SEO projektowanie, 358, 372, 374, 380, 386, 390, 397, 428, 430, 449, 452, 454, 460, 464, 468, 473 rozmiar, 378 siatka, Patrz: siatka strona docelowa, 484 wyjścia, 484 struktura, 80, 358, 372, 374 szkielet, 462, 473 śledzenie ruchu, 485 tytuł, 479 układ, 362, 363, 364, 365, 366, 367, 394, 395, 430, 449, 452, 464 elastyczny, 381, 384 grupowanie informacji, 468 o stałej szerokości, 380, 382 wielokolumnowy, 374 użytkownik, Patrz: użytkownik w nowym oknie przeglądarki, 85 zawartość, 464 symbol specjalny, Patrz: znak specjalny system zarządzania treścią, Patrz: CMS szablon, 390 T tabela, 126, 129, 138, 141, 330, 336, 349, 355 długa, 134, 135, 141 kolor tła, 137, 337 komórka, 129, 130, 134, 337, 355 łączenie, 132, 133 pusta, 338 nagłówek, 131, 134, 135, 337 stopka, 134 szerokość, 136 obramowania, 137 wiersz, 130 tapeta, 421 tekst, 229, 264 alternatywny, 98, 479 czcionka, Patrz: czcionka dodany, 55 formatowanie, 264 interlinia, 282 kursywa, 44, 48, 49, 50, 53, 54, 278 linia pisma bazowa, 267 górna, 267 średnia, 267 łącza, 76 podkreślony, 55 pogrubiony, 44, 48, 50, 278 przekreślony, 55 usunięty, 55 uzupełniający, 438 wcięty, 49, 51, 67, 286 wydłużenie dolne, 267, 282 górne, 267, 282 wysokość x, 267 wyśrodkowanie, 314 zdezaktualizowany, 55 TextEdit, 30 Tumblr, 487 U Uniform Resource Locator, 78, Patrz też: adres URL użytkownik, 456, 457, 458, 483 V Vimeo, 204, 208, 209 W Web Developer Toolbar, 347 wideo, 200, 208, 223, 438 wireframe, Patrz: strona www szkielet Kup książkęPoleć książkę witryna, Patrz: strona www właściwość, 231, 243, 320 !important, 238 background, 415 background-attachment, 413 background-color, 239, 249, 336, 341, 343 background-image, 94, 341, 412, 418 background-position, 414, 417 background-repeat, 413 border, 311, 336, 341, 343 border-collapse, 339 border-color, 310 border-image, 318 border-radius, 320, 321, 341, 343 border-separate, 339 border-spacing, 339, 349 border-style, 309 border-width, 308 box-shadow, 319 clear, 371, 373 color, 248, 341, 342, 343 cursor, 346 display, 316, 323, 327 dziedziczenie, 239, 312, 313, 349 empty-cells, 338, 339 float, 362, 369, 370, 373, 397, 403, 410 font-family, 239, 270, 272, 276 font-size, 273, 282, 341 font-style, 279 font-weight, 278 height, 302, 408 letter-spacing, 283, 336 line-height, 282, 349 list-style, 335 list-style-image, 333 list-style-position, 334 list-style-type, 64, 65, 332, 355 margin, 103, 307, 313, 323, 333, 373 margin-left, 314 margin-right, 314 max-height, 304 max-width, 303 min-height, 304 min-width, 303 -moz-border-image, 318 -moz-border-radius, 320 -moz-box-shadow, 319 opacity, 253 overflow, 304, 305, 373 padding, 103, 307, 312, 323, 336, 343 position absolute, 366 fixed, 367 relative, 365 static, 364 rgba, 253 text-align, 284, 314, 336, 337 text-decoration, 281 text-indent, 286 text-shadow, 287, 319, 342 text-transform, 280, 336 vertical-align, 285 visibility, 317, 327 -webkit-border-image, 318 -webkit-border-radius, 320 -webkit-box-shadow, 319 width, 302, 323, 336, 343, 369, 373, 373, 408 word-spacing, 283 z-index, 363, 368 WordPress.com, 487 współczynnik odrzuceñ, 484 wtyczka, 202, 208 wyszukiwarka, 49, 98, 131, 190, 286, 431, 478, 479, 481, 485 X XML, 178 Y YouTube, 204, 208, 209 Z zdjęcie, 96 znacznik, 37, Patrz też: element otwierający, 19, 20, 22 semantyczny, 40, 49 strukturalny, 40 zamykający, 19, 20, 23 znak ’, Patrz: znak prawy apostrof , 192 ‘, Patrz: znak lewy apostrof “, 192 ”, 192 ¢, Patrz: znak centa £, Patrz: znak funta szterlinga ¥, Patrz: znak jena €, Patrz: znak euro ×, Patrz: znak mnożenia ÷, Patrz: znak dzielenia ©, Patrz: znak praw autorskich ®, Patrz: znak handlowy zarejestrowany apostrof lewy, 192 prawy, 192 centa, 192 cudzysłowu, 192 dzielenia, 192 euro, 192 funta szterlinga, 192 handlowy, 192 zarejestrowany, 192 jena, 192 mniejszości, 192 mnożenia, 192 praw autorskich, 192 specjalny, 192 ™, Patrz: znak handlowy ukośnika, 19, 20 większości, 192 Ż żądanie, 6 SKOROWIDZ Kup książkęPoleć książkę Kup książkęPoleć książkę
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

HTML i CSS. Zaprojektuj i zbuduj witrynę WWW
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: