Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Przykład układu strony

Na poprzedniej lekcji poznaliśmy znaczniki semantyczne pozwalające na konstruowanie logicznego układu treści strony, poznaliśmy również znacznik div który także jest niezbędny do budowy strony. Poniżej pokazany jet konkretny przykład budowania prostej strony. Użyto przy tym stylów CSS, których jeszcze nie znasz, dlatego nie zastanawiaj się na tej lekcji nad wyglądem elementów strony, lecz skoncentruj swoją uwagę na zastosowaniu poznanych znaczników. Aby przeanalizować kolejne kroki klikaj linki Zobacz efekt, a następnie przeglądaj źródła tych stron - przypominam, że w tym celu należy kliknąć prawym przyciskiem myszki i wybrać Pokaż (wyświetl) źródło (strony).

Krok 1 - tło strony

Zobacz efekt. Zdecydowałem się zastosować tło obrazkowe, w tym celu zdefiniowałem styl dla znacznika body. Czy <body></body> coś zawiera? Jeszcze nic.

Krok 2 - obszar nagłówka strony

Zobacz efekt. Wydzieliłem pas w gónej części okna, który będzie pojemnikiem dla nagłówka. Czy to będzie <div></div>, czy <header></header>? Zdecydowałem, że "właściwy" header znajdzie się wewnątrz i będzie miał szerokość 1000px (pikseli), a więc pokazany pasek, jest tylko pojemnikiem który nie niesie żadnego znaczenia semantycznego - jest więc divem.

Krok 3 - wstawienie nagłówka strony

Zobacz efekt. Wstawiłem nagłówek <header></header>. Jest przeźroczysty, widać logo oraz żółte obramowanie.

Krok 4 - wstawienie nagłówka h1

Zobacz efekt. Wstawiłem nagłówek <h1></h1>. W nim umieszczony jest tytuł strony. Dałem taki sam jak w opisie description, chociaż równie dobrze mogłem wpisać coś innego.

Krok 5 - wykonanie menu

Zobacz efekt. Wstawiłem znacznik <nav></nav>, który obejmuje linki do innych stron naszej mini witryny.

Krok 6 - obszar w którym będą umieszczane treści

Zobacz efekt. Wstawiłem znacznik <div></div>, pnieważ pełni on tylko funkcję pojemnika dla innych elementów.

Krok 7 - wstawienie tła stopki witryny

Zobacz efekt. Wstawiłem znacznik <div></div>, który będzie pojemnikiem stopki witryny.

Krok 8 - wstawienie stopki witryny

Zobacz efekt. Wstawiłem znacznik <footer></footer>, ponieważ pełni on funkcję stopki.

Krok 9 - dokładne zdefiniowanie obszaru treści

Zobacz efekt. Wstawiłem znacznik <main></main>, który obejmie dwa artykuły. Widać to w źródle, widok strony nie ulegnie zmianie.

Krok 10 - osadzenie dwóch arykułów

Zobacz efekt. Zadanie to wykonałem za pomocą znaczników <article></article>, ponieważ w obszarach wyznaczonych tymi znacznikami znajdą się treści tworzące spójną całość.

Krok 11 - osadzenie dwóch arykułów

Zobacz efekt. Tym razem wykonałem kilka czynności, aby zakończyć ten przedłużający się nieco opis:
  • wstawiłem nagłówki <header></header> w obu artykułach,
  • wstawiłem tytuły <h2></h2> w obu nagłówkach,
  • wstawiłem divy <div></div> wypełniające obszary między nagłówkami a stopkami,
  • wstawiłem stopki <footer></footer> w obu artykułach,
  • wypełniłem artykuły treścią, stosując podział na sekcje oraz tytuły h3.

Ćwiczenie 1_2_2_1

Otwórz stronę prezentującą końcowy etap naszego przykładu. Przeanalizuj układ znaczników <div></div>, <article></article>, <header></header>, <footer></footer>, <section></section>, <h1></h1>, <h2></h2>, <h3></h3> oraz <p></p>. Sporządź w zeszycie układ treści strony (napisz układ znaczników) zastosowany w analizowanym przykładzie. Pamiętaj o stosowaniu odpowiednich wcięć. Pomiń teksty oraz wpisy związane ze stylami, które znajdują się w znacznikach otwierających.

Praca domowa

Wykonaj to samo polecenie co w Ćwiczeniu 1_2_2_1, tylko tym razem w Notepad++;


Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.