Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk
Moduł 4 HTML 5 i CSS 3.0
Agenda Co nowego w HTML 5? Nowe elementy HTML 5 Nowe elementy w formularzach HTML Nowe elementy w CSS 3.0
Co nowego w HTML 5 Czym jest HTML 5? Co nowego wprowadza HTML 5
Czym jest HTML 5 Jest to nowa wersja języka HTML Stanowi połączenie HTML + CSS 3.0 + API JavaScript 1991 HTML 1.0 1995 HTML 2.0 1997 HTML 3.0 1997 HTML 4.0 2007 Początek HTML 5.0
Co nowego wprowadza HTML 5 Nowe elementy strukturalne Nowe elementy formularzy Upraszcza niektóre elementy tj. deklaracje DOCTAPE i ustawianie strony kodowej Nowe elementy VIDEO i AUDIO Umożliwia tworzenie grafiki za pomocą CANVAS Przechowywanie danych po stronie klienta Umożliwia operacje na plikach Ułatwia wykorzystanie technologii Drag & Drop Geolokacja
Nowe elementy HTML 5 Nowe elementy strukturalne Po co? Nowe elementy blokowe i liniowe Nowe elementy interaktywne Nowy element nawigacyjny
Nowe elementy strukturalne HTML 5 wprowadza następujące nowe elementy Article Section HGroup Header Footer Section Address Nav Aside <!DOCTYPE html> <html> <body> <header> <h1>nagłówek</h1> <nav><ul><li>nawigacja</li></ul></nav> </header> <section> <article><p>jakaś zawartość</p></article> </section> <footer><p>informacje w stopce</p></footer> </body> </html>
Po co? <!DOCTYPE html> <html> <body> <header> <h1>nagłówek</h1> <nav> <ul> <li>nawigacja</li> </ul> </nav> </header> <section> <article> <p>jakaś zawartość</p> </article> </section> <footer> <p>informacje w stopce</p> </footer> </body> </html> <!DOCTYPE html> <html> <body> <div id="header"> <h1>nagłówek</h1> <div id="nav"> <ul> <li>nawigacja</li> </ul> </div> </div> <div class="section"> <div class="article"> <p>jakaś zawartość</p> </div> </div> <div id="footer"> <p>informacje w stopce</p> </div> </body> </html>
Nowe elementy blokowe i liniowe Nowy semantyczny element blokowy: <figure> Może zawierać <figcaption> <figure> <img src="obrazek.jpg" alt="obrazek"/> <figcaption>podpis</figcaption> </figure> Nowe semantyczne elementy liniowe <mark> <meter> <progress> <output> <time>
Nowe elementy interaktywne Do nowych elementów interaktywnych wprowadzonych w HTML 5.0 należą: <details> <summary> <details> <summary> Podsumowanie </summary> <p> Zawartość </p> </details> <menu> <command> Aktualnie niewspierane
Nowy element nawigacyjny Znacznik <nav> Definiuje obszar nawigacji na stronie Umieszczony wewnątrz znacznika <article> określa nawigację wewnątrz strony Umieszczony w innym miejscu określa nawigację pomiędzy stronami
Nowe elementy w formularzach Nowe elementy w formularzach Nowe atrybuty Walidacja danych
Nowy elementy formularzy Nowe typy znacznika <input> Rodzaj elementu color date datetime datetime-local email month number range Wsparcie Rodzaj elementu search tel time url week
Nowe atrybuty Atrybut Wsparcie Atrybut autocomplete (F/I) list (I) autofocus (I) form (I) formaction (I) formenctype (I) formmethod (I) formnovalidate (I) formtarget (I) min/max (I) multiple (I) novalidate (F) pattern (I) placeholder (I) required (I) step (I) height/width (I)
Nowe atrybuty Atrybut Wsparcie Atrybut autocomplete (F/I) list (I) autofocus (I) form (I) formaction (I) formenctype (I) formmethod (I) formnovalidate (I) formtarget (I) min/max (I) multiple (I) novalidate (F) pattern (I) placeholder (I) required (I) step (I) height/width (I)
Walidacja danych HTML 5 pozwala na walidację danych wprowadzonych do formularzy. <input type="text" pattern="\d\d-\d\d\d" /> <input type="text" required /> <input type="number" min="10" max="20" />
Co nowego w CSS 3.0 Nowe selektory Nowe właściwości tła i ramek Transformacje Animacje Efekty tekstowe Media Układ strony
Nowe selektory Selektory atrybutów: rozpoczyna się na, kończy się na, zawiera Strukturalne pseudo-klasy: :nth-child, :first-child, :first-of-type, :enabled, :disabled Negacja :not(selektor) a[href^="www."], tr:nth-child(even) { color:red; } p > :not(span:last-child) { color:red; }
Nowe właściwości tła i ramek Nowe właściwości tła: background-size background-origin background-clip Wsparcie dla wielu obrazów tła Tła gradientowe Nowe właściwości ramek border-radius border-image
Transformacje CSS3 pozwala na transformacje elementów zarówno 2D, jaki3d Dwuwymiarowe transformacje pozwalają na obracanie, rozciąganie, skalowanie
Animacje CSS3 pozwala tworzyć proste animacje Wykorzystuje się do tego reguły @keyframe i właściwość animation @keyframes animacja { 0% { left: 0px; } 25% { left: 25px; background: blue; } 50% { left: 50px; background: red; } 75% { left: 75px; background: blue; } 100% { left: 100px; } } div { animation: animacja 5s linear 3s infinite alternate ; }
Efekty tekstowe Możliwość wprowadzania cienia dla tekstu: text-shadow Możliwość ściągania czcionek @font-face h1 { text-shadow: 3px 8px 4px #0000ff; { @font-face } font-family: czcionka; src: url('czcionka.woff'); }
Media Pozwala na tworzenie styli na różnego rodzaju urządzenia Podaje się nazwę rodzaju urządzenia i warunki jakie musi spełniać Jeżeli te warunki są spełnione style ma zastosowanie div { border: solid 1px black; } @media screen and (min-width:400px) { div { border: none; } }
Układ strony Pozwala na tworzenie układu wielokolumnowego div { width: 100px; column-width: 45px; column-count: 3; column-gap: 1em; }