TłUMACZENIA ANGIELSKI GRAMATYKA METODYKA JĘZYKOZNAWSTWO SŁOWNIK KONTAKT

 

Dokument ten jest tłumaczeniem, które może zawierać błędy. Zostało ono wykonane przez Angielski ELTT. Angielska wersja dokumentu en.

Zobacz inne strony. Strony o CSS:1, 2, 3

Tutorial (przewodnik) CSS
POCZĄTKI Z HTML + CSS

Contents

Niniejszy tutorial jest przeznaczony dla osób, które nigdy nie miały styczności z aruszami stylów CSS a chiałby je zastosować na swoich witrynach.

Nie zamieszczamy wielu informacji na temat samego CSS. Wyjaśniamy natomiast jak tworzyć pliki HTML i CSS oraz jak je połączyć w taki sposób aby prawidłowo współgrały. Po przeczytaniu, można zapoznać się z innymi tutorialami aby stworzyć jeszcze lepsze dokumenty HTML i CSS. Można również zastosować edytor HTML lub CSS, który pomaga w budowie bardzo skomplikowanych witryn.

Po zakończeniu tutorialu, czytelnik będzie potrafił tworzyć pliki HTML podobne do tego:

[Link to the final HTML page]

Strona HTML z kolorami i layout, wszystko w CSS.

Nie twierdzę, że jest to najpiękniejsza strona☺

Alert! Advanced: Sekcje, które wyglądają w ten sposób są opcjonalne. Zawierają dodatkowe wyjaśnienia na temat kodu HTML i CSS, np: Znak “uwaga!” na początku oznacza, że materiał jest bardziej zaawnsowany niż reszta tekstu.

KROK 1: PISANIE W KODZIE HTML

Dla potrzeb naszej lekcji powinieneś używać jak najprostszych narzędzi np: notatnika (na platformie Windows), TextEdit (ma platformie Mac) lub KEdit (na platformieKDE). Kiedy zrozumiesz podstwaowe zasady, będziesz mógł używać bardziej zaawansowanych narzędzi lub programów komercyjnych takich jak: Style Master, Dreamweaver lub GoLive. Tworząc swój pierwszy arkusz stylów, najlepiej będzie jak nie będziesz rozpraszany nadmierną ilością opcji, które są zazwyczaj bardziej zaawansowane.

Nie używaj edytorów tekstu takich jak: Microsoft Word czy OpenOffice. Z reguły, tworzą one pliki, których przeglądarki nie potrafią czytać. W HTML i CSS chcemy jak najprostszego kodu.

Krok 1 to otwarcie edytora (Notepad, TextEdit, KEdit, lub innego), zacznij od pustego okna i wpisz następujący kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Moja pierwsza strona ze stylami</title>
</head>

<body>

<!-- Nawigacja strony -->
<ul class="navbar">
 <li><a href="index.html">Strona główna</a>
<li><a href="musings.html">Przemyślenia</a>
<li><a href="town.html">Moje miasto</a>
<li><a href="links.html">Linki</a> </ul> <!-- Moja treść --> <h1>Moja pierwsza strona ze stylami</h1> <p>Witam na mojej stronie! <p>Nie ma tu zdjęć ale jest arkusz stylów i są linki do moich innych stron. <p>Powinno znależć się tutaj więcej informacji ale nie teraz... <!-- Podpisz stronę ... z grzeczności! --> <address>Wykonana 23 stycznia, 2007</address> </body> </html>

Właściwie nie musisz go pisać, możesz go stąd skopiować i wkleić.

(Jeśli używasz TextEdit na platformie Mac, nie zapomnij zaznaczyć w edytorze TextEdit, że jest to tekst zwykły. W tm celu przejdź do menu "Format" i wybierz “Make plain text”.)

Alert! Advanced: Pierwsza linia HTML mówi przeglądarce jaki typ dokumentu jest zastosowany w pliku (DOCTYPE oznacza DOCument TYPE). W tym przypadku to HTML wersja 4.01.

Słowa pomiędzy < oraz > są nazwane znacznikami i jak widać dokument jest zawarty pomiędzy znacznikami <html> i </html>. Między <head> i </head> znajduje się miejsce na różnego typu informacje, które nie zostaną pokazane na ekranie. Do tej pory zawarty jest tam tytuł ale później dodamy jeszcze arkusz CSS.

Znacznik <body> zawiera cały tekst dokumentu. W zasadzie wszystko co jest napisane po tym znaczniku będzie wyświetlane z wyjątkiem komentarzy wewnątrz znaków <!-- oraz -->. Przeglądarka będzie je ignorować.

W przykładzie, znacznik <ul> wprowadza listę nieuporządkowaną (“Unordered List”), tzn taką, w której nie występują kolejno następujące po sobie numery. Znacznik <li> jest początkiem pozycji listy ( “List Item”). Znacznik <p> oznacza paragraf ( “Paragraph”) a znacznik <a> jest kotwiczką ( “Anchor”), która tworzy odnośniki.

