Link do prezentacji

http://goo.gl/ZCVD8N

Praca domowa

Stwórz dwukolumnowy layout strony, dodaj odpowiednie właściwości css do tytułu, tak by był on zawsze widoczny na samej górze okna przeglądarki 
 

http://codepen.io/anon/pen/KpqqGp

Znaczniki HTML5

<header>
    ...
</header>

HTML

Tag <header> przeważnie na górze strony lub section, ale o jego użyciu decyduje zawartość, a nie położenie. Specyfikacja definiuje ją jako grupę elementów wprowadzenia lub nawigacji. Header może zawierać: tytuł, logo, nawigację itp.

Znaczniki HTML5

<nav>
    ...
</nav>

HTML

Tag <nav> używany do głównej nawigacji witryny (linki do innych podstron albo do określonych fragmentów na tej samej stronie).

Znaczniki HTML5

<main>
    ...
</main>

HTML

Tag <main> określa główna zawartość body. Znacznikiem <main> nie należy obejmować żadnych stałych elementów, które powtarzają się: nawigacji, logo itp.
W pojedynczym dokumencie nie może być więcej niż jeden element <main>.

Znaczniki HTML5

<section>
    ...
</section>

HTML

Tag <section> używany jest do grupowania tematycznie powiązanych ze sobą treści. Zazwyczaj zawiera <header>.
Jeśli potrzebujesz zgrupować elementy tylko po to by nadać im style w css, użyj do tego znacznika <div>

Znaczniki HTML5

<article>
    ...
</article>

HTML

Tag <article> reprezentuje samodzielną część strony, która potencjalnie mogłaby być opublikowana niezależnie od pozostałej treści na stronie np.: wiadomość na forum, wpis na blogu, komentarz użytkownika pod artykułem. 

Znaczniki HTML5

<aside>
    ...
</aside>

HTML

Tag <aside> o jego użyciu decyduje zawartość, a nie położenie. Kontener na mniej znaczące treści, nieznacznie powiązane tematycznie z treścią główną (np. panel boczny – ang. sidebar). Przykładem mogą być reklamy, widgety

Znaczniki HTML5

<footer>
    ...
</footer>

HTML

Tag <footer> stanowi stopkę dla zawierającego go elementu. Zawiera zwykle takie informacje jak: autor, linki do powiązanych dokumentów, prawa autorskie itp.

Znaczniki HTML5

http://html5doctor.com/downloads/h5d-sectioning-flowchart.png​

Przykłady stron z tagami HTML5

http://styledigger.com/  - header, nav, footer

Uruchom Inspect'a w przeglądarce i zbadaj elementy poniższych stron 

Ćwiczenie - napisz kod strony

https://goo.gl/OaB1Ig

• Ściągnij materiały z https://goo.gl/OaB1Ig
• W pliku README.pdf znajdziesz linki do fontów i kody kolorów
• Rozpakuj layout.zip
• Znajdziesz tam szablon i "style guide" z opisanymi wielkościami, kolorami i fontami do poszczególnych elementów

Pliki i wskazówki

Od czego zacząć?

Rozłóż szablon na elementy

Dziękuję!

</codecarrots>