Udostępnij za pośrednictwem

  • Artykuł

          

Samouczek: Podstawy formatowania stron - Kurs HTML i CSS Udostępnij na: Facebook

Autor: Jakub Mytko

Opublikowano: 2011-09-14

Typowym zadaniem przy projektowaniu stron WWW jest ich formatowanie, czyli dostosowanie wyglądu. Formatowanie obejmuje praktycznie każdy element strony – poczynając od koloru tła i kroju pisma, a kończąc na jej układzie – rozmieszczeniu treści.

W naszym przykładzie zajmiemy się elementami podstawowymi – tłem oraz fontem. Określimy ich wygląd za pomocą CSS - Kaskadowych Arkuszy Stylów.

Przed wykonaniem zadań powinieneś wiedzieć:

Po wykonaniu zadań nauczysz się:

  • formatować stronę za pomocą CSS,
  • umieszczać i budować style CSS,
  • dostosowywać wygląd tła oraz czcionki do swoich potrzeb.

Implementacja

Poprzez wykonanie prostej strony internetowej nauczymy się podstawowego formatowania stron. Jej wygląd będziemy modyfikować posługując się CSS.

Efekt końcowy został przedstawiony na Rys. 1.

Rys. 1. Efekt końcowy formatowania strony.

Przygotowanie strony

Przygotujemy podstawowy szkielet strony internetowej. Jeśli będziesz miał problem z tym zadaniem, zobacz pierwszy odcinek samouczka Pierwsza strona internetowa.

  1. Otwórz edytor HTML i utwórz szkielet strony.
<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>
  1. W znaczniku title wpisz: Podstawy formatowania stron.
  2. W znaczniku body wpisz: <p>Lorem ipsum dolor sit amet…</p>
Informacja

Lorem ipsum dolor sit amet… to fragment tekstu stosowanego do umieszczenia na stronie w fazie jej tworzenia. Dzięki niemu osoba projektująca stronę może sprawdzić poprawność jej układu, wyglądu itp.

Więcej o przykładowych tekstach przeczytasz w Jak wypełnić stronę przykładową treścią.
  1. Zapisz plik pod nazwą index.html i otwórz w przeglądarce internetowej. Upewnij się, czy tytuł strony jest taki, jaki chcieliśmy oraz czy widoczna jest treść. Jeżeli tak – możemy przejść do kolejnego kroku.

Umieszczanie CSS

Umieścimy Kaskadowe Arkusze Stylów w odrębnym pliku. Dzięki temu, jeśli będziemy chcieli zmienić wygląd strony, nie będziemy musieli otwierać pliku .html, lecz tylko plik odpowiadający za jego formatowanie. Więcej informacji o CSS znajdziesz w Samouczku CSS.

  1. Umieść styl w nagłówku strony
  • Za znacznikiem </title> dodaj nowy wiersz i wpisz w nim:
<style type="text/css">
</style>
  • Pomiędzy dodanymi znaczniki wpisz kod, w którym opiszemy wygląd zawartości strony: 
    body {
    }
Informacja

Poprzez ustawienie selektora body, wszystkie zdefiniowane dalej style dotyczyć będą całej zawartości strony i będą dziedziczone przez znaczniki znajdujące się wewnątrz <body>.

Więcej o selektorach przeczytasz w Jak wskazać element w CSS.
  1. Zapisz plik index.html i sprawdź, czy wygląda tak, jak na Rys. 2.

Rys. 2 Plik index.html po dodaniu stylu CSS.

Informacja

Kaskadowe Arkusze Stylów można umieszczać na trzy sposoby. Oprócz wykorzystanego przez nas formatowania w odrębnym pliku, style możemy umieścić:

  • w nagłówku strony,
  • wewnątrz znacznika.

Więcej o sposobach umieszczania CSS znajdziesz w Jak umieszczać style CSS.

Formatowanie tła

Tło można sformatować na wiele sposobów. W naszym przykładzie wykorzystamy możliwość ustawienia zarówno koloru tła, jak i umieszczenia obrazka jako tło.

  1. Ustaw kolor tła strony na grey.

  • W znaczniku <style> pomiędzy nawiasami klamrowymi wpisz: 

    background-color: Grey;

  • Zapisz zmiany, w przeglądarce odśwież plik index.html i sprawdź, czy kolor tła jest rzeczywiście szary.