the HTML source shown inside KEdit

Edytor KEdit pokazuje źródło HTML.

Alert! Advanced: Jeśli chcesz wiedzieć co oznaczają nazwy zawarte w znacznikach pomiędzy <…>, dobrym miejscem jest dukument o nazwie Getting started with HTML. Kilka słów na temat struktury naszej strony HTML.

Zauważ, że nie zamknąłem znaczników “li” i “p”. W HTML (ale nie w XHTML) jest dozwolonym pomijanie końcowych znaczników </li> i </p>, co zrobiłem tutaj dla ułatwienia. Możesz je dodać jeśli chcesz.

Załóżmy, że będzie to strona główna z kilkoma podobnymi podstronami. Posiada ona menu i linki prowadzące do podstron naszej hipotetycznej witryny, które mają własną treść i podpis.

Zapisz stronę “Save As…” w głównym menu w miejsu gdzie chcesz żeby się znajdowała (może być pulpit) i nazwij plik “mypage.html”. Nie zamykaj jeszcze edytora, będziemy go nadal potrzebować.

(Jeśli używasz TextEdit na platformie Mac OS X w wersji niższej niż 10.4, zobaczysz opcję Nie załączaj rozszerzania .txt w opcji Zapisz. Wybierz ją ponieważ nazwa “mypage.html” zawiera już rozszerzenie. Nowsze wersje TextEdit zauważą rozszerzenie automatycznie.)

Następnie otwórz przeglądarkę. Można to zrobić w następujący sposób: znajdź swój plik używając Windows Explorer, Finder lub Konqueror i kliknij na “mypage.html”. Powinna otworzyć się twoja przeglądarka domyślna (jeśli nie, otwórz przeglądarkę i przeciągnij do niej plik).

Jak widać, strona jest raczej nudna...

KROK 2: DODAWANIE KOLORU

Najprawdopodobniej widzisz czarny tekst na białym tle, ale zależy to również od konfiguracji twojej przeglądarki. Jednym ze sposobów stylowania strony jest dodanie kolorów. (Zostaw przeglądarkę włączoną, będziemy jej jeszcze potrzebować).

Zaczniemy od arkusza stylów umieszczonego w tym samym pliku HTML. Później pozielimy HTML i CSS na dwa oddzielne pliki. Niezależne pliki są lepsze, ponieważ ułatwiają używanie tego samego arkusza w kilku dokumentach HTML: arkusz napisany jest w ten sposób tylko jeden raz. Na tym etapie jednak wszystko będzie w jednym pliku.

Musimy dodać element <style> do pliku HTML. Arkusz stylów będzie się znajdował w tym elemencie. Powróć do edytora i dodaj następujące linie w części "<head>" dokumentu HTML. Dodane linie są pokazane na czerwono.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Moja pierwsza strona ze stylami</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[etc.]

Pierwsza linia mówi, że jest to arkusz stylów napisany w CSS (“text/css”). Druga mówi, że dodajemy styl do elementu “<body>”. Trzecia ustawia kolor tekstu na fioletowy a następna ustawia kolor tła na zielono-żółty.

Alert! Advanced: Arkusze stylów w CSS składają się z reguł. Każda reguła ma trzy części:

  1. selector (w tym przykładzie: “body”), który mówi przeglądarce, do której części dokumentu odnosi się reguła;
  2. property (w tym przykładzie, 'color' i 'background-color' są właściwościami), króra mówi jaki aspekt layoutu jest ustawiany;
  3. value ('purple' i '#d8da3d'), podający wartość danej właściwości ("property").

Przykład pokazuje, że można łączyć reguły. Ustawiliśmy dwie waściwości a mogliśmy stworzyć dwie oddzielne reguły:

body { color: purple }

