Podstawowy szkielet strony internetowej oparty o HTML 5 – dodajemy treść

W poprzedniej części tego wpisu dodaliśmy w sekcji head meta tagi oraz link tagi. Poza opisem witryny oraz słowami kluczowymi podpięliśmy również plik ze stylami CSS oraz skrypt JavaScript. Teraz przechodzimy do kolejnego etapu czyli uzupełnienia naszych pustych bloków w sekcji body o treść. Wszystko to potem będziemy musieli jeszcze odpowiednio ostylować na podstawie projektu graficznego.

Fot: Markus Tacker, CC BY-ND 2.0.

Fot: Markus Tacker, CC BY-ND 2.0.

Nasz kod, który do tej pory napisaliśmy:

Nagłówek

Zaczynamy od samej góry czyli nagłówka (<header> </header>). Pasowało by tutaj wstawić logo naszego portalu, jego nazwę oraz krótki slogan.

Logo to po prostu obrazek, który wstawiamy za pośrednictwem znacznika <img />:

Nie ustawiamy na razie żadnych wymiarów, tym zajmiemy się później.

Do umieszczenia nazwy portalu zastosujemy nagłówek stopnia pierwszego (<h1> </h1>):

A do krótkiego opisu po prostu znacznik paragrafu (<p> </p>):

Reasumując, nasz cały kod nagłówka:

Menu główne

Menu główne umieszczamy w tagu <nav> </nav> dostępnym w HTML 5. Oczywiście całe menu budujemy na podstawie listy punktowej (<ul> </ul>):

Cały kod:

Kolumna główna

Przechodzimy teraz do kolumny głównej naszej strony. Będzie ona składać się z listy 5 ostatnio opublikowanych artykułów. Każdy artykuł będzie zawierał tytuł (umieszczony w znaczniku nagłówka pierwszego stopnia <h1> </h1>), obrazek (ikonę wpisu) krótki 2-3 zdaniowy opis oraz link „Czytaj dalej…”.

Tak więc przechodzimy do tagu <section> </section> i tworzymy pierwszy artykuł w znaczniku <article> </article>:

Takich wpisów potrzebujemy 5. Na nasze potrzeby każdy z nich będzie różnił się tytułem oraz obrazkiem, opis pozostanie bez zmian. Wszytko to umieszczamy w kodzie jeden pod drugim i zamykamy znacznik </section>.

Kolumna boczna (sidebar)

Prawie każda witryna internetowa posiada boczną kolumnę z różnymi widgetami. Można tam umieścić przydatne z punktu widzenia internauty informacje, na przykład: ostatnio komentowane artykuły, ostatnio dodane komentarze czy najpopularniejsze wpisy. Kolumnę boczną (sidebar) umieszczamy w specjalnym tagu HTML 5, który nazywa się aside: <aside> </aside>.

Wewnątrz tagów <aside> </aside> umieszczamy pojedyncze widgety, każdy widget możemy oznaczyć jako zwykły element blokowy div (<div> </div>) i wewnątrz niego dodawać resztę treści.

Przykładowy sidebar może więc wyglądać tak:

Stopka (footer)

No i został nam ostatni element naszego szablonu czyli stopka (ang. footer). Jak pewnie wielu z was się już domyśliło również i w tym celu został przygotowany specjalny tag HTML 5. Jak się on nazywa? A jakże by inaczej – po prostu footer: <footer> </footer>.

W stopce zamieszczamy przede wszystkim informacje o prawach autorskich, autorze strony bądź też odnośnik do podstrony z danym kontaktowymi. Napiszmy więc przykładową stopkę do naszego szablonu:

Podsumowanie

Przyszedł czas na podsumowanie, czyli zebranie wszystkich naszych elementów w jedną całość. Bez zbędnego przedłużania poniżej prezentuję cały kod:

Właśnie stworzyliśmy szkielet strony w HTML’u 5 z przykładową treścią. Teraz kolejnym krokiem, na drodze budowy layoutu jest jego ostylowanie zgodnie z projektem graficznym.

, , , ,