Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00351 011167 15683024 na godz. na dobę w sumie
HTML i CSS. Zaprojektuj i zbuduj witrynę WWW. Podręcznik Front-End Developera - ebook/pdf
HTML i CSS. Zaprojektuj i zbuduj witrynę WWW. Podręcznik Front-End Developera - ebook/pdf
Autor: Liczba stron: 512
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-4481-5 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> css
Porównaj ceny (książka, ebook (-20%), audiobook).

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:

Poznaj tajniki projektowania i budowania stron WWW!

W książce dowiesz się jak:

Dodatkowe treści znajdziesz także na stronie poświęconej książce: www.htmlandcssbook.com

Witaj na milszej ścieżce do poznania HTML i CSS.

Niezależnie do tego chcesz projektować i tworzyć witryny WWW od podstaw, czy też zyskać dodatkową kontrolę nad wyglądem już istniejącej witryny, ta książka pomoże Ci w tworzeniu treści atrakcyjnych i przyjaznych dla użytkownika. Rozumiemy, że kod może być deprymujący, warto jednak żebyś zajrzał do tego przewodnika — przekonasz się jak bardzo różni się on od innych książek programistycznych.

Każda strona książki opisuje nowe zagadnienie, przedstawiając je w prosty, atrakcyjny wizualnie sposób i zawiera zrozumiały opis oraz bardzo krótki przykład kodu. W książce znajdziesz także praktyczne porady dotyczące sposobów organizacji i projektowania stron, dzięki którym będziesz w stanie tworzyć olśniewające i łatwe w użyciu witryny. Nie potrzeba do tego żadnej wstępnej wiedzy ani doświadczeń.