body { background-color: #d8da3d }

Skoro obie one ustawiają element <body>, piszemy “body” tylko raz i wstawiamy wszystkie reguły i wartości. Więcej informacji na temat selektorów w rozdziale 2 autorstwa Lie & Bos.

Tło (background) elementu <body> będzie tłem całego dokumentu. Nie nadaliśmy tła innym elementom (p, li, address…) dlatego domyślnie nie będą one miały żadnego (będą przeźroczyste). Właściwość 'color' ustawia kolor tekstu w elemencie <body> a inne elementy zawarte w elemencie <body> automatycznie będą w tym samym kolorze, chyba, że ustawimy inne wartości dla tych elementów. (Później dodamy więcej kolorów).

Zapisz plik (Opcja “Zapisz” w menu głównym) i przejdź do przeglądarki. Jeśli naciśniesz przycisk “Odśwież”, na ekranie pojawi się kolorowa strona ( nadal nudna). Poza linkami na górze tekst powinien być w kolorze fioletowym na zielono-żółtym tle.

Screenshot of the colored page in Konqueror

Oto jak przeglądarka pokazuje stronę po dodaniu kolorów.

Alert! Advanced: Kolory można precyzować w CSS na kilka sposobów. W tym przykładzie zastosowano dwa: nazwę koloru (“purple”) i kod szesnastkowy (“#d8da3d”). Istnieje około 140 nazw kolorów, natomiast kod szesnastkowy pozwala na określenie ponad 16 milionów kolorów. Artykuł Adding a touch of style wyjaśnia więcej na temat tych kodów.

KROK 3: DODANIE CZCIONKI

Inną łatwą rzeczą do zrobienia jest zadeklarowanie rodzaju czcionek dla poszczególnych elementów strony. Ustawiamy tekst w czcionce “Georgia” z wyjątkiem nagłówka h1, który jest w “Helvetica.”

Na internecie nigdy nie wiadomo jakiego rodzaju czcionki posiadają czytelnicy twojej strony na swoich komputerach, dlatego warto dodać czcionki alternatywne: jeśli Georgia nie będzie dostępna, to tekst wyświetli się w Times New Roman lub Times, a jeśli to nie pomoże, to przeglądarka może zastosować każdy inny rodzaj w serif. Jeśli nie ma Helvetica, to Geneva, Arial i SunSans-Regular mają podobny kształt, a jeśli żadnego z nich nie ma, przeglądrka może zastosować każdy inny rodzaj czcionki.

W edytorze dopisz następujące linie (lines 7-8 and 11-13):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Moja pierwsza strona ze stylami</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[etc.]

Jeśli zapiszesz plik, naciśnij “Odśwież” w przeglądarce. Powinny się teraz pojawić różnego rodzaju czcionki w nagłówku i tekscie.

Screenshot with fonts added

Teraz tekst powinien mić inną czcionkę niż nagłówek.

KROK 6: DODANIE LINI POZIOMEJ

Ostanim dodatkiem do arkusza jest linia pozioma, która oddziela tekst od podpisu na dole. Użyjemy 'border-top' aby dodać kropkowaną linię nad elementem <address> (lines 34-37):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Moja pierwsza strona ze stylami</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[etc.]

Nasza strona została już ukończona. Następnie, popatrzmy jak umieścić arkusz w oddzielnym pliku aby inne strony mogły również z niego skorzystać.

KROK 7: UMIESZCZENIE ARKUSZA STYLÓW W ODDZIELNYM PLIKU

Mamy teraz plik HTML z osadzonym w nim arkuszem stylów. Ale kiedy nasza witryna urośnie chcemy aby inne strony także korzystały z tego samego arkusza. Istnieje lepsza metoda niż kopiowanie arkusza do każdej strony. Jeśli umieścimy arkusz w oddzielnym pliku to wszystkie inne strony mogą z niego korzystać.

Aby stworzyć plik CSS, musimy stworzyć jeszcze jeden plik. Można wybrać z opcji “Nowy” w edytorze i otworzyć okno. (Jeśli używasz TextEdit, pamiętaj o zwykłym tekscie.)

Wytnij i wklej cały kod pomiędzy elementami <style> w dokumencie HTML. Nie kopuj elementu <style> i </style>. Należą one do HTML a nie do CSS. W nowym oknie powinieneś mieć następujący kod:

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

Wybierz “Zapisz jako …” z menu i zapisz plik w tym samym folderze co plik HTML jako “mystyle.css”.

Teraz przejdź do okna z kodem HTML. Usuń wszystko pomiędzy elementami stylów i wstaw element <link> w następujący sposób (line 5):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Moja pierwsza strona ze stylami</title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>
[etc.]

Powie on przeglądarce, że arkusz stylów znajduje się w pliku “mystyle.css” a skoro nie ma nazwy foldera, przeglądarka będzie szukać pliku w tym samy folderze co plik HTML.

Jeśli zapisałeś plik HTML i ponownie go odświeżyłeś w przeglądarce, nie powinieneś widzieć różnicy: strona ma dalej takie same style, ale pochodzą one z zewnętrznego arkusza stylów.

Final result of styling

Ostateczny wygląd

Następnym krokiem jest umieszczenie dwóch plików mypage.html i mystyle.css na witrynie internetowej. (Może chciałbyś je wpierw trochę zmienić....). Jak umieścić stronę w internecie zależy od twojej firmy hostingowej.

POLECAMY PRZECZYTAĆ

Wprowadzenie do CSS chapter 2 autorstwa Lie & Bos, lub Dave Raggett's intro to CSS.

Więcej informacji można znaleźć na stronie learning CSS.

 


firefox download Mapa

CSS Valid
CSS!Valid HTML 4.0!

Bert Bos, CSS contact
Created 5 Apr 2004. Last updated $Date: 2006/11/24 15:45:48 $ GMT