Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Wielkość: px

Rozpocząć pokaz od strony:

Download "Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk"

Wiktor Lewicki
7 lat temu
Przeglądów:

1 Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk

2 Moduł 4 HTML 5 i CSS 3.0

3 Agenda Co nowego w HTML 5? Nowe elementy HTML 5 Nowe elementy w formularzach HTML Nowe elementy w CSS 3.0

4 Co nowego w HTML 5 Czym jest HTML 5? Co nowego wprowadza HTML 5

5 Czym jest HTML 5 Jest to nowa wersja języka HTML Stanowi połączenie HTML + CSS API JavaScript 1991 HTML HTML HTML HTML Początek HTML 5.0

6 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

7 Nowe elementy HTML 5 Nowe elementy strukturalne Po co? Nowe elementy blokowe i liniowe Nowe elementy interaktywne Nowy element nawigacyjny

8 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>

9 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>

10 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>

11 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

12 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

13 Nowe elementy w formularzach Nowe elementy w formularzach Nowe atrybuty Walidacja danych

14 Nowy elementy formularzy Nowe typy znacznika <input> Rodzaj elementu color date datetime datetime-local month number range Wsparcie Rodzaj elementu search tel time url week

15 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)

16 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)

17 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" />

18 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

19 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^=" tr:nth-child(even) { color:red; } p > :not(span:last-child) { color:red; }

20 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

21 Transformacje CSS3 pozwala na transformacje elementów zarówno 2D, jaki3d Dwuwymiarowe transformacje pozwalają na obracanie, rozciąganie, skalowanie

22 Animacje CSS3 pozwala tworzyć proste animacje Wykorzystuje się do tego i właściwość 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 ; }

23 Efekty tekstowe Możliwość wprowadzania cienia dla tekstu: text-shadow Możliwość ściągania h1 { text-shadow: 3px 8px 4px #0000ff; } font-family: czcionka; src: url('czcionka.woff'); }

24 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; screen and (min-width:400px) { div { border: none; } }

25 Układ strony Pozwala na tworzenie układu wielokolumnowego div { width: 100px; column-width: 45px; column-count: 3; column-gap: 1em; }

Podobne dokumenty

HTML 5 język wykorzystywany do tworzenia i prezentowania stron internetowych www. Jest

HTML 5 język wykorzystywany do tworzenia i prezentowania stron internetowych www. Jest język wykorzystywany do tworzenia i prezentowania stron internetowych www. Jest rozwinięciem języka HTML 4 i jego XML-owej odmiany (XHTMl 1), opracowywane w ramach prac grupy roboczej WHATWG (Web Hypertext