JON DUCKET projektuje i tworzy witryny WWW od czternastu lat. Pracował już z niewielkimi startupami oraz markami o zasięgu globalnym i napisał ponad tuzin książek poświęconych projektowaniu, programowani, użyteczności oraz dostępności witryn.

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 Poleć książkęKup książkę Poleć książkęKup 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. Poleć książkęKup 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 Poleć książkęKup książkę UKŁADW HTML5 429 Poleć książkęKup 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 Poleć książkęKup 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 Poleć książkęKup 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. Poleć książkęKup 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 Poleć książkęKup 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 Poleć książkęKup 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 Poleć książkęKup 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 Poleć książkęKup 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 Poleć książkęKup 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 Poleć książkęKup książkę GRUPOWANIE ELEMENTÓWW 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żesięwydawaćdziwne, żepoprezentacjinowych elementówHTML5wracamy doelementu div (w końcu tenoweelementymajągo zastępować). Element div wciąż pozostajeważnymsposobem grupowaniapowiązanych ze sobąelementówstron, gdyżprzedstawionewcześniej noweelementyHTML5należy stosowaćwyłączniew ściśle określonychcelach. Wszędzietam,gdzienowe elementyHTML5nienadają siędozastosowania,trzeba będzienadalużywaćelementu div .W tymprzykładziezostał onzastosowanyjakopojemnik dla całejzawartościstrony. Pewnieniektórzyzastanawiają się,dlaczegoniemaelementu content ,w którymmożna byumieścićgłównązawartość strony.Wynikatoz faktu, żewszystko,coznajdujesię pozaelementami header , footer oraz aside ,można uznaćzagłównączęśćstrony. UKŁADW HTML5 439 Poleć książkęKup 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 Poleć książkęKup 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 Poleć książkęKup książkę 442 UKŁADW HTML5 Poleć książkęKup 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 Poleć książkęKup 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 Poleć książkęKup 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 Poleć książkęKup 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 Poleć książkęKup 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 Poleć książkęKup książkę Poleć książkęKup 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. Poleć książkęKup książkę Poleć książkęKup książkę SKOROWIDZ X A – Z. X Rozwiązywanie problemów. X Elementy HTML. X Atrybuty HTML. X Właściwości CSS. Poleć książkęKup 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 Poleć książkęKup 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 Poleć książkęKup 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 Poleć książkęKup 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 Poleć książkęKup 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 Poleć książkęKup 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 Poleć książkęKup książkę ROZWIĄZYWANIE PROBLEMÓW Poniżej przedstawiono kilkanaście problemów, przed którymi często stają początkujący twórcy stron WWW, wraz z numerami stron, na których można znaleźć informacje o sposobach ich rozwiązania. NA POCZĄTEK Przeglądarka wyświetla kod HTML (a nie stronę). Należy sprawdzić, czy plik ma rozszerzenie .html, a nie .txt. Strony: 29, 31. Pogrubienie, wyróżnienie, nagłówek lub łącze rozciąga się na większy fragment tekstu, niż powinno. Należy sprawdzić, czy w kodzie znajduje się odpowiedni znacznik zamykający, np. /a . Strony: 20, 21. Strona docelowa łącza nie została odnaleziona. Trzeba sprawdzić względny adres URL. Strony: 82, 83. OBRAZY Obrazy nie są wyświetlane. Trzeba sprawdzić względny adres URL. Strony: 82, 83. Obrazy są zamazane. Trzeba sprawdzić, czy obrazy zostały zapisane we właściwym formacie i czy mają odpowiednie wymiary. Strony: 108 – 112. Obrazy tła nie są widoczne. Działają one wyłącznie w najnowszych wersjach przeglądarek. (Warto także sprawdzić względne adresy URL). Strony: 318, 20, 21. Powiększone obrazy GIF mają wyraźnie widoczne ziarno i postrzępione krawędzie. SKOROWIDZ W programie graficznym trzeba sprawdzić przestrzeń kolorów. Powinna nią być przestrzeń RGB (a nie kolory indeksowane, ang. indexed color). TEKST Fragmenty tekstu migają, zanim zostaną wyświetlone odpowiednią czcionką. To tzw. miganie treści bez określonych stylów. Strona 277. Podczas kopiowania tekstu z edytora tekstu w kodzie strony pojawia się bardzo dużo dodatkowych znaczników. W pierwszej kolejności trzeba skopiować tekst do prostego edytora (aby usunąć formatowanie), a dopiero potem do edytora HTML. Strona 48. Na niektórych ekranach tekst wydaje się mniejszy lub większy. Zazwyczaj wynika to z różnicy rozdzielczości. Warto także sprawdzić, czy w znaczniku body została określona wielkość czcionki. Strony: 376, 275. Kiedy używam jednostek em, wielkość czcionki w IE jest niewłaściwa. Patrz poprzednie wyjaśnienia. Strona 275. Zastosowana czcionka nie jest wyświetlana w niektórych przeglądarkach. Podana czcionka musi być zainstalowana na komputerze użytkownika. Strony: 268 – 271. W razie używania reguły @ font-family należy podać czcionki w kilku różnych formatach. Strona 276-277. Na komputerach PC używane czcionki nie są gładkie. W przypadku niektórych czcionek antyaliasing nie daje dobrych efektów. Warto wypróbować inny krój pisma lub użyć czcionki pogrubionej. Strona 271. OGÓLNE PROBLEMY CSS Określony styl nie jest używany. Trzeba pamiętać, że w selektorach CSS uwzględniana jest wielkość liter. Warto sprawdzić poprawność selektorów. Strona 237. Web Developer Toolbar pozwoli określić właściwy selektor. Strona 347. Jeśli selektory są prawidłowe, to czy w dalszej części arkusza CSS znajdują się inne selektory odnoszące się do tego samego elementu? Strony: 238, 239. Implementacja CSS w przeglądarkach jest różna. Istnieje sporo różnic i dziwactw, które sprawiają, że przeglądarki wyświetlają strony w nieco odmienny sposób. Warto poszukać informacji o problemie i ustalić, czy jest on znany jako dziwactwo lub błąd przeglądarki. Strona 241. Poleć książkęKup książkę HTML5 Przeglądarka nie używa stylów w elementach HTML5. Jeśli tą przeglądarką jest Internet Explorer, to być może trzeba będzie skorzystać ze specjalnego skryptu JavaScript. Strona 441. Elementy blokowe są wyświetlane jako elementy wewnątrzwierszowe. Trzeba skorzystać z właściwości display:block, by poinstruować przeglądarkę, które elementy HTML są elementami blokowymi. Strona 441. UKŁAD Na niektórych ekranach projekt wygląda na mniejszy lub większy. Na wielkość elementów wyświetlanych na stronie ma wpływ rozdzielczość ekranu. Strony: 376, 377. Marginesy nad oraz pod elementem nie są wyświetlane. Marginesy pionowe są scalane. Strona 307. Treść nie mieści się w elemencie zawierającym lub oknie przeglądarki. Z tym problemem można sobie poradzić, używając właściwości overflow. Strony: 305, 315. Pudełka elementów w przeglądarce Internet Explorer mają inne wymiary niż w innych przeglądarkach. Niektóre wersje IE używają innego modelu pudełkowego niż wszystkie pozostałe przeglądarki. Aby działały tak samo, należy użyć deklaracji DOCTYPE. Strona 315. Pudełka nie są wyśrodkowywane po przypisaniu lewemu i prawemu marginesowi wartości auto. Być może trzeba będzie użyć właściwości text-align w elemencie nadrzędnym. Strona 314. Elementy nachodzą na siebie. Kiedy elementy zostaną usunięte z normalnego rozkładu strony, mogą na siebie nachodzić. Właściwość z-index pozwala określić, który z nich ma się znaleźć nad pozostałymi. Strona 368. Dlaczego użycie właściwości vertical-align nie powoduje wyśrodkowania w pionie elementów blokowych? Ta właściwość nie służy do tego celu. Służy ona do określania wyrównania w pionie elementów wewnątrzwierszowych. W internecie można znaleźć kilka różnych sposobów wyśrodkowywania elementów blokowych w pionie (zależnie od ich kontekstu). W elemencie nie jest wyświetlany obraz tła. Czy została określona wysokość i szerokość tego elementu? Strona 302. Czy w elemencie zawierającym właściwości overflow przypisano wartość auto? Strony: 372, 373. Obraz tła elementu nie jest widoczny po wydrukowaniu strony. Większość przeglądarek, w celu oszczędzania tuszu, domyślnie nie drukuje obrazów tła. Można to zmienić w ustawieniach drukowania. Pomiędzy oknem przeglądarki a zawartością strony jest widoczny odstęp. Być może trzeba będzie zlikwidować marginesy i wypełnienia w elemencie body , przypisując im wartość 0. Strony: 312, 313. ELEMENTY PŁYWAJĄCE W UKŁADZIE Pudełko elementu nie zostało umieszczone przy elemencie pływającym. Trzeba się upewnić, że w elemencie zawierającym jest dostatecznie dużo miejsca, by oba te elementy zostały wyświetlone obok siebie. Strona 302. Do szerokości elementu zostały dodane marginesy i wypełnienie (tak się dzieje we wszystkich przeglądarkach oprócz starych wersji IE, w których jest używany inny model pudełkowy). Dlatego jego szerokość może być większa niż ta podana we właściwości width. Strona 315. Czy została określona szerokość elementu pływającego? (Patrz kolejny punkt). Moje elementy pływające zajmują pełną szerokość okna przeglądarki (lub elementu zawierającego). Trzeba sprawdzić, czy została podana szerokość tych elementów pływających. Strona 370. Element zawierający moje elementy pływające ma wysokość 1 piksela. Element zawierający nie zna wysokości umieszczonych w nim elementów pływających. Można dodać element, który zostanie umieszczony poniżej elementów pływających lub użyć w elemencie zawierającym właściwości overflow i przypisać jej wartość auto. Strona 372. Przeglądarka Internet Explorer dodaje do elementów pływających dodatkowy margines. W elementach tych należy użyć właściwości display i przypisać jej wartość inline. SKOROWIDZ Poleć książkęKup książkę ELEMENTY HTML a 76, 78, 84, 440 abbr 52 acronym 52 address 54 article 431 – 438 aside 435 audio 216 – 219 b 44 blockquote 51 body 21, 26 br / 47 button 161 cite 53 dd 66 del 55 dfn 53 div 186, 430, 439 dl 66 dt 66 em 50 embed 202 fieldset 163 figcaption 118, 421, 438 figure 118, 421, 438 footer 431, 432 form 150 h1 21, 42 h2 21, 42 h3 42 h4 42 h5 42 h6 42 head 26 header 431, 432 hgroup 437 hr / 47 html 21 i 44 iframe 188 – 189 img 98, 99 input 151, 154, 158 – 161, 165 ins 55 label 162 legend 163 li 64, 65 link 234, 395 meta 190, 191 nav 431, 433 object 202 ol 64 option 156 p 21, 43 q 51 s 55 script 207, 217 section 432, 436 select 156 source 214, 219 span 187 strong 50 style 235 sub 45 sup 45 table 130 tbody 134 td 130 textarea 153 tfoot 134 th 131 thead 134 title 26, 27 tr 130 u 55 ul 65 video 208, 212 – 215 SKOROWIDZ Poleć książkęKup książkę ATRYBUTY HTML action 150 align 102 – 104 alt 98 autoplay 213, 218 bgcolor 137 border 137 checked 154, 155 cite 51 class 183, 430 codecs 214 cols 153 colspan 132 content 190, 191 controls 213, 218 description 190 for 162 frameborder 189 atrybuty ogólne 182 height 99, 188, 213 href 76, 78, 87, 234 http-equiv 191 id 86, 87, 150, 162 id (atrybut) 182, 430 loop 213, 218 maxlength 151, 152 method 150 multiple 157 name 151 – 156, 159, 190 placeholder 167 poster 213 preload 213, 218 rel 234 robots 190 rows 153 rowspan 133 scrolling 189 seamless 189 selected 156 size 151, 152, 157 src 98, 188, 213, 214, 218, 219 style 235 target 85 title 52, 98 type 151, 154, 158 type (audio/wideo) 219, 214 type (CSS) 234 – 235 type=”date” 165 type=”email” 166 type=”hidden” 161 type=”image” 160 type=”password” 152 type=”search” 167 type=”submit” 159 type=”url” 166 value 154 – 156, 159 width 99, 136, 188, 213 SKOROWIDZ Poleć książkęKup książkę WŁAŚCIWOŚCI CSS background-attachment 413 background-color 249 background-image 412 background-image (gradienty) 418 background-position 414 background 415 background-repeat 413 border-bottom-color 310 border-bottom-style 309 border-collapse 339 border-color 310 border-image 318 border-left-color 310 border-left-style 309 border property 311 border-radius 320 border-right-color 310 border-right-style 309 border-spacing 339 border-style 309 border-top-color 310 border-top-style 309 bottom 365 – 370 box-shadow 319 clear 371 color 248 cursor 346 display 316 empty-cells 338 float 363, 369 – 374 float (obrazy) 410 @font-face 276 font-face 270 font-family 270, 272 font-size 273, 275 font-style 279 height (obrazy) 408 – 409 hsl / hsla 254 – 255 left 365 – 370 letter-spacing 283 line-height 282 list-style-image 333 list-style-position 334 list-style 335 list-style-type 332 margin-bottom 313 margin-left 313 margin 313 margin-right 313 margin-top 313 opacity 253 padding-bottom 312 padding-left 312 padding 312 padding (tabele) 336 padding-right 312 padding-top 312 position 365, 366 rgba 253 right 365 – 370 text-align 284 text-decoration 281 text-indent 286 text-shadow 287 text-transform 280 top 365 – 370 vertical-align 285 visibility 317 width (obrazy) 408 – 409 width (elementy pływające) 370 width (tabele) 336 word-spacing 283 z-index 363, 368 PSEUDOKLASY, PSEUDOELEMENTY ORAZ REGUŁY :active 290 :first-letter 288 :first-line 288 :focus 290, 341 :hover 290, 342, 341 podświetlanie wierszy tabel 336 :link 289 :visited 289 @font-face 276 @import reguła 394 !important 238 SKOROWIDZ Poleć książkęKup książkę
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

HTML i CSS. Zaprojektuj i zbuduj witrynę WWW. Podręcznik Front-End Developera
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ą: