Przygotowanie do kursu CSS

W realnym świecie, gdy chcemy coś narysować, to potrzebujemy do tego celu kartki papieru oraz kredek. Kiedy zaczniemy już coś rysować, na naszej kartce papieru, to widzimy od razu, co udało nam się stworzyć.

W świecie wirtualnym naszą kartką papieru będzie plik HTML, naszymi kredkami będzie język CSS, a dzięki przeglądarce internetowej będziemy mogli zobaczyć, co udało nam się stworzyć w pliku HTML.

Inaczej mówiąc, zanim poznamy składnię języka CSS, musimy w odpowiedni sposób przygotować się do kursu CSS.

Będziemy potrzebowali:

  • plik HTML
  • plik CSS
  • folder, w którym będziemy przechowywać nasz plik HTML oraz plik CSS
  • przeglądarkę internetową, w której będziemy wyświetlać nasz plik HTML
  • narzędzie, w którym będziemy modyfikować kod naszych plików HTML i CSS

Wykonujemy następujące czynności:

  • tworzymy nowy dokument tekstowy i zapisujemy go z rozszerzeniem .html, na przykład strona.html, w ten sposób utworzyliśmy plik HTML, czyli dokument HTML, w którym będziemy umieszczać kod HTML, dzięki czemu będziemy mogli tworzyć elementy HTML, które z kolei po wyświetleniu w oknie przeglądarki internetowej utworzą wygląd naszej strony internetowej
  • tworzymy nowy dokument tekstowy i zapisujemy go z rozszerzeniem .css, na przykład arkusz.css, w ten sposób utworzyliśmy plik CSS, w którym będziemy zapisywać reguły CSS, które z kolei będą odpowiadały za właściwości wyglądu różnych elementów HTML umieszczonych w dokumencie HTML, w postaci kodu HTML
  • tworzymy nowy folder, możemy nazwać go: www, będzie służył on do przechowywania naszych plików HTML i CSS
  • nasze wcześniej utworzone pliki strona.html oraz arkusz.css umieszczamy w folderze www

Jeżeli nadal masz problem z utworzeniem omawianych plików HTML i CSS, to możesz pobrać je klikając w następujący link.

Aby sprawdzić wygląd pliku HTML należy go otworzyć za pomocą przeglądarki internetowej, najlepiej wykorzystać do tego celu jedną z następujących przeglądarek, czyli: Firefox, Google Chrome, Opera, Internet Explorer (najlepiej w wersji 10+), Safari.

Obecnie, przeglądarkami internetowymi, które liczą się na rynku przeglądarek internetowych są przeglądarki: Firefox oraz Google Chrome. Nieco z tyłu pozostają Opera, Internet Explorer, Safari. Przeglądarki internetowe mają to do siebie, że niektóre działają nieco wolniej, niektóre nieco szybciej, niektóre oferują nam nieco więcej różnego rodzaju funkcji, niektóre nieco mniej itp. Jednak przede wszystkim różne przeglądarki internetowe mogą różnie interpretować (rozumieć) nasz kod HTML, czy kod CSS, który napiszemy. Mowa tu przede wszystkim o starszych wersjach przeglądarki Internet Explorer. Na szczęście przeglądarka Internet Explorer od wersji 10 radzi sobie już prawie ze wszystkim tym, z czym radzą sobie pozostałe przeglądarki internetowe. Dlatego gdy zdecydujemy się na napisanie jakiejś poważniejszej strony internetowej, to musimy sprawdzić jak nasza strona internetowa wyświetla się w różnych najpopularniejszych przeglądarkach internetowych używanych przez użytkowników sieci internet. Ja, osobiście używam przeglądarki Firefox, chociaż nie jest ona zbyt szybka w porównaniu z innymi przeglądarkami internetowymi.

Pisząc kod strony internetowej należy również pamiętać o przeglądarkach internetowych, które są przeznaczone dla urządzeń mobilnych (komórki, tablety itp.), oczywiście, jeżeli chcemy, aby nasza strona internetowa w miarę dobrze wyświetlała się również w tego typu urządzeniach.

W tym kursie CSS będą prezentowane różne nowości, jakie zostały dodane do języka CSS, stosunkowo nie tak dawno, dlatego przy każdej takiej nowości znajdziesz link do serwisu caniuse.com, który został stworzony po to, abyśmy mogli sprawdzać, które przeglądarki internetowe i w jakiej wersji, przeznaczone dla urządzeń stacjonarnych oraz mobilnych, interpretują daną nowość języka CSS i nie tylko.

Wspomniana strona jest napisana w języku angielskim, lecz w niczym nam to nie będzie przeszkadzać, ponieważ w większości przypadków będą nas interesowały tylko informacje, jakie znajdują się w tabelach, w serwisie caniuse.com.

Możesz spojrzeć na następującą tabelę - Animacje CSS3 - która zawiera informacje o interpretacji animacji CSS3 przez poszczególne przeglądarki internetowe. Jeżeli pole w tabeli jest koloru jasnozielonego, to oznacza to, że dana przeglądarka internetowa interpretuje daną nowość, czyli w naszym przykładzie tą nowością są animacje CSS3. Jeżeli pole w tabeli jest koloru jasnoczerwonego to oznacza to brak interpretacji przez daną wersje przeglądarki internetowej. Pole tabeli o kolorze ciemnozielonym oznacza częściową interpretację, natomiast kolor jasnofioletowy oznacza brak informacji o tym czy następna wersja danej przeglądarki internetowej zacznie interpretować daną nowość.

Skoro wybór przeglądarki internetowej mamy już za sobą, to czas na wybór narzędzia, które pomoże nam w pisaniu kodu HTML oraz CSS.

Do modyfikowania kodu plików HTML i CSS będziemy wykorzystywać darmowe narzędzie, które nazywa się Notepad++. Wspomniane narzędzie Notepad++ należy wyszukać w sieci, ściągnąć i zainstalować na własnym komputerze. Aby móc modyfikować, nasze wcześniej utworzone pliki strona.html oraz arkusz.css, należy otworzyć je za pomocą wspomnianego Notepad++.

Oczywiście moglibyśmy modyfikować kod naszych plików HTML i CSS za pomocą notatnika, jednak jest to męką.

Spójrzmy na kod pliku HTML, który został wyświetlony za pomocą notatnika:

kod HTML w notatniku

A teraz spójrzmy na ten sam kod pliku HTML, który został wyświetlony za pomocą Notepad++.

kod HTML w notatniku

Kolorowa składnia jest bardzo dużym udogodnieniem podczas modyfikowania różnych plików, dzięki czemu przyspiesza ona naszą pracę.

Bardziej profesjonalnym narzędziem do modyfikowania oraz tworzenia różnych plików, które tworzą stronę internetową, jest narzędzie zwane Adobe Dreamweaver. Wspomniany Adobe Dreamweaver nie jest niestety narzędziem darmowym, jednak równie dobrze możemy radzić sobie bez niego.

W następnej części kursu CSS poznamy podstawowy kod HTML, który należy umieścić w dokumencie HTML, jak również zapoznamy się z podstawowymi informacjami dotyczącymi dokumentu HTML.