Projektowanie_stron_internetowych_Przewodnik_dla_poczatkujacych_webmasterow_po_XHTML_CSS_i_grafice_prstin.pdf

Projektowanie stron internetowych.

Przewodnik dla poczĴtkujĴcych

webmasterw po (X)HTML,

CSS i grafice

Autor: Jennifer Niederst Robbins

TĀumaczenie: Anna Trojan

ISBN: 978-83-246-1375-5

TytuĀ oryginaĀu: Learning Web Design: A Beginner

Format: 180x235, stron: 488

Wydawnictwo Helion

ul. Koľciuszki 1c

44-100 Gliwice

tel. 032 230 98 63

e-mail: helion@helion.pl

¤ Jak zaczĴě pisaě strony internetowe?

¤ Jak wybraě odpowiednie narzķdzia do tworzenia witryn?

¤ Jak budowaě arkusze stylw i optymalizowaě łrdĀo strony HTML?

Od czego mam zaczĴě? Czy ja siķ do tego nadajķ? Nie mam na to czasuÈ Wielu z nas

wĀaľnie z takim nastawianiem zabiera siķ do pisania swojej pierwszej strony

internetowej. Takie i podobne wĴtpliwoľci rozwiewa wĀaľnie ta ksiĴŃka, przeznaczona

dla osb niemajĴcych Ńadnej wiedzy na temat tworzenia stron internetowych, a ktre

chciaĀyby takĴ stronķ wykreowaě. CzytajĴc jĴ i pracujĴc nad wieloma przykĀadami,

nauczysz siķ, jak opracowaě swojĴ pierwszĴ stronķ internetowĴ i stopniowo odkryjesz

w sobie pasjķ webmastera!

Jennifer Niederst Robbina, bazujĴc na swoim kilkunastoletnim doľwiadczeniu

w dziedzinie tworzenia stron internetowych, udowadnia, Ńe pisaě strony moŃe kaŃdy,

naleŃy mu tylko wskazaě drogķ. KsiĴŃka âProjektowanie stron internetowychÒ jest

trzeciĴ edycjĴ przewodnika dla poczĴtkujĴcych, lecz napisana zostaĀa caĀkowicie od

poczĴtku, z uwzglķdnieniem najnowszych technologii i trendw w tej dziedzinie.

Dodatkowym atutem ksiĴŃki jest przejrzystoľě i Āatwo przyswajalny jķzyk oraz liczne

przykĀady i ěwiczenia, ktre pozwalajĴ lepiej zrozumieě i przyswoiě materiaĀ.

¤ Struktura i znaczniki HTML

¤ Elementy struktury (X)HTML

¤ Tabele, obrazki, odnoľniki, animacje i inne elementy stron

¤ Formatowanie tekstu

¤ Formularze i pola edycji

¤ PĀywanie oraz pozycjonowanie elementw stron

¤ Arkusze stylw CSS

¤ UkĀad strony oparty na arkuszach stylw CSS

¤ Techniki CSS

¤ Grafika stron internetowych i jej optymalizacja

¤ Umieszczanie stron w Internecie

Poznaj techniki tworzenia, napisz i umieľě wĀasnĴ stronķ internetowĴ w sieci!

Spis treści

Przedmowa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Część I Podstawy

Rozdział 1

Od czego zacząć? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Czy jestem spóźniony? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Od czego powinienem zacząć? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Czego powinienem się nauczyć? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Czy muszę nauczyć się Javy? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Co muszę kupić? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Czego się nauczyłem? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Rozdział 2

Jak działa Internet? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Internet a World Wide Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Serwowanie informacji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Słowo o przeglądarkach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Adresy stron internetowych (URL) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Anatomia strony internetowej . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Składanie wszystkiego w całość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Rozdział 3

Natura projektowania stron internetowych . . . . . . . . . . . . . . . . . . . 1

Wersje przeglądarek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Alternatywne środowiska przeglądania stron internetowych . . . . . . . . . . . . . . . . . . 44

Preferencje użytkownika . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Różne platformy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

