html-14

Moje hobby:…
Formatowanie stron z wykorzystaniem obszarów blokowych div

Opracuj i wykonaj stronę w html na temat swoich zainteresowań, która będzie zawierała:

  1. tytuł: „Moje hobby: …”,
  2. imię, nazwisko oraz klasę i grupę autora,
  3. opis zainteresowań, np. od jak dawna interesujesz się przedmiotem, jak się to zaczęło, jaki jest konkretny rodzaj uprawianego hobby (dyscyplina sportu, okres historii, gatunek sztuki czy fotografii, gatunek czytanej najchętniej literatury, marki samochodów itd.), w jaki sposób realizujesz swoje zainteresowania (uprawiasz sport osobiście, chodzisz na mecze, czytasz książki, uczęszczasz na spotkania z autorami, zebrałeś kolekcję fotografii, zdjęć itd), czy masz jakieś osiągnięcia związane ze swoim hobby…
  4. przykład ilustrujący zainteresowania zawierający co najmniej trzy ilustracje (zdjęcia, obrazy, cytaty) wraz z odpowiednimi podpisami,
  5. jeśli w pracy korzystałeś z innych stron internetowych, koniecznie na końcu pracy dodaj odsyłacze do nich (powinny otwierać się w nowym oknie lub zakładce).

Dokument sformatuj za pomocą arkusza stylów (css) w sposób dowolny, ale uwzględniając następujące wytyczne:

  1. Treść dokumentu nie powinna zajmować całej szerokości okna przeglądarki, a obszar (body) powinien być wyświetlony na środku okna. Szerokość można ograniczyć do 80-90 procent lub narzucić konkretny wymiar w pikselach (np. 1000, 1200).
  2. Tytuł oraz dane autora wyróżnij graficznie w dowolny sposób (np. osobnym obszarem, kreską poziomą, kolorem lub rodzajem czcionki…).
  3. Pojedynczą ilustrację wraz z podpisem umieść w jednym obszarze (div) tak, by w jednym wierszu mieściły się trzy. W tym celu ustaw szerokość obszaru div odpowiednio do szerokości obszaru body (w procentach lub pikslach). Obszar zawierający ilustrację z podpisem otocz delikatną ramką, marginesami zewnętrznymi utrzymaj odpowiedni dystans między ramkami (by za bardzo „nie wchodziły” na siebie). Tekst podpisu powinien nieco różnić się od tekstu głównego dokumentu (np. wielkością czcionki i ewentualnie odcieniem koloru). Podobnie tło obszaru z ilustracją powinno być nieco jaśniejsze lub ciemniejsze niż tło całego dokumentu.

    Uwaga! Obszary div są tzw. blokami i „nie chcą” układać się obok siebie w poziomie. Można wymusić to własnością css: float: left;. Jeśli chcemy na stronie umieścić więcej elementów blokowych, które będą układały się w wiersze musimy zapewnić naszym blokom identyczną wysokość (własność: height: …;) lub wymusić przejście bloków do nowego wiersza na przykład przez wstawienie pustego bloku z własnością clear:

    <div style="clear: both;"></div>

    lub znacznika br (koniec wiersza) z opcją clear="all":

    <br clear="all">

  4. Wszystkie stosowane kolory zapisz w notacji HTML (zwanej szesnastkową lub HEX) lub notacji RGB. Nie używaj predefiniowanych nazw kolorów jak robiliśmy to do tej pory. Nazwy kolorów w notacji szesnastkowej można znaleźć w Internecie lub wykorzystać narzędzie wyboru koloru w programie Bluefish (zobacz zrzut ekranu):
    wybór kolorów

Przy formatowaniu strony przede wszystkim wykorzystuj doświadczenia z poprzednich lekcji. Nie stosuj nigdzie kolorów białego i czarnego. W pliku html powinien być czysty kod html, a własności css w pliku css.

Pamiętaj, by praca była oryginalna w treści i formie, w miarę atrakcyjna oraz czytelna (przejrzysta).

Przykładowy schemat rozmieszczenia bloków:

przykład