Omówienie strony głównej – część 2

Przed przystąpieniem do stylowania naszego bloga powinniście poznać resztę kodu HTML. To już ostatnia prosta przed użyciem CSSa.

 

Dla przypomnienia kod HTML bloga:

 

Główna część bloga

Tym razem nie skopiuję całego fragmentu, gdyż jest dość długi a jego zawartość i tak omówię w kolejnych sekcjach.

Ta część rozpoczyna się w lini 23 i kończy w lini 63. Znacznik <div> służy do grupowania elementów (znaczników), które razem tworzą jakąś całość – do tworzenia sekcji. Domyślnie każdy <div> jest wyświetlany w nowej linii ale można zmienić to używając odpowiednich reguł CSS. Nasz <div> ma nadany atrybut id=”content”. Atrybut „id” służy do identyfikacji elementu na stronie przy korzystaniu z CSS lub JS. Drugim atrybutem, który służy do takiej identyfikacji jest atrybut „class”, który różni się od „id” tym, że można go użyć wiele razy na tej samej stronie a „id” jest unikalne i może być przypisane tylko do jednego znacznika – w naszym przykładzie nie moglibyśmy utworzyć innego elementu (np. drugiego diva) z id=”content”.

 

Post

Nasz post zaczynamy od znacznika <section>, który (jak sugeruje nazwa) służy do tworzenia sekcji na stronie. Taką sekcją może być zbiór postów, newsów, artykułów, komentarzy. U nas sekcja zawiera posty i każdy post reprezentowany będzie przez znacznik <article>. Każdy post będzie składał się z dwóch części: część nagłówkową (<header>) i akapitu (<p>). Akapit będzie zawierał albo część z posta albo zrobimy możliwość dodawania wprowadzenia (jeszcze zobaczę co zrobimy). Część nagłówkowa będzie zawierać nagłówek drugiego stopnia (<h2>) i akapit z datą publikacji posta i imieniem autora. Imię autora znajdzie się w znaczniku <span>, który reprezentuje, grupę elementów liniowych (znajdujących się w jednej linii). W naszym przypadku posłuży do nadaniu trochę innego stylu niż data.

 

Sidebar

 

Sidebar (czyli pasek boczny) utworzymy za pomocą znacznika <aside>. Znacznik ten służy do grupowania elementów, które mają znaleźć się z boku głównej części jak jak np. główna część strony, artykułu czy newsa. Na początek w naszym sidebarze będą dwie sekcje (<section>), które będą niemal identyczne. Każdy będzie zawierał nagłówek trzeciego stopnia (<h3>) i listę nieuporządkowaną <ul> z linkami do wpisów z danego miesiąca oraz do wpisów przypisanych do odpowiedniego tagu.

 

I to by było na tyle odnośnie omawiania znaczników na blogu a od następnego wpisu z serii zaczniemy stylować 🙂

Jeśli macie jakieś pytania lub coś jest dla Was nie jasne to piszcie śmiało w komentarzach tutaj lub na FB.


Post 4 z 11 z serii Blog od podstaw