W poprzedniej części tutorialu stworzyliśmy razem szkielet strony www. Jeżeli chcielibyśmy poprzestać na warstwie treści, to serię można byłoby uznać za zamkniętą. My jednak pójdziemy o krok dalej i w tej części zajmiemy się dostosowaniem pliku HTML w taki sposób, ale później bez przeszkód pisać style CSS.
Na początek
Podczas pisania stylów dla strony w kolejnej części tutorialu będziemy się opierać na makietach zawartych tutaj. Zaktualizowany plik HTML jest dostępny pod tym linkiem. Zdjęcia, z których korzystam niezmiennie znajdują się tutaj.
Dodawanie CSS do HTML
Na początek dobrze byłoby poinformować plik HTML, że podczas wyświetlania powinien doczytać style. Można to zrobić na kilka sposobów (więcej o najważniejszych metodach pisałam we wpisie o tym co to jest CSS), ja wykorzystam możliwość dodawania zewnętrznego pliku CSS. W tym celu edytuję sekcję <head> pliku index.html. Po edycji prezentuje się następująco:
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
<title property="name">przepiśnik</title>
</head>Teraz jest dobry moment na to, żeby utworzyć plik, do którego odwołuję się w linku, czyli tuż obok pliku index.html. Jak wcześniej w Visual Studio Code wybieram z górnego menu File => New File i zapisuję plik pod nazwą styles.css. Gotowe!
Normalizacja stylów
Na tym etapie warto zadbać o jeszcze jeden dość istotny element wpływający na jakość strony www, mianowicie na jej możliwie jak najbardziej zbliżone wyświetlanie na różnych przeglądarkach internetowych. Tak się bowiem składa, że pomiędzy przeglądarkami istnieją różnice w sposobie, w jaki renderują elementy HTML.
Programiści mają do wyboru kilka sposób wyjścia z tej sytuacji. Jednym z rozwiązań jest resetowanie domyślnych stylów przeglądarek i przywrócenie pierwotnego sposobu wyświetlania poszczególnych elementów. Jest to rozwiązanie najstarsze i w mojej ocenie dość radykalne, choć korzystałam z niego wielokrotnie. W tej chwili skłaniam się ku normalizacji stylów przy użyciu narzędzia normalize.css, które modyfikuje wybrane style w taki sposób, aby wyświetlanie w przeglądarkach było spójne.
Aby skorzystać z dobrodziejstw płynących z normalizacji stylów, należy dodać link do arkusza stylów w sekcji <head> dokumentu HTML, pamiętając aby znalazł się przed linkiem do pliku styles.css. W tym momencie kod sekcji <head> przybrał kształt:
<head> <meta charset="UTF-8" /><link rel="stylesheet" href="https://csstools.github.io/normalize.css/11.0.0/normalize.css" /> <link rel="stylesheet" href="styles.css" /> <title property="name">przepiśnik</title> </head>
Skalowanie strony
W 2020 roku tworzenie stron internetowych wyłącznie z myślą o użytkownikach desktopowych wydaje się żartem. Każdy z nas spędza niejednokrotnie długie godziny w sieci za pośrednictwem swojego smartphone’a czy tabletu. Garść teorii o responsywności i wsparciu przeglądarek opublikowałam tutaj.
Makiety do projektu obejmują właśnie te trzy urządzenia i żeby możliwa była realizacja widoków za pomocą CSS, należy w pliku HTML dodać jeszcze znacznik <meta> z właściwością viewport:
<head> <meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><link rel="stylesheet" href="https://csstools.github.io/normalize.css/11.0.0/normalize.css" /> <link rel="stylesheet" href="styles.css" /> <title property="name">przepiśnik</title> </head>
W tym miejscu można ustawiać wartości wybranych parametrów, np.:
- width – początkowa szerokość obszaru wyświetlania przeglądarki wyrażona w pikselach lub kluczem 'device-width’, tj. pełna szerokość obszaru wyświetlania;
- height – początkowa wysokość obszaru wyświetlania przeglądarki wyrażona w pikselach lub kluczem 'device-height’, tj. pełna szerokość obszaru wyświetlania;
- initial-scale – początkowa wartość skalowania strony;
- minimum-scale – minimalna wartość skalowania, jaka może zostać uzyskana przez użytkownika;
- maximum-scale – maksymalna wartość skalowania dostępna dla użytkownika.
Wartości wymienionych wyżej parametrów *-scale muszą mieścić się w zakresie 0.0 – 10.0.
Aktualizowanie zdalnego repozytorium
Aby zaktualizować pliki w zdalnym repozytorium należy ponownie wykonać sekwencję kroków, które opisałam i opatrzyłam zrzutami ekranu w tym miejscu. Krótka ściąga:
- git add -A – dodanie wszystkich plików do stage’a
- git commit -m “message” – tworzenie commita, czyli jednostki zatwierdzania zmian dodanych do stage’a
- git push -u origin master – wypchnięcie zmian z repozytorium lokalnego do repozytorium zdalnego na branch master
Podsumowanie
Ten krótki opis konfiguracji jest pomostem łączącym HTML z CSSem. W tej chwili nie pozostaje już nic innego jak zabrać się za implementację stylów 🙂
2 komentarze
Widzę że te wpisy będą bardzo długo trwały 🙂 chyba ze na koniec zrobić takie podsumowanie wszystkich części aby mieć cały kurs w jednym wpisie.
Mam czasami problem ze skalowaniem strony. Jest to proces, który sprawia mi dosyć poważne problemy. Fajny poradnik, naprawdę sporo można się dowiedzieć.