Od zera do stron kodera cz.2

Witam w kolejnej części artykułu dotyczącego nauki tworzenia stron internetowych. Dzisiaj dowiesz się czym są kaskadowe arkusze stylów (ang. Cascading Style Sheets), czyli CSS i poznasz ich praktyczne zastosowanie. Głównie skoncentrujemy się właśnie na tym, choć pokażę Ci również Meta tagi.

Otwórz programem Notepad++ swój plik .html, który napisałeś podczas poprzedniej części tego tutoriala. Jeśli go nie masz, możesz pobrać ode mnie stąd.

Wstęp do CSS

CSS to arkusz (plik), który służy do nadawania odpowiedniej formy dokumentom (x)HTML. Najprościej mówiąc, dzięki niemu możemy zmieniać wygląd naszej strony WWW, bez zmiany treści.

Najpierw musimy “poÅ‚Ä…czyć” naszÄ… stronÄ™ z arkuszem. NastÄ™pujÄ…cy kod wpisujemy w sekcji head.

<link rel="stylesheet" type="text/css" media="screen,projection" href="style.css" />

Nie będę teraz tłumaczył poszczególnych atrybutów, pamiętaj tylko, że href podaje lokalizację i nazwę arkusza. Przyjęło się, że arkusz nazywa się style.

Tworzymy dokument CSS

Pamiętasz jak mówiłem o zaletach programu Notepad++? Teraz będziesz miał okazję się o nich przekonać. Aby zrobić arkusz, nie trzeba żadnych dodatkowych programów, wystarczy zrobić nowy dokument. Kliknij Plik > Nowy lub po prostu naciśnij Ctrl + N. W programie pojawi się nowa zakładka. Teraz podobnie jak w przypadku tworzenia dokumentu HTML wybierz odpowiedni język, czyli: Język > C > CSS. Następnie zapisz ten plik (w katalogu z plikiem index.html) jako style.css.

Składnia dokumentu

Arkusz składa się z reguł, które definiują styl (wygląd) danych elementów strony.

element {
  wÅ‚aÅ›ciwość: wartość; }

Tym elementem może być po prostu element języka HTML (body, p itd.), jak również klasa, którą musimy wcześniej wstawić w dokumencie HTML.

Ważne!
Pamiętaj, że każda właściwość musi być zakończona średnikiem, a cały zbiór właściwości musi znajdować się w nawiasach klamrowych.

Poszczególne elementy wraz z ich definicjami można pisać w jednej linijce, jednak prowadzi to później do bałaganu. Jeśli lubisz mieć wszystko przejrzyste i jasne, radzę pisać tak jak ja. Ok, koniec suchych informacji. Pokażę Ci to na przykładach.

Pierwszy element

Jak już wiesz, w dokumencie HTML całą treść strony piszemy w sekcji body. Dlatego też w CSS możemy przypisać jej jakiś wygląd. Do dzieła! Napisz w pliku style.css następujący kod:

body {
  background-color: green; }

Teraz otwórz swój plik html w przeglądarce i zobacz co się stało. Jeśli wszystko dobrze zrobiłeś, powinienieś uzyskać taki rezultat:

Jak to działa? Jeśli choć trochę znasz angielski, na pewno już wiesz. Jeśli nie, już tłumaczę. Właściwość background-color określa nam kolor tła strony. Napisaliśmy green, czyli zielony. Możemy napisać, np. black, blue itd. Są to jednak kolory z podstawowej palety. Co jeśli chcemy ustawić na tło jakiś niestandardowy kolor? Możemy użyć kolorów o wartości HEX, który wygląda następująco: #123456. Na początku jest płotek a później wartość danego koloru. Skąd wziąć HEX dowolnego koloru?

Możesz użyć dowolnego programu graficznego, np. Adobe Photoshop

Możesz także skorzystać z Kroplomierza – specjalnej wtyczki do Firefoxa, o której pisaÅ‚em tutaj. Pobierz wiÄ™c próbkÄ™ jakiegoÅ› koloru i wstaw go w kodzie. PrzykÅ‚ad:

Dobra, to tylko kolor. Zapewne chcesz wiedzieć jak na tło strony ustawić jakiś obrazek. Zamiast background-color, trzeba użyć:

background: url(nazwa_obrazka.png);

Jeśli nie masz pod ręką żadnego obrazka, który nadawałby się na tło strony, pobierz go stąd. W tym wypadku nasz obrazek (nazwa_obrazka.png) musi znajdować się w folderze z plikiem index.html oraz style.css.

Rada
Tworząc strony internetowe, będziesz używał wielu obrazków, dlatego lepiej trzymać wszystkie w osobnym katalogu (folderze). Ułatwi Ci to pracę, dlatego zrób nowy folder, np. img i tam wrzucaj wszystkie obrazki. Wtedy podajesz lokalizaję img/nazwa_obrazka.png, np.

background: url(img/tlo.png);

Spowoduje to zapętlenie obrazka, tzn. zostanie nim wypełniona cała strona. Jeśli chcesz, żeby obrazek zapętlał się tylko w poziomie, musisz napisać:

background: url(img/tlo.png) repeat-x;

Zapętlenie obrazka tylko w pionie osiągamy przez:

background: url(img/tlo.png) repeat-y;

Jeśli chcesz, żeby obrazek pojawił się raz (bez zapętlenia), napisz:

background: url(img/tlo.png) no-repeat;

W elemencie body możemy także ustawić wielkość i kolor czcionki naszej strony, np.

  font-size: 15px;
  color: #222222;

Teraz mój plik style.css wygląda tak:

To, co usatwimy w tym elemencie odnosi się do całej strony. Nie oznacza to jednak, że nie możemy gdzieś w środku strony napisać tekstu w innym kolorze czy większą/mniejszą czcionką. Oczywiście jest to możliwe, ale o tym za chwilę.

Wyśrodkowanie strony

Pewnie zdążyłeś zauważyć, że nie robi się już stron, które zaczynają się w lewym górnym rogu okna przeglądarki. Pisze się strony wyśrodkowane. Wielu ludzi popełnia w tym miejscu błąd, wyśrodkowując stronę pod kątem ich monitora. Nie zdają sobie sprawy z tego, że ktoś może mieć inną rozdzielczość monitora (mniejszą lub większą) i strona wtedy będzie przesunięta w lewo lub w prawo. Aby poprawnie wyśrodkować całą stronę musimy posłużyć się klasą.

W naszym kodzie html musimy napisać klasę, którą później wyśrodkujemy w css. Napisz więc następujący kod zaraz pod znacznikem body

<div class="calosc">

Znacznik div wymaga zamknięcia (</div>). Chcemy objąć całą zawartość naszej strony w tego diva, więc zamykamy go linijkę przed zamknięciem znacznika body, czyli przed: </body>. Twój kod html powinien teraz wyglądać tak:

Ok, mamy zrobioną klasę, teraz przechodzimy do pliku style.css. Oprócz samego wyśrodkowania, musimy wyznaczyć szerokość naszej strony. Standardowo używam szerokośći 960px, ponieważ jest to optymalna szerokość na różne monitory. Nasza strona jest (jak na razie) trochę uboga, więc zwężymy ją do 700px. Napisz pod zakończonym elementem body:

.calosc {
  width: 700px;
  margin-left: auto;
  margin-right: auto; }

Teraz wytÅ‚umaczÄ™ Ci o co chodzi. Przed nazwÄ… klasy konieczne jest wstawienie kropki. WÅ‚aÅ›ciwość width jest Ci na pewno znana – oznacza ona szerokość, margin-left okreÅ›la odstÄ™p danego elementu (w tym przypadku klasy calosc) od lewej strony, margin-right odstÄ™p od prawej. Klasa calosc jest pierwszÄ… klasÄ… w dokumencie html, wiÄ™c wszelkie marginesy odnoszÄ… siÄ™ do okna przeglÄ…darki.

Linki – odnoÅ›niki

Jak widzisz, standardowo kolor linka jest bardzo brzydki i nie pasuje do naszej kolorystyki. Musimy coś z tym zrobić. Napisz w css następujący kod:

a {
  color: #ffffff;
  text-decoration: none; }

Właściwość color już znasz, text-decoration określa jakąś dekoracje tekstu. Może przybierać wartości:

• » underline – podkreÅ›lenie
• » line-through – przekreÅ›lenie
• » overline – nadkreÅ›lenie
• » blink – miganie
• » none – bez ozdobienia

W praktyce stosuje się głównie tylko underline i none.

CSS daje możliwość zmiany wyglądu linku po najechaniu na niego, kliknięciu oraz po jego odwiedzeniu.

Link po najechaniu
a:hover {
  color: #ffffff;
  text-decoration: underline; }

Link po kliknięciu
a:active {
  color: #cacaca;
  text-decoration: underline; }

Link po odwiedzeniu
a:visited {
  color: #9e9e9e;
  text-decoration: none; }

Ważne
Atrybuty hover, active itd. nie muszą być wykorzytywane tylko do linków. Mogą być częścią np. elementów obrazkowych.

Obrazki

Jak pozbyć się tego irytującego otoczenia obrazka? W ten sposób:

img {
  border: none; }

Jeśli chcesz, nie musisz usuwać tego obramowania. Możesz zmienić np. jego kolor i pogrubuć je, pisząc:

img {
  border-width: 5px;
  border-color: #ff0000; }

Pozioma linia

Domyślny wygląd elementu hr nie jest zbyt ciekawy. Możemy zastąpić go jakimś obrazkiem, np. takim. Pobierz go i wrzuć do folderu img. Teraz w pliku style.css napisz:

hr {
  background: url(img/hr.png);
  border: none; }

Teraz Twoja strona powinna wyglądać mniej więcej tak:

Meta Tagi

Meta Tagi to znaczniki w sekcji head, które służą do podawania ogólnych informacji na temat strony. Ostatnio dowiedziałeś się jak dodać nazwę strony (title), teraz pokażę Ci następne elementy:

Favicon
Favicon to ikonka strony. Jest ona widoczna w tych miejscach:

Ikonka ma wymiary 16×16 pixeli. Zrób wiÄ™c wÅ‚asnÄ… ikonkÄ™ lub pobierz gotowÄ… stÄ…d i wrzuć jÄ… do folderu img. Teraz napisz kod:

<link rel="icon" type="image/png" href="img/favicon.png"/>

Gdzie favicon.png to Twoja ikonka.

Description
Tag description to nic innego jak opis naszej strony. Jest on wyświetlany w wyszukiwarkach, dlatego opis powinien być konkretny i nie może zawierać więcej niż 255 znaków.


<meta name="description" content="Opis naszej strony" />

W przypadku, gdy nie umieścimy tego tagu, opisem naszej strony będą pierwsze zdania na stronie na jakie trafi wyszukiwarka.

Keywords
Keywords to słowa kluczowe naszej strony, w celu osiągnięcia najlepszych efektów należy wpisać nie więcej niż 12 słów oddzielając je przecinkiem i spacją.

<meta name="keywords" content="slowo1, slowo2, slowo3, itp" />

Robots
Tag robots mówi robotom indeksującym strony w Internecie czy mają one indeksować Twoją stronę i podążać za linkami, które są na niej umieszczone.

<meta name="robots" content="właściwość" />

…gdzie zamiast wÅ‚aÅ›ciwość piszemy:

• » index, follow – roboty bÄ™dÄ… indeksować naszÄ… stronÄ™ i podążać za linkami
• » noindex, follow – roboty nie bÄ™dÄ… indeksować strony, ale bÄ™dÄ… podążać za linkami
• » index, nofollow – roboty bÄ™dÄ… indeksować naszÄ… stronÄ™, ale nie bÄ™dÄ… podążać za linkami
• » noindex, nofollow – roboty nie bÄ™dÄ… indeksować strony, ani nie bÄ™dÄ… podążać za linkami

Zamiast pisać index, follow możemy napisać all, a noindex, nofollow możemy zastąpić none. Jeśli w dokumencie nie znajdzie się tag robots to tak jakby było index, follow.

Ten tag powoli wychodzi z użycia, będąc wypierany przez plik robots.txt, ale o tym nie będę teraz pisać.

To tyle z wartościowych tagów. Są jeszcze inne, jak copyright, author, email itd. ale nie mają one jakiegoś większego znaczenia.

Wszystko co do tej pory zrobiliśy możesz pobrać ode mnie stąd.

Spobobał Ci ten wpis?
Skomentuj go!