BoP #3: Omówienie strony głównej – część 1

Ostatnio poznaliście pierwsze tagi HTML oraz wygląd naszego przyszłego bloga. Dołączyłem też kod HMTL strony głównej i dziś pora na rozszyfrowanie jego pierwszej części.

 

Dla przypomnienia (i dla leniwych, którzy nie chcą wracać do poprzedniego posta) przypomnę kod bloga:

 

Menu

Na rozgrzewkę omówię znacznik <nav>. Jak większość tagów tak i ten trzeba zamknąć (</nav>0) – linia 9. Do czego służy? Zawiera w sobie odnośniki na stronie. Nie wszystkie linki powinny być w <nav> (np. odnośnik wewnątrz artykułu) – głównie używa się do definiowania głównego menu strony. Oczywiście nic nie stoi na przeszkodzie, żeby użyć innego tagu (przed HTML5 używało się samego znacznika <ul> lub <div>).

Następnie mamy znacznik <ul>, który reprezentuje listę nieuporządkowaną (wypunktowaną). Oczywiście sam znacznik <ul> nie wystarczy – potrzebujemy wewnątrz niego umieścić znaczniki <li>, które reprezentują elementy listy.

Nasze menu potrzebuje odnośników, dlatego każdy element zawiera znacznik <a> dzięki, któremu tworzymy linki. Żeby stworzyć odnośnik potrzebujemy zrobić dwie rzeczy:

  • Nadać mu tekst, który będzie wyświetlany na stronie
  • Nadać mu atrybut „href”, w którym podajemy adres url strony do której ma prowadzić link. Zamiast całego adresu url możemy użyć też samego „/” co jest jednoznaczne ze stroną główną, na której jest umieszczony link – jeśli gdzieś na blogu utworzyłbym link z atrybutem href=”/” to zawsze będzie wskazywał adres devblog.eu. W naszym przykładzie mamy też atrybut href zawierający hashtag (#). Hashtag określa id elementu na stronie – np. jeśli miałbym link z href=”#stopka” a swojej stopce na stronie nadałbym id o takiej nazwie (<footer id=”stopka></footer>) to po kliknięciu w link strona przewinęłaby się do tej stopki. Sam hashtag używa się do tworzenia „pustych” odnośników – takich, które nie mają nigdzie prowadzić. Dlaczego? Może być wiele powodów – dopiero tworzymy stronę i jeszcze nie wiemy jaki będzie adres albo zamiast przenieść na stronę chcemy, żeby link wykonał jakiś skrypt JavaScript

Zanim przejdziemy dalej chciałbym przy okazji znacznika <ul> wspomnieć o podobnym znaczniku jakim jest <ol>. Działa na takiej samej zasadzie jak <ul> tylko, że reprezentuje listę uporządkowaną (numerowaną). Tak wyglądają obie listy:

 

Nagłówek bloga

Znacznik <header> reprezentuje grupę elementów wprowadzających. Co to oznacza? Dzięki temu znacznikowi możemy określić wszelkiego rodzaju „wstępy” do całej strony (może wtedy zawierać menu, logo, nazwę czy opis strony), posta na blogu lub artykułu (może zawierać tytuł, datę utworzenia, autora) itp. Nasz <header> zawiera znaczniki <h1> i <p>. Znacznik <h1> należy do grupy nagłówków (od <h1> do <h6>), które różnią się wielkością czcionki (<h1> jest największe a <h6> najmniejsze). Natomiast znacznik <p> służy do tworzenia akapitów (paragrafów) na stronie.

 

Stopka

Znacznik <footer> służy do zdefiniowania stopki strony lub jakieś sekcji (artykułu, newsa, posta itp). W naszym przykładzie zawiera dwa akapity (<p>) z dwoma odnośnikami. Odnośnik w pierwszym akapicie ma atrybut href=”http://devblog.eu” ale równie dobrze moglibyśmy użyć href=”/” – dałoby to ten sam efekt.

 

To by było na tyle w tej części. W następnej omówię główną część bloga 🙂


Post 3 z 13 z serii Blog od podstaw