Zawód front-end developer. 11 kroków do zostania webmasterem

Spis treści książki

Wstęp 13

CZĘŚĆ I. WPROWADZENIE 15

Krok 1. Zainstaluj potrzebne programy 17

• 1.1. Przeglądarki internetowe 17
• 1.2. Edytor kodu 17
• 1.3. Prezentacja kodu w książce 19

CZĘŚĆ II. HTML5 I CSS3 21

Krok 2. Poznaj język internetu 23

Krok 3. Poznaj HTML5 25

• 3.1. Dokument HTML (pierwsza strona WWW) 25
• 3.1.1. Szkielet dokumentu HTML 25
• 3.1.2. Kodowanie polskich znaków 28
• 3.1.3. Meta tagi 30
• 3.1.4. Podgląd kodu w przeglądarce 30
• 3.1.5. Błędy w kodzie 31
• 3.1.6. Przeglądarka poprawia błędy 32
• 3.2. Nagłówki/treść 32
• 3.2.1. Nagłówek nad tekstem 32
• 3.2.2. Treść na stronie internetowej 33
• 3.2.3. Wyświetlanie znaków specjalnych 34
• 3.2.4. Pogrubienie, pochylenie, podkreślenie tekstu 37
• 3.2.5. Kolejność otwierania i zamykania znaczników 38
• 3.3. Listy uporządkowane oraz nieuporządkowane 39
• 3.3.1. Lista uporządkowana 39
• 3.3.2. Lista nieuporządkowana 40
• 3.3.3. Zagnieżdżanie list 40
• 3.4. Zdjęcia na stronie 42
• 3.4.1. Wstawianie zdjęcia 42
• 3.4.2. Rozmiar zdjęcia 43
• 3.4.3. Tekst alternatywny 44
• 3.5. Znaczniki semantyczne 45
• 3.5.1. nav 45
• 3.5.2. header 46
• 3.5.3. article 46
• 3.5.4. aside 47
• 3.5.5. section 47
• 3.5.6. footer 48
• 3.5.7. Pozostałe znaczniki semantyczne 49
• 3.5.8. Podsumowanie 52
• 3.6. Kontener uniwersalny 53
• 3.7. Tabela 54
• 3.7.1. Tworzenie tabeli 54
• 3.7.2. Podział tabeli 55
• 3.7.3. Tytuł tabeli 57
• 3.7.4. Scalanie komórek 57
• 3.8. Odsyłacze 60
• 3.8.1. Odsyłacz do innej strony 60
• 3.8.2. Odsyłacz do podstrony 61
• 3.8.3. Kotwica 64
• 3.9. Elementy formularza 67
• 3.9.1. Tworzenie formularza 67
• 3.9.2. Pole wieloliniowe 68
• 3.9.3. Pole danych 70
• 3.9.4. Pole hasła 71
• 3.9.5. Pozostałe pola input - wprowadzanie danych 72
• 3.9.6. Pola wielokrotnego wyboru 74
• 3.9.7. Pole jednokrotnego wyboru 76
• 3.9.8. Listy rozwijane 77
• 3.9.9. Przyciski 78
• 3.9.10. Atrybuty elementów formularza 79
• 3.9.11. Przesyłanie danych z formularza 83
• 3.10. Multimedia 84
• 3.10.1. Odtwarzacz audio 84
• 3.10.2. Odtwarzacz wideo w HTML5 85
• 3.10.3. Dodawanie filmu z serwisu YouTube 86
• 3.11. Elementy blokowe i liniowe 88

Krok 4. Poznaj CSS3 89

