BoP #2: Szkielet strony i wygląd bloga

Nasz blog zaczniemy od utworzenia szablonu (na początek strony głównej bloga). Na górze zrobimy menu wraz z nazwą bloga a na samym dole stopkę. Środek podzielimy na dwie części – wpisy i sidebar. Część z wpisami będzie oczywiście większa i umieścimy tutaj 5 wpisów. Sidebar natomiast będzie zawierał listę kategorii, tagi, archiwum i ostatnie komentarze. Gotowi? No to zaczynamy!

 

Szkielet strony

Linia 1 to deklaracja składni HTML5 – dzięki temu przeglądarki wiedzą, że strona jest napisana za pomocą właśnie HTML5.

Linie 2 i 10 deklarują otwarcie i zamknięcie strony/dokumentu. Parametr lang=”pl” informuje przeglądarki i wyszukiwarki w jakim języku jest strona (w tym przypadku w języku polskim).

Od lini 3 do 6 znajdują się informacje o stronie/dokumencie. To tutaj nadajemy:

  • tytuł strony (linia 5), który wyświetlany jest np. w wyszukiwarkach
  • kodowanie znaków (linia 4) – aby np. polskie znaki wyświetlały się tak jak powinny zamiast „krzaczków” czy znaków zapytania
  • elementy pomocne przy pozycjonowaniu (np. opis strony i słowa kluczowe)
  • style css i skrypty javascript
  • oraz kilka innych mniej lub bardziej przydatnych elementów

A od lini 7 do 9 znajduje się główna część strony – ta, którą widzimy w przeglądarkach (w tym przykładzie strona jest pusta)

 

Wygląd bloga

Nasz blog musi jakoś wyglądać, prawda? Dlatego stworzymy prosty szablon, który będzie wyglądał mniej więcej tak:

Kod HTML bloga wygląda tak:

 

W następnej części dokładnie opiszę wszystkie elementy naszego bloga a w międzyczasie może sami spróbujecie „rozszyfrować” kod?

PS Kod dostępny jest również na stronie codepen.io.


Post 2 z 13 z serii Blog od podstaw