Informacja
Kolory można określać na wiele sposobów. Zobacz w encyklopedii Jak określać kolory w CSS.
  1. Dodaj obrazek, który będzie pełnił rolę tła.
  • Zapisz obrazek z Rys. 3. w katalogu, w którym umieściłeś plik index.html i nazwij go background.gif.

Rys. 3. Obrazek tła – background.gif.

  • Pomiędzy nawiasami klamrowymi wpisz odwołanie do adresu obrazka: 
    background-image: url('background.gif');
Informacja
Ścieżkę dostępu podaje się zawsze względem pliku w którym jest określony. To znaczy że, jeżeli obrazek znajduje się w innym katalogu niż ten plik, należy wpisać ścieżkę względną np.: url('katalog/nazwa_obrazka_z_rozszerzeniem');
  • Pomiędzy nawiasami klamrowymi wpisz powtarzanie obrazka-tła w poziomie: 
    background-repeat: repeat-x;
Informacja

Domyślnie ustawiane jest zawsze powtarzanie obrazka zarówno pionowo jak i poziomo. Aby ustawić powtarzanie pionowe, po background-repeat: należy wpisać repeat-y; aby ustawić powtarzanie poziome – repeat-x;. Aby zlikwidować powtarzanie obrazka – no-repeat.

Więcej informacji znajdziesz w encyklopedii pod hasłem Jak formatować tło w CSS.

Formatowanie fontów

Formatowanie fontów obejmuje ich styl (np. pochylenie), wariant (np. kapitaliki), wagę (pogrubienie), rozmiar, rodzaj oraz odstęp pomiędzy wierszami określanymi za pomocą atrybutu font. Takie elementy jak podkreślenie oraz przekreślenie tekstu ustawia się w nieco inny sposób, używając atrybutu text-decoration.

Więcej informacji o formatowaniu fontów znajdziesz w Jak formatować fonty w CSS.

  1. Określ format fontów.

  • Ustaw styl na pochylony. Pomiędzy nawiasami klamrowymi wpisz: 

    font-style: italic;

  • Ustaw wariant na kapitaliki. Poniżej wpisz: 

    font-variant: small-caps;

  • Ustaw pogrubienie. Poniżej wpisz: 

    font-weight: bold;

  • Ustaw rozmiar na 60px (więcej o rozmiarach w Jak określić wielkość w CSS). Poniżej wpisz: 

    font-size: 60px;

  • Ustal rodzaj na Tahoma. Poniżej wpisz: 

    font-family: 'Tahoma';

Informacja

Dla atrybutów, zaczynających się od font-, stosuje się zapis skrócony, który pozwala uniknąć kilku linijek kodu w zamian za jedną, bardziej rozbudowaną. W tym celu, zamiast poszczególnych atrybutów, należy wpisać font:, a następnie wartości oddzielone spacjami, z zachowaniem kolejności:

font-style, font-variant, font-weight, font-size, font-family.

Można pomijać niektóre wartości, jednak obowiązkowo należy stosować font-size i font-family.

  • Ustaw podkreślenie. Poniżej wpisz: 

    text-decoration: underline;

  • Ustaw kolor biały. Poniżej wpisz: 

    color: White;

  1. Zapisz zmiany w pliku index.html i odśwież go w przeglądarce. Sprawdź, czy tekst został sformatowany podobnie do przedstawionego na Rys. 1.

Strona końcowa

Końcowy kod strony HTML:

<html>
    <head>
        <title>Podstawy formatowania stron</title>
        <style type="text/css">
            body {
                background-color: Gray;
                background-image: url('background.gif');
                background-repeat: repeat-x;
                font-style: italic;
                font-variant: small-caps;
                font-weight: bold;
                font-size: 60px;
                font-family: 'Tahoma';
                text-decoration: underline;
                color: White; } 
        </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet…</p>
</body>
</html>

Podsumowanie

W tym artykule nauczyliśmy się podstaw formatowania strony internetowej z użyciem Kaskadowych Arkuszy Stylów. Dowiedzieliśmy się, jak określić kolor tła oraz w jaki sposób ustawić obrazek jako tło. Dowiedzieliśmy się także, w jaki sposób dostosowuje się krój pisma oraz jak stosować w tym celu zapis skrócony.