• 4.1. Styl w dokumencie HTML 89
• 4.1.1. Styl w znacznikach HTML 89
• 4.1.2. Styl w części HEAD 90
• 4.2. Styl w pliku CSS 92
• 4.2.1. Utworzenie i dodanie pliku CSS 92
• 4.2.2. Dodanie stylów do pliku CSS 93
• 4.2.3. Deklaracja stylu według znacznika 95
• 4.2.4. Deklaracja stylu według atrybutu id 96
• 4.2.5. Deklaracja stylu według atrybutu class 97
• 4.2.6. Komentarze w kodzie CSS 98
• 4.2.7. Podgląd kodu w przeglądarce 99
• 4.3. Podstawowe właściwości elementów 99
• 4.3.1. Kolory w CSS 99
• 4.3.2. Obramowanie 102
• 4.3.3. Tło kolorowe 106
• 4.3.4. Tło obrazkowe 110
• 4.3.5. Rozmiar elementu 115
• 4.3.6. Marginesy 120
• 4.3.7. Cień elementu 124
• 4.4. Rozmieszczanie elementów blokowych 126
• 4.4.1. Wyświetlanie 126
• 4.4.2. Sposoby wyświetlania 128
• 4.4.3. Ustawienie 129
• 4.4.4. Rodzaj pozycjonowania 130
• 4.5. Stylizacja tekstu 141
• 4.5.1. Kolor tekstu 141
• 4.5.2. Rozmiar fontu 141
• 4.5.3. Wysokość wiersza 142
• 4.5.4. Odstęp między znakami 142
• 4.5.5. Wyrównanie tekstu 143
• 4.5.6. Dekoracja tekstu 143
• 4.5.7. Waga fontu 145
• 4.5.8. Styl fontu 145
• 4.5.9. Krój pisma 146
• 4.5.10. Fonty niestandardowe 147
• 4.5.11. Fonty niestandardowe od Google 148
• 4.5.12. Cień tekstu 151
• 4.5.13. Stylizacja fragmentu tekstu 152
• 4.6. Stylizacja linków 153
• 4.6.1. Stan linku 153
• 4.6.2. Efekt przejścia 155
• 4.7. Stylizacja list 159
• 4.7.1. Lista uporządkowana 159
• 4.7.2. Lista nieuporządkowana 160
• 4.7.3. Zwijanie tekstu 161
• 4.7.4. Elementy listy w poziomie 162
• 4.7.5. Margines wewnętrzny 163
• 4.8. Styl w wybranych elementach 163
• 4.8.1. Nazwa elementu, klasa, identyfikator 163
• 4.8.2. Grupowanie selektorów 164
• 4.8.3. Selektor potomka 164
• 4.8.4. Selektor dziecka 165
• 4.8.5. Selektor rodzeństwa 165
• 4.8.6. Selektor atrybutu 166
• 4.8.7. Selektor wybranego elementu 168
• 4.9. Stylizacja elementów formularza 175
• 4.9.1. Pole wieloliniowe 175
• 4.9.2. Pola input 176
• 4.9.3. Pole wyboru 177
• 4.9.4. Lista rozwijana 185
• 4.9.5. Przycisk formularza 185
• 4.9.6. Zmiana stylu po atrybucie 185
• 4.9.7. Pseudoklasa focus 186
• 4.10. Animacje w CSS3 187
• 4.10.1. Klatki animacji 187
• 4.10.2. Nazwa animacji 189
• 4.10.3. Czas trwania animacji 189
• 4.10.4. Tempo animacji 190
• 4.10.5. Powtarzanie animacji 191
• 4.10.6. Opóźnienie animacji 191
• 4.10.7. Zapis skrócony 192
• 4.11. Strona responsywna 192
• 4.11.1. Czym jest strona responsywna? 192
• 4.11.2. Meta viewport 194
• 4.11.3. Zapytania medialne 195
• 4.11.4. Praktyczny przykład media queries 198
• 4.12. Więcej informacji o CSS3 203
• 4.12.1. Reset stylów przeglądarki 203
• 4.12.2. Nadpisywanie stylów 206
• 4.12.3. Pierwszeństwo stylów 206
• 4.12.4. Dziedziczenie stylów 207
• 4.12.5. Przedrostki przeglądarek 209

CZĘŚĆ III. BUDOWA STRONY INTERNETOWEJ 211

Krok 5. Poznaj świat profesjonalistów 213

• 5.1. Kto ustala zasady? 213
• 5.2. Przeglądarki internetowe 213
• 5.3. HTML5 i CSS3 213
• 5.4. Web design 214

Krok 6. Zbuduj stronę internetową 215

• 6.1. Moje zasady 215
• 6.2. Projekt 215
• 6.3. Przygotowanie plików do pracy 216
• 6.4. Top strony 217
• 6.4.1. Co chcemy osiągnąć? 217
• 6.4.2. Utworzenie sekcji strony 218
• 6.4.3. Dodanie nagłówków 220
• 6.4.4. Tworzenie przycisku 229
• 6.4.5. Top strony w wersji mobilnej 232
• 6.5. Menu nawigacyjne 239
• 6.5.1. Co chcemy osiągnąć? 239
• 6.5.2. Utworzenie miejsca na nawigację 239
• 6.5.3. Utworzenie linków dla nawigacji 241
• 6.5.4. Środkowanie nawigacji 242
• 6.5.5. Stylizacja linków 244
• 6.5.6. Menu nawigacyjne w wersji mobilnej 249
• 6.6. Oferta 259
• 6.6.1. Co chcemy osiągnąć? 259
• 6.6.2. Utworzenie sekcji strony 260
• 6.6.3. Środkowanie zawartości strony 261
• 6.6.4. Tytuł działu 265
• 6.6.5. Okienka z ofertą 268
• 6.6.6. Wypełnienie boksów treścią 272
• 6.6.7. Dodanie elementów fontu jako ikon 278
• 6.6.8. Oferta w wersji mobilnej 291
• 6.7. Dietetyk Maria 303
• 6.7.1. Co chcemy osiągnąć? 303
• 6.7.2. Utworzenie sekcji strony 303
• 6.7.3. Zmiana stylu nagłówka oraz podpisu 305
• 6.7.4. Utworzenie miejsca na treść 307
• 6.7.5. Stylizacja treści 311
• 6.7.6. Responsywne obrazy 313
• 6.7.7. "Dietetyk Maria" w wersji mobilnej 319
• 6.8. Mapa Google 325
• 6.8.1. Co chcemy uzyskać? 325
• 6.8.2. Utworzenie sekcji strony 325
• 6.8.3. Klucz API 327
• 6.8.4. Wyświetlenie mapy 327
• 6.8.5. Dodanie markera 333
• 6.8.6. Zmiana stylu mapy 336
• 6.8.7. Mapa Google w wersji mobilnej 339
• 6.9. Formularz kontaktowy 339
• 6.9.1. Co chcemy uzyskać? 339
• 6.9.2. Utworzenie sekcji strony 340
• 6.9.3. Miejsce na pola formularza 342
• 6.9.4. Dodanie pól formularza 345
• 6.9.5. Przycisk formularza 353
• 6.9.6. Naprawa menu górnego 357
• 6.9.7. Formularz kontaktowy w wersji mobilnej 359
• 6.10. Stopka strony 363
• 6.10.1. Co chcemy uzyskać? 363
• 6.10.2. Utworzenie sekcji strony 364
• 6.10.3. Stopka strony w wersji mobilnej 366
• 6.11. Prawie gotowe 367

CZĘŚĆ IV. DODATKOWE MOŻLIWOŚCI STRONY INTERNETOWEJ 369

Krok 7. Poznaj JavaScript i jQuery 371

• 7.1. Wprowadzenie do języka JavaScript 371
• 7.2. Biblioteki JavaScript 372
• 7.3. Praca z biblioteką jQuery 373
• 7.4. Dodanie biblioteki do strony 374
• 7.5. Działanie menu przy użyciu jQuery 376
• 7.6. Menu w wersji mobilnej 384
• 7.7. Oddzielenie kodu JavaScript od HTML 402
• 7.8. Więcej o języku JavaScript i jQuery 404

Krok 8. Poznaj PHP7 405

• 8.1. Wprowadzenie do PHP7 405
• 8.2. Instalowanie serwera XAMPP 405
• 8.3. Utworzenie pliku oraz skryptu PHP 409
• 8.4. Pobieranie danych z formularza 411
• 8.5. Różnica między post a get 415
• 8.6. Przesyłanie danych w tle 415
• 8.6.1. Przygotowanie formularza 415
• 8.6.2. Pobieranie danych za pomocą jQuery 419
• 8.6.3. Walidacja pól za pomocą jQuery 420
• 8.6.4. Wprowadzenie do Ajaxa 424
• 8.6.5. Przygotowanie pliku PHP do odbioru danych 431
• 8.6.6. Usuwanie znaczników HTML 435
• 8.6.7. Przesyłanie znaków specjalnych 437
• 8.6.8. Informowanie użytkownika o przesyłaniu danych 438
• 8.7. Wysyłanie danych z formularza na adres e-mail 454

CZĘŚĆ V. PUBLIKACJA STRONY W INTERNECIE 461

Krok 9. Poznaj potrzebne pojęcia 463

• 9.1. Domena 463
• 9.2. Serwer 463
• 9.3. Hosting 463
• 9.4. FTP 464

Krok 10. Opublikuj stronę w internecie 465

Krok 11. Rozpocznij własną przygodę 469

Skorowidz 471

pokaż cały spis treści

ukryj recenzje