Prędkość połączenia z Internetem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Rozmiar okna przeglądarki oraz rozdzielczość monitora . . . . . . . . . . . . . . . . . . . . . . . 52

Kolory monitora . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Należy znać publiczność docelową . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Pamiętanie o najważniejszym . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

Część II Znaczniki HTML i struktura dokumentu

Rozdział

Tworzenie prostej strony (przegląd HTML) . . . . . . . . . . . . . . . . . . . . . . 63

Strona internetowa krok po kroku . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

Przed rozpoczęciem należy uruchomić edytor tekstu . . . . . . . . . . . . . . . . . . . . . . . . . 64

Krok 1. Zaczynamy od treści strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

Krok 2. Nadanie dokumentowi struktury . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Krok 3. Zidentyikowanie elementów tekstowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

Krok 4. Dodanie obrazka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Krok 5. Zmiana wyglądu za pomocą arkusza stylów . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

Kiedy dobre strony nie działają dobrze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

Przegląd (X)HTML — elementy struktury dokumentu . . . . . . . . . . . . . . . . . . . . . . . . . 82

Rozdział 5

Oznaczanie tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

Bloki jako budulec strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

Listy. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

Dodawanie złamania wiersza . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92

Tekstowe elementy wewnętrzne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

Elementy uniwersalne (div oraz span). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

Niektóre znaki specjalne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

Zestawienie wszystkiego razem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

Sprawdź się!. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

Przegląd (X)HTML — elementy tekstowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

Spis treści

Rozdział 6

Dodawanie odnośników . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

Atrybut href . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

Tworzenie odnośników do stron znajdujących się w Internecie . . . . . . . . . . . . . . 109

Tworzenie odnośników w ramach własnej strony internetowej . . . . . . . . . . . . . . . 110

Otwieranie stron docelowych w nowym oknie przeglądarki . . . . . . . . . . . . . . . . . 120

Odnośniki z adresami poczty e-mail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

Przegląd (X)HTML — element kotwicy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

Rozdział 7

Dodawanie obrazków . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

Słowo o formatach obrazków . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

Element img . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

Podawanie lokalizacji za pomocą atrybutu src . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130

Mapy obrazów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

Rozdział 8

Podstawowe znaczniki tabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

W jaki sposób wykorzystywane są tabele . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

Minimalna struktura tabeli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142

Nagłówki tabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

Rozciąganie komórek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

Dopełnienie komórek oraz odstępy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148

Podpisy oraz podsumowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

Dostępność tabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151

Podsumowanie zagadnień związanych z tabelami . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

Przegląd (X)HTML — elementy tabeli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

Rozdział 9

Formularze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

Jak działają formularze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

Element form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

Zmienne oraz zawartość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159

Dostępność formularza . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160

Wielkie podsumowanie kontrolek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

Projektowanie i wygląd formularza . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

Przegląd (X)HTML — formularze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175

Spis treści

Rozdział 10

Rozumienie standardów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177

Wszystko, co zawsze chciałeś wiedzieć o HTML, ale bałeś się o to zapytać . . . . . . . 177

Na scenę wkracza XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181

Z punktu widzenia przeglądarki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186

Deklarowanie typu dokumentu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186

Jaką deinicję typu dokumentu zastosować? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188

Sprawdzanie poprawności dokumentów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

Kodowanie znaków . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192

Wszystko razem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193

Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195

Część III CSS i prezentacja dokumentu

Rozdział 11

Zorientowanie na kaskadowe arkusze stylów . . . . . . . . . . . 199

Zalety CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199

Jak działają arkusze stylów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200

Najważniejsze koncepcje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206

Dalsza nauka CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212

Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214

Rozdział 12

Formatowanie tekstu (i jeszcze więcej selektorów) . . . . . . . . . . . 215

Właściwości dotyczące czcionek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216

Zmiana koloru tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229

Więcej typów selektorów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230

Zmiana stylu wiersza tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234

Podkreślenia oraz inne „dekoracje” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237

Zmiana wielkości liter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

Odstępy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239

Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242

Przegląd CSS — właściwości dotyczące czcionki oraz tekstu . . . . . . . . . . . . . . . . . 244

Spis treści

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: