Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00032 004881 21526722 na godz. na dobę w sumie
Zawód front-end developer. 11 kroków do zostania webmasterem - książka
Zawód front-end developer. 11 kroków do zostania webmasterem - książka
Autor: Liczba stron: 480
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-3885-2 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> tworzenie stron www
Porównaj ceny (książka, ebook (-40%), audiobook).

Śmiało wkrocz w świat internetu i zacznij tworzyć strony WWW!

Stron internetowych jest w sieci bardzo dużo i z każdym dniem przybywa ich coraz więcej. Obecnie każda firma i wiele prywatnych osób chce lub wręcz musi mieć w internecie przynajmniej prostą wizytówkę. Nic zatem dziwnego, że w portalach firm rekrutujących pracowników aż roi się od ofert dla ludzi tworzących serwisy, a profesjonaliści z doświadczeniem w tej dziedzinie mogą liczyć na naprawdę niezłe zarobki. Może i Ty chciałbyś do nich dołączyć, ale nie masz odpowiedniej wiedzy? A może obawiasz się, że na przeszkodzie stanie Ci brak ukończonych studiów informatycznych? O nic się nie martw, po prostu zacznij lekturę!

Książka Zawód front-end developer. 11 kroków do zostania webmasterem bezboleśnie wprowadzi Cię w świat tworzenia stron WWW. Dzięki niej szybko poznasz podstawowe pojęcia branżowe i informacje niezbędne, aby rozpocząć przygodę z tą branżą oraz dołączyć do elitarnego grona rozchwytywanych specjalistów - autorów stron WWW. Poznasz warsztat pracy zawodowca, nauczysz się języka HTML5 i dowiesz się, jak tworzyć profesjonalne arkusze stylów CSS3. Odkryjesz możliwości, jakie oferują JavaScript i jQuery, a także poznasz podstawy języka PHP7. Dowiesz się też, jak zaprojektować i zbudować atrakcyjny serwis WWW oraz umieścić go w internecie.

Tworzenie stron WWW? Z tą książką to nic trudnego!

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

Darmowy fragment publikacji:

Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Redaktor prowadzący: Małgorzata Kulik Projekt okładki: Studio Gravite / Olsztyn Obarek, Pokoński, Pazdrijowski, Zaprucki Grafika na okładce została wykorzystana za zgodą Shutterstock.com Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/twwwwp Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. ISBN: 978-83-283-3885-2 Copyright © Helion 2019 Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treści 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 Poleć książkęKup książkę 6 Zawód front-end developer. 11 kroków do zostania webmasterem 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 Poleć książkęKup książkę Spis treści 7 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 Poleć książkęKup książkę 8 Zawód front-end developer. 11 kroków do zostania webmasterem 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 Poleć książkęKup książkę Spis treści 9 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 Poleć książkęKup książkę 10 Zawód front-end developer. 11 kroków do zostania webmasterem 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 Poleć książkęKup książkę Spis treści 11 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 Poleć książkęKup książkę 12 Zawód front-end developer. 11 kroków do zostania webmasterem Krok 10. Opublikuj stronę w internecie ........................................................................ 465 Krok 11. Rozpocznij własną przygodę .......................................................................... 469 Skorowidz ................................................................................................................. 471 Poleć książkęKup książkę Krok 6. Zbuduj stronę internetową 6.1. Moje zasady W tym kroku zbudujesz stronę internetową. Stosowany przeze mnie sposób pisania strony interne- towej jest moją praktyką, którą wypracowałem przez lata. Pamiętaj, że jest to jedynie sugestia, a nie wytyczne, którymi należy ślepo się kierować. Niektóre z przedstawionych zadań można wyko- nać na kilka sposobów. Kiedyś spotkałem się w internecie z twierdzeniem: „ilu programistów, tyle sposobów na rozwiązanie problemu”. Jeżeli znajdziesz własne rozwiązanie i będzie ono zgodne ze standardami oraz poprawne technicznie, jak najbardziej możesz je zastosować. 6.2. Projekt Zanim zaczniemy pisać kod strony, musimy wiedzieć, co chcemy stworzyć. Jak wspomniałem wcze- śniej, tworzona przez nas strona będzie stroną typu One Page dla osoby świadczącej usługi diete- tyczne. Nie jest to projekt, który można znaleźć w internecie. Na potrzeby książki zaprojekto- wałem stronę tak, aby zademonstrować w praktyce HTML i CSS oraz ogólne podejście do budowy witryny. Oczywiście niemożliwe jest wykorzystanie wszystkich znaczników czy właściwości CSS w jednej stronie internetowej. Jeszcze trudniej o to na stronie typu One Page. Na początku warto również określić przestrzeń kolorów, jakimi będziemy musieli się posługiwać. Jeżeli firma lub osoba prowadząca działalność posiada logo, to problem z głowy. Wtedy tworzy się stronę pasującą do koloru logo firmy. W naszym projekcie nie ma logo. Zdecydowałem się na wykorzystanie koloru brązowego oraz jego odcieni. W kolorze tym zostaną wykonane dodatki, takie jak ramki czy przyciski. Często w projektach wykorzystuję dwa lub trzy kolory bazowe. Więk- sza ich liczba może spowodować, że strona będzie wyglądać zbyt pstrokato. Tekst pozostawię stan- dardowo czarny lub w odcieniu czerni. Najważniejszą składową każdej witryny jest treść. Po określeniu typu strony oraz koloru lub kolorów bazowych należy zdecydować, jakie treści będą umieszczone na stronie. W naszym projekcie będą to następujące elementy: oferta diety, informacje o osobie piszącej diety, mapka dojazdowa do gabinetu oraz formularz kontaktowy. Wszystkie elementy należy poukładać w całość. Zazwyczaj mapka dojazdowa oraz formularz kontaktowy znajdują się na samym końcu strony. Oferta zostanie Poleć książkęKup książkę 216 Zawód front-end developer. 11 kroków do zostania webmasterem umieszczona nad informacjami o osobie piszącej diety, a na samym początku stworzymy tzw. top strony. Umieszcza się w nim jasne informacje dotyczące typu prowadzonej działalności, często ze zdjęciem w tle obrazującym wykonywane usługi. 6.3. Przygotowanie plików do pracy Do pracy należy przygotować sobie miejsce, w którym będziemy przechowywać wszystkie pliki strony. Możesz kontynuować pracę w folderze www, w którym znajdują się foldery: css oraz images. W pierwszym umieściliśmy plik style.css, w drugim natomiast będziemy przechowywać grafikę. Oprócz wymienionych folderów w folderze www znajduje się plik index.html. Całość powinna wyglądać jak na rysunku 6.1. RYSUNEK 6.1. Przygotowanie plików do pracy W pliku index.html stwórz pusty szkielet dokumentu HTML jak na listingu 6.1. Mamy już w nim połączenie z plikiem CSS oraz znacznik meta odpowiedzialny za stronę responsywną. LISTING 6.1. Przygotowanie pliku index.html do pracy !DOCTYPE HTML html lang= pl head meta charset= UTF-8 meta name= viewport content= width=device-width,initial-scale=1.0 title Moja strona WWW /title link href= css/style.css rel= stylesheet Poleć książkęKup książkę Krok 6. (cid:139) Zbuduj stronę internetową 217 /head body /body /html W pliku style.css skasuj wszystkie deklaracje, które w nim są, i zostaw plik całkowicie pusty. 6.4. Top strony 6.4.1. Co chcemy osiągnąć? Pierwsze (dobre) wrażenie jest bardzo ważne. Top strony to część witryny, którą użytkownik zobaczy zaraz po wczytaniu strony. Dlatego zawsze staram się, aby ta część przykuła uwagę użytkownika oraz spełniła rolę informacyjną, mówiącą, jakiego rodzaju treści może się on spodziewać. Tym, co najbardziej rzuca się w oczy, jest grafika na całą szerokość i wysokość okna przeglądarki. Na- stępnie na zdjęciu umieszczone zostały dwa teksty. Pierwszy z nich to cytat, a pod nim jest infor- macja opisująca świadczone usługi. Informację tę dodatkowo obrazuje zdjęcie w tle. Nieco niżej znajduje się przycisk prowadzący do oferty. Menu znajdujące się na samej górze zbudujemy nieco później. Na razie elementów jest niewiele, a efekt jest całkiem dobry. Na rysunku 6.2 pokazuję top strony, którą będziemy budować. RYSUNEK 6.2. Top strony Poleć książkęKup książkę 218 Zawód front-end developer. 11 kroków do zostania webmasterem 6.4.2. Utworzenie sekcji strony By utworzyć top strony jak na rysunku 6.2, musimy mieć odpowiednią grafikę. Jeżeli nie dysponu- jesz odpowiednim zdjęciem, możesz je pobrać z internetu. Jest kilka stron udostępniających darmową, dobrą grafikę. Możesz skorzystać np. ze strony https://stocksnap.io/, która ma w swojej bazie wiele zdjęć o różnej tematyce. Przed ich wykorzystaniem zapoznaj się z licencją, z której dowiesz się, na jakich zasadach możesz ich używać. Często po zdobyciu odpowiedniego zdjęcia trzeba je poddać drobnej obróbce w programie graficz- nym. Na pewno jednym z takich zabiegów będzie zmniejszenie rozmiaru do 1920×1080 px. Obecnie bardzo trudno spotkać wyższą rozdzielczość na komputerze. W przypadku grafiki o wskazanej roz- dzielczości można spróbować obniżyć jej jakość, aby uzyskać jak najmniejszą wagę pliku przy zachowaniu ostrości zdjęcia. Dodatkowym niezbędnym zabiegiem graficznym może się okazać lek- kie przyciemnienie grafiki w celu uzyskania lepszej czytelności umieszczonego na niej tekstu. Jeżeli już masz pasującą grafikę, możemy dodać ją do naszej strony. Pamiętaj, aby plik umieścić w folderze images. Przed dodaniem grafiki w pliku index.html dodajmy znaczniki semantyczne HTML5 header /header , które służą do umieszczenia treści początkowej na stronie. Więcej o tych znacznikach znajdziesz w podrozdziale 3.5 „Znaczniki semantyczne”. Do znacznika dodaj identyfikator, po którym będziemy odwoływać się do niego w pliku CSS. Plik powinien wyglądać jak na listingu 6.2. LISTING 6.2. Dodanie znaczników header /header !DOCTYPE HTML html lang= pl head meta charset= UTF-8 meta name= viewport content= width=device-width,initial-scale=1.0 title Moja strona WWW /title link href= css/style.css rel= stylesheet /head body header id= top_strony /header /body /html Przygotowaną grafikę musimy dodać jako tło dla elementu o nazwie identyfikatora #top_strony. Oprócz dodania grafiki element ten musimy rozciągnąć na całą szerokość i wysokość okna przeglą- darki. Do pliku style.css dodaj kod z listingu 6.3. LISTING 6.3. Kod CSS — rozciągnięcie grafiki na całą szerokość oraz wysokość okna przeglądarki html, body { height: 100 ; } /* TOP STRONY */ #top_strony { Poleć książkęKup książkę Krok 6. (cid:139) Zbuduj stronę internetową 219 width: 100 ; height: 100 ; background: url(../images/top_strony.jpg) no-repeat center; background-size: cover; } Na początku deklaracji elementom html /html oraz body /body nadajemy wysokość o wartości 100 . Inaczej nie uda się nam wyświetlić zdjęcia na całą wysokość okna przeglądarki. Następnie dodajemy odwołanie do elementu header /header poprzez nazwę identyfikatora. Element ten rozciągamy na całą szerokość oraz wysokość okna przeglądarki. W kolejnej linii kodu dla elementu ustawiamy grafikę jako tło. Skorzystałem z zapisu skróconego. Najpierw podaję ścieżkę do pliku, następnie ograniczam powielanie grafiki, a na samym końcu środkuję obraz. W ostatniej linii nakazujemy przeglądarce proporcjonalne rozciągnięcie obrazu w elemencie. Jeśli grafika jest większa od elementu, zostanie „ucięta”. Całość widać na rysunku 6.3. Więcej o grafice w tle w punkcie 4.3.4 „Tło obrazkowe”. RYSUNEK 6.3. Top strony wypełniony grafiką wstawioną w tle Pomiędzy jedną a drugą deklaracją wstawiłem komentarz, aby łatwiej było odszukać style odpo- wiednie dla danego fragmentu strony. Kiedy zawartość pliku CSS się „wydłuży”, łatwiej będzie od- naleźć się w kodzie. Mimo iż ustawiliśmy wszystko na wartość 100 , wokół grafiki znajduje się białe pole. Jest to domyślny margines elementu body /body , który należy usunąć. W tym celu wystarczy odwołać się do elementu body /body i skorzystać z właściwości margin o wartości 0 (jak na listingu 6.4). Przypominam, że gdy przypisuje się wartość zero, nie ma konieczności podawania jednostki. Poleć książkęKup książkę 220 Zawód front-end developer. 11 kroków do zostania webmasterem LISTING 6.4. Kod CSS — zerowanie marginesów dla body /body html, body { height: 100 ; } body { margin: 0; } /* TOP STRONY */ #top_strony { width: 100 ; height: 100 ; background: url(../images/top_strony.jpg) no-repeat center; background-size: cover; } Zapisz wszystkie pliki i odśwież stronę. Teraz zobaczysz, że grafika rozciąga się od krawędzi do krawędzi okna przeglądarki. 6.4.3. Dodanie nagłówków Mamy gotowe tło, możemy więc umieścić na nim dwa zdania tak jak w przykładzie. Cytat zostanie umieszczony w nagłówku h1 /h1 , a informacja o świadczonej usłudze w nagłówku h2 /h2 jak na listingu 6.5. LISTING 6.5. Kod HTML — dodanie dwóch akapitów header id= top_strony h1 W zdrowym ciele zdrowy duch /h1 h2 dieta indywidualna - dietetyk Maria /h2 /header Po zapisaniu pliku i odświeżeniu strony nasza grafika w tle nie przylega do górnej części okna przeglądarki, co widać na rysunku 6.4. RYSUNEK 6.4. Nagłówek h1 /h1 swoim domyślnym marginesem przesuwa całą zawartość w dół Poleć książkęKup książkę Krok 6. (cid:139) Zbuduj stronę internetową 221 By to zmienić, dla elementu header /header należy dodać właściwość overflow z wartością auto jak na listingu 6.6. Więcej o właściwości overflow w podrozdziale 4.3 „Podstawowe właściwości elementów”. Dodatkowo dla tego elementu wyśrodkujmy tekst tak, aby nasze nagłówki, a w później- szym czasie przycisk, znalazły się na środku strony. LISTING 6.6. Kod CSS — środkowanie tekstu w topie strony html, body { height: 100 ; } body { margin: 0; } /* TOP STRONY */ #top_strony { width: 100 ; height: 100 ; background: url(../images/top_strony.jpg) no-repeat center; background-size: cover; text-align: center; overflow: auto; } Po tych dwóch deklaracjach tło ponownie rozciąga się od krawędzi do krawędzi okna przeglądarki, a tekst zostanie wyśrodkowany. Na razie nasza treść nie prezentuje się zbyt dobrze. Zabiegiem po- prawiającym jakość tekstu będzie zmiana fontu. Użyłem w projekcie fontu Google o nazwie Poppins, wybierając dodatkowo pogrubienie o wartości 700 (standardowe pogrubienie). Krój czcionki jest bardzo ważnym elementem całej strony, gdyż treści będziemy wyświetlać tylko w tym jednym foncie. Jeżeli tak jak ja wybrałeś font Google, to zgodnie z ich dokumentacją w pliku HTML należy podać link do fontu (jak na listingu 6.7). LISTING 6.7. Dodanie linku do czcionki od firmy Google !DOCTYPE HTML html lang= pl head meta charset= UTF-8 meta name= viewport content= width=device-width,initial-scale=1.0 title Moja strona WWW /title link href= https://fonts.googleapis.com/css?family=Poppins:400,700 rel= stylesheet link href= css/style.css rel= stylesheet /head body header id= top_strony h1 W zdrowym ciele zdrowy duch /h1 h2 dieta indywidualna - dietetyk Maria /h2 /header /body /html Poleć książkęKup książkę 222 Zawód front-end developer. 11 kroków do zostania webmasterem W pliku CSS dla elementu body /body należy przypisać font zgodnie z zaleceniami Google. Po przypisaniu kroju czcionki do body /body jak na listingu 6.8 tekst na całej stronie zostanie wyświetlony w tym samym foncie. Szczegółowe informacje na temat dodania fontu od Google w podrozdziale 4.5 „Stylizacja tekstu”. LISTING 6.8. Kod CSS — przypisanie kroju fontu do elementu body /body html, body { height: 100 ; } body { margin: 0; font-family: Poppins , sans-serif; } /* TOP STRONY */ #top_strony { width: 100 ; height: 100 ; background: url(../images/top_strony.jpg) no-repeat center; background-size: cover; text-align: center; overflow: auto; } Dla całej strony internetowej ustawmy również wielkość fontu na 16px. Obecnie każda przeglą- darka wyświetla domyślnie tekst właśnie w takiej wielkości, jednak warto ją zdefiniować w przypadku zmiany domyślnych wartości. Jeżeli chcesz, możesz ustawić dowolną wielkość fontu. Do zmiany rozmiaru służy właściwość font-size. Przypisz ją do body /body z podaną wcześniej wartością jak na listingu 6.9. LISTING 6.9. Kod CSS — ustawienie rozmiaru fontu na stronie html, body { height: 100 ; } body { margin: 0; font-family: Poppins , sans-serif; font-size: 16px; } /* TOP STRONY */ #top_strony { width: 100 ; height: 100 ; background: url(../images/top_strony.jpg) no-repeat center; background-size: cover; text-align: center; overflow: auto; } Przypisanie rozmiaru fontu dla całej strony jest istotnym zabiegiem, gdyż następne rozmiary bę- dziemy podawać w jednostkach em. Co ma wspólnego rozmiar fontu przypisany do body / Poleć książkęKup książkę Krok 6. (cid:139) Zbuduj stronę internetową 223 (cid:180)body z jednostką em? Najlepiej będzie to zobrazować na przykładzie. W pliku CSS odwołaj się do nagłówka h1 /h1 , podając nazwę identyfikatora header /header , a za nią nazwę znacznika nagłówka stopnia pierwszego. Następnie przypisz właściwość font-size z wartością 3em jak na listingu 6.10. LISTING 6.10. Kod CSS — zmiana rozmiaru czcionki w nagłówku przy użyciu jednostki em html, body { height: 100 ; } body { margin: 0; font-family: Poppins , sans-serif; font-size: 16px; } /* TOP STRONY */ #top_strony { width: 100 ; height: 100 ; background: url(../images/top_strony.jpg) no-repeat center; background-size: cover; text-align: center; overflow: auto; } #top_strony h1 { font-size: 3em; } Zapisz plik i odśwież stronę. Zobaczysz, że nagłówek znacznie się zwiększył. Teraz zamiast warto- ści 3em przypisz 48px. Ponownie zapisz plik i odśwież stronę. Zauważysz, że absolutnie nic się nie zmieniło. Stało się tak dlatego, że po przypisaniu do elementu nadrzędnego rozmiaru fontu o wartości 16px jednostka 1em dla elementu podrzędnego automatycznie wynosi 16px. W skrócie 16px = 1em. Dlatego wartość 3em = 48px. Wynika to z prostego mnożenia 16px × 3em = 48px. Mamy wszędzie zdefiniowaną wielkość fontu w jednostce em, wystarczy więc zmienić wartość właściwości font-size dla elementu body /body , aby zmienić rozmiar tekstu na całej stronie. Powracając do naszego przykładu dla elementu h1 /h1 , przypisz rozmiar 3.5em, a dla nagłówka h2 /h2 ustaw rozmiar na 2em, jak na listingu 6.11. LISTING 6.11. Kod CSS — zmiana rozmiaru czcionki dla nagłówków w topie strony html, body { height: 100 ; } body { margin: 0; font-family: Poppins , sans-serif; font-size: 16px; } /* TOP STRONY */ #top_strony { width: 100 ; Poleć książkęKup książkę 224 Zawód front-end developer. 11 kroków do zostania webmasterem height: 100 ; background: url(../images/top_strony.jpg) no-repeat center; background-size: cover; text-align: center; overflow: auto; } #top_strony h1 { font-size: 3.5em; } #top_strony h2 { font-size: 2em; } Teraz zmienimy kolor fontu. Najlepiej go zdefiniować w elemencie header /header , co spowo- duje zmianę koloru tekstu w jego elementach nadrzędnych, czyli w nagłówkach. Dopisz kolor tekstu jak na listingu 6.12. LISTING 6.12. Kod CSS — zmiana koloru tekstu w topie strony html, body { height: 100 ; } body { margin: 0; font-family: Poppins , sans-serif; font-size: 16px; } /* TOP STRONY */ #top_strony { width: 100 ; height: 100 ; background: url(../images/top_strony.jpg) no-repeat center; background-size: cover; text-align: center; color: rgb(245,245,245); overflow: auto; } #top_strony h1 { font-size: 3.5em; } #top_strony h2 { font-size: 2em; } Ostatnim zabiegiem przy edycji fontu będzie usunięcie domyślnego pogrubienia (font-weight) oraz nadanie delikatnego cienia (text-shadow) dla tekstu w obu nagłówkach. W przypadku cienia zastosowałem zapis skrócony, którego pierwsze dwie wartości odpowiadają za położenie cienia, trzecia wartość za jego intensywność, a ostatnia to kolor cienia. Więcej na temat tekstu w podroz- dziale 4.5 „Stylizacja tekstu”. Na listingu 6.13 widać opisane zmiany. Poleć książkęKup książkę Krok 6. (cid:139) Zbuduj stronę internetową 225 LISTING 6.13. Kod CSS — usunięcie pogrubienia oraz nadanie cienia dla nagłówków html, body { height: 100 ; } body { margin: 0; font-family: Poppins , sans-serif; font-size: 16px; } /* TOP STRONY */ #top_strony { width: 100 ; height: 100 ; background: url(../images/top_strony.jpg) no-repeat center; background-size: cover; text-align: center; color: rgb(245,245,245); overflow: auto; } #top_strony h1 { font-size: 3.5em; font-weight: normal; text-shadow: 0 0 3px rgb(10,10,10); } #top_strony h2 { font-size: 2em; font-weight: normal; text-shadow: 0 0 3px rgb(10,10,10); } Po wszystkich zmianach całość powinna wyglądać jak na rysunku 6.5. RYSUNEK 6.5. Stylizacja nagłówków w topie strony Do osiągnięcia zamierzonych efektów brakuje tylko ustawienia nagłówków bliżej siebie oraz odsu- nięcia ich od górnej krawędzi. Odwołaj się do nagłówków po ich nazwach i dla obu wyzeruj margi- nes wewnętrzny oraz zewnętrzny jak na listingu 6.14. LISTING 6.14. Kod CSS — zerowanie marginesów dla nagłówków html, body { height: 100 ; } Poleć książkęKup książkę 226 Zawód front-end developer. 11 kroków do zostania webmasterem body { margin: 0; font-family: Poppins , sans-serif; font-size: 16px; } h1, h2 { margin: 0; padding: 0; } /* TOP STRONY */ #top_strony { width: 100 ; height: 100 ; background: url(../images/top_strony.jpg) no-repeat center; background-size: cover; text-align: center; color: rgb(245,245,245); overflow: auto; } #top_strony h1 { font-size: 3.5em; font-weight: normal; text-shadow: 0 0 3px rgb(10,10,10); } #top_strony h2 { font-size: 2em; font-weight: normal; text-shadow: 0 0 3px rgb(10,10,10); } Deklaracje dla nagłówków dodałem tuż za deklaracją dla body /body , gdyż zerowanie margine- sów będzie dotyczyło wszystkich nagłówków, które zostaną utworzone na stronie. Jeżeli użyłeś sty- lów resetujących, nie musisz dodawać zerowania marginesów dla nagłówków. Mimo usunięcia marginesów oba teksty nie przylegają do siebie. Tak samo jak tekst w akapicie, tak i nagłówki mają wysokość wiersza. Tylko dla nagłówka h2 /h2 do właściwości line-height przypisz wartość zero jak na listingu 6.15. LISTING 6.15. Kod CSS — zerowanie wysokości wiersza dla nagłówka h2 /h2 html, body { height: 100 ; } body { margin: 0; font-family: Poppins , sans-serif; font-size: 16px; } h1, h2 { margin: 0; padding: 0; } /* TOP STRONY */ #top_strony { width: 100 ; height: 100 ; Poleć książkęKup książkę Krok 6. (cid:139) Zbuduj stronę internetową 227 background: url(../images/top_strony.jpg) no-repeat center; background-size: cover; text-align: center; color: rgb(245,245,245); overflow: auto; } #top_strony h1 { font-size: 3.5em; font-weight: normal; text-shadow: 0 0 3px rgb(10,10,10); } #top_strony h2 { line-height: 0; font-size: 2em; font-weight: normal; text-shadow: 0 0 3px rgb(10,10,10); } Oba akapity wyglądają dokładnie tak samo jak w przykładzie, co widać na rysunku 6.6. RYSUNEK 6.6. Nagłówki wyglądające tak jak w przykładzie Jedyne, co pozostało, to odsunąć całość od górnej krawędzi okna przeglądarki. W tym celu dla nagłówka h1 /h1 wystarczy przypisać margines górny wynoszący 15 (jak na listingu 6.16). Jeżeli chcesz, możesz przypisać inną wartość dla marginesu. Pamiętaj jedynie, że w topie strony będzie znajdować się jeszcze menu oraz przycisk pod nagłówkami. Dlatego margines musi zostać odpowiednio dobrany. Na wielu stronach internetowych tego typu tekst zazwyczaj jest środkowany względem okna przeglądarki. Uważam, że lepiej wygląda, kiedy taki tekst jest wyżej niż w połowie wysokości okna przeglądarki. LISTING 6.16. Kod CSS — odsunięcie nagłówków od górnej krawędzi okna przeglądarki html, body { height: 100 ; } body { margin: 0; font-family: Poppins , sans-serif; font-size: 16px; } h1, h2 { margin: 0; padding: 0; } /* TOP STRONY */ #top_strony { width: 100 ; Poleć książkęKup książkę 228 Zawód front-end developer. 11 kroków do zostania webmasterem height: 100 ; background: url(../images/top_strony.jpg) no-repeat center; background-size: cover; text-align: center; color: rgb(245,245,245); overflow: auto; } #top_strony h1 { margin-top: 15 ; font-size: 3.5em; font-weight: normal; text-shadow: 0 0 3px rgb(10,10,10); } #top_strony h2 { line-height: 0; font-size: 2em; font-weight: normal; text-shadow: 0 0 3px rgb(10,10,10); } Wcześniej marginesy zewnętrzne dla obu nagłówków były zerowane. Deklaracje te znajdują się tuż pod deklaracjami dla elementu body /body . Przypisując górny margines dla elementu h1 /h1 , który znajduje się w elemencie header /header , dokonaliśmy nadpisania stylów. Wcześniej pisałem, że przeglądarka wykonuje plik CSS linijka po linijce. Dlatego zerowy margines górny nagłówka zdeklarowany wcześniej zostanie zastąpiony przez ten, który dodaliśmy przed chwilą. Całość będzie wyglądać jak na rysunku 6.7. RYSUNEK 6.7. Położenie nagłówków na stronie internetowej Poleć książkęKup książkę Krok 6. (cid:139) Zbuduj stronę internetową 229 Przypominam, że wartości procentowe są naliczane od wielkości elementu nadrzędnego. Elemen- tem nadrzędnym nagłówka jest header /header , który rozciągamy na całą szerokość i wysokość okna przeglądarki. Dlatego margines górny nagłówka h1 /h1 jest liczony względem wielkości okna przeglądarki. Jego wielkość natomiast uzależniona jest od rozdzielczości monitora, na którym użytkownik przegląda stronę. 6.4.4. Tworzenie przycisku Ostatnim elementem brakującym w topie strony jest duży, animowany przycisk. Button tworzy się za pomocą znaczników button /button , które służą do wysyłania danych z formularza. Przycisk, który znajduje się w topie strony, wykonamy z linku za pomocą znaczników a /a . Po kliknięciu zostaniemy przeniesieni do odpowiedniej sekcji strony. Zawsze będzie możliwość dodania linku do innego pliku HTML czy strony internetowej, jeżeli będzie taka konieczność. W pliku index.html pod nagłówkami utwórz znacznik akapitu, wewnątrz niego umieść znaczniki a /a jak na listingu 6.17. LISTING 6.17. Kod HTML — dodanie linku prowadzącego do oferty header id= top_strony h1 W zdrowym ciele zdrowy duch /h1 h2 dieta indywidualna - dietetyk Maria /h2 p a href= # PRZEJRZYJ OFERT(cid:125) /a /p /header Przypomnę, że link standardowo jest koloru niebieskiego i ma podkreślenie. Taki też wygląd linku znajdującego się pod nagłówkami powinieneś zobaczyć na swojej stronie. Pierwszą deklaracją będzie dodanie górnego marginesu dla akapitu (jak na listingu 6.18). Margines powinien być na tyle duży, aby cały akapit znajdował się nieco poniżej połowy strony. LISTING 6.18. Kod CSS — odsunięcie linku od nagłówków html, body { height: 100 ; } body { margin: 0; font-family: Poppins , sans-serif; font-size: 16px; } h1, h2 { margin: 0; padding: 0; } /* TOP STRONY */ #top_strony { width: 100 ; height: 100 ; background: url(../images/top_strony.jpg) no-repeat center; background-size: cover; text-align: center; Poleć książkęKup książkę 230 Zawód front-end developer. 11 kroków do zostania webmasterem color: rgb(245,245,245); overflow: auto; } #top_strony h1 { margin-top: 15 ; font-size: 3.5em; font-weight: normal; text-shadow: 0 0 3px rgb(10,10,10); } #top_strony h2 { line-height: 0; font-size: 2em; font-weight: normal; text-shadow: 0 0 3px rgb(10,10,10); } #top_strony p { margin-top: 18 ; } Zdecydowałem się na nadanie górnego marginesu dla akapitu w celu odsunięcia linku. Możesz usunąć tę deklarację i przypisać margines dolny dla nagłówka h2 /h2 o tej samej wartości, aby uzyskać ten sam rezultat. Miej na uwadze, że do uzyskania jakiegoś efektu można wykorzystać kilka sposobów. Zauważ, że każde odwołanie do elementów wewnątrz header /header poprzedzam nazwą iden- tyfikatora tego elementu. Można by do znacznika p /p lub dowolnego nagłówka dodać id lub class i za pomocą nazwy odwołać się do elementu w pliku CSS. Taka konstrukcja byłaby jak najbardziej prawidłowa. Jednak nadanie id dla elementów nietworzących ramy strony lub elementów bardzo istotnych jest mało praktyczne. Elementy w topie strony bardzo często są styli- zowane osobno i dokładnie ten sam styl nie jest już nigdzie powtarzany na stronie. Dlatego identyfikacja z wykorzystaniem selektora potomka jest najbardziej praktycznym rozwiązaniem. Jeżeli chcemy, aby link wyglądał jak przycisk, musimy z linku usunąć domyślne podkreślenie, zmienić kolor tekstu oraz dodać tło. Korzystając z marginesu wewnętrznego, zwiększymy zakres aktywności linku, co ostatecznie sprawi, że link będzie wyglądał jak przycisk. Tak jak poprzednio, i tym razem odwołamy się do elementu a /a , korzystając z selektora potomka, co widać na listingu 6.19. LISTING 6.19. Kod CSS — stylizacja linku, która upodobni go do przycisku html, body { height: 100 ; } body { margin: 0; font-family: Poppins , sans-serif; font-size: 16px; } h1, h2 { margin: 0; padding: 0; } Poleć książkęKup książkę Krok 6. (cid:139) Zbuduj stronę internetową 231 /* TOP STRONY */ #top_strony { width: 100 ; height: 100 ; background: url(../images/top_strony.jpg) no-repeat center; background-size: cover; text-align: center; color: rgb(245,245,245); overflow: auto; } #top_strony h1 { margin-top: 15 ; font-size: 3.5em; font-weight: normal; text-shadow: 0 0 3px rgb(10,10,10); } #top_strony h2 { line-height: 0; font-size: 2em; font-weight: normal; text-shadow: 0 0 3px rgb(10,10,10); } #top_strony p { margin-top: 18 ; } #top_strony p a { padding: 25px 80px; background: rgb(245,245,245); color: rgb(83,62,26); text-decoration: none; } Na początku za pomocą właściwości padding zwiększamy obszar działania linku. Skorzystałem z zapisu skróconego dla marginesu wewnętrznego, którego pierwsza wartość odpowiada za margi- nes górny i dolny, a wartość druga za margines prawy i lewy. Następnie zdefiniowane zostaje tło i kolor tekstu. Na samym końcu pozbywamy się domyślnego podkreślenia linku. Całość powinna wyglądać jak na rysunku 6.8. Za pomocą pseudoklasy hover nadamy aktywność dla przycisku jak na listingu 6.20. Po umieszcze- niu kursora na przycisku kolor tła zmieni się na kolor tekstu, a kolor tekstu na kolor tła. Dla uzyska- nia płynnego przejścia kolorów użyjemy właściwości transition. LISTING 6.20. Kod CSS — nadanie aktywności przyciskowi po umieszczeniu na nim kursora html, body { height: 100 ; } body { margin: 0; font-family: Poppins , sans-serif; font-size: 16px; } Poleć książkęKup książkę 232 Zawód front-end developer. 11 kroków do zostania webmasterem h1, h2 { margin: 0; padding: 0; } /* TOP STRONY */ #top_strony { width: 100 ; height: 100 ; background: url(../images/top_strony.jpg) no-repeat center; background-size: cover; text-align: center; color: rgb(245,245,245); overflow: auto; } #top_strony h1 { margin-top: 15 ; font-size: 3.5em; font-weight: normal; text-shadow: 0 0 3px rgb(10,10,10); } #top_strony h2 { line-height: 0; font-size: 2em; font-weight: normal; text-shadow: 0 0 3px rgb(10,10,10); } #top_strony p { margin-top: 18 ; } #top_strony p a { padding: 25px 80px; background: rgb(245,245,245); color: rg
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Zawód front-end developer. 11 kroków do zostania webmasterem
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ą: