HTML 5.0. Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 2 Program Literatura Historia HTML Koncepcja HTML.

Prezentacja na temat: "HTML 5.0. Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 2 Program Literatura Historia HTML Koncepcja HTML."— Zapis prezentacji:

1 HTML 5.0

2 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 2 Program Literatura Historia HTML Koncepcja HTML 5.0 Nowe tagi i atrybuty Przechowywanie zmiennych Uproszczenia kodu

3 HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 3 Literatura http://dev.w3.org/html5/spec/Overview.html specyfikacja HTML 5.0 http://w3schools.com/html5 tutorial http://www.coreservlets.com/html5-tutorial/ strona Marty'ego Halla, tutorial

4 HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 4 Historia HTML  HTML został stworzony w 1989r Zawierał 22 znaczniki (13 istnieje do dziś)  HTML 2.0 – 1995r P ierwsza standaryzacja języka  HTML 3.0 – kwiecień 1995r Nowe elementy: tabele, wyrażenia matematyczne, oblewanie obiektów tekstem  HTML 4.0 – grudzień 1997r Nowe elementy: arkusze CSS, 3 typy (Strict, Transitional, Frameset)  HTML 5.0 – szkic opublikowany przez W3C w styczniu 2008r

5 HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 5 Koncepcja HTML 5.0  Rozwinięcie języka HTML 4.0 oraz XHTML 1.0  Konkurencyjna specyfikacja wobec XHTML 2.0 (jego rozwój porzucony w 07.2009r)  Kompatybilność wsteczna (w przeciwieństwie do XHTML 2.0)  Niezależność od sprzętu  Doprecyzowanie niejasności zwłaszcza w sprawie obsługi błędów – jednakowa obsługa błędów w różnych przeglądarkach  Zalecany rozdział treści od stylu  Przejęcie funkcjonalności pluginów – łatwiejsza integracja z resztą dokumentu  HTML 5.0 nie jest jeszcze oficjalnym standardem

6 HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 6 Nowe tagi Umieszczanie plików video  Tag video – łatwiejsza integracja z dokumentem, nie wymaga pluginów ------------------------------------------------------------------------------------------------------------------------------------------------ Twoja przeglądarka nie obsługuje tagów video.

7 HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 7 Nowe tagi Formaty video wspierane przez przeglądarki FormatIEFirefoxOperaChromeSafari OggNie3.5 +10.5 +5.0 +Nie MPEG4Nie 5.0 +3.0 + WebMNie 10.6 +6.0 +Nie

8 HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 8 Nowe tagi Umieszczanie plików audio  Tag audio – łatwiejsza integracja z dokumentem, nie wymaga pluginów ---------------------------------------------------------------------------------------------------------------------------- Twoja przeglądarka nie obsługuje tagów audio.

9 HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 9 Nowe tagi Formaty audio wspierane przez przeglądarki FormatIE 8 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg VorbisNieTak Nie MP3Nie Tak WaveNieTak NieTak

10 HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 10 Nowe tagi  Canvas – elementy HTML 5 wykorzystujące JavaScript do rysowania grafiki ---------------------------------------------------------------------------------------------------------------------------- var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#0000FF"; cxt.fillRect(0,0,150,100);

11 HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 11 Nowe tagi Nowe typy pola input w formularzach (1):  email:  url:  number:  range:  search:  color:

12 HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 12 Nowe tagi Nowe typy pola input w formularzach (2): Pola daty i czasu  date – wybór dnia, miesiąca i roku  month – wybór miesiąca i roku  week – wybór tygodnia i roku  time – wybór czasu (godzina i minuty)  datetime – wybór czasu i daty (czas UTC)  datetime-local – wybór czasu i daty (czas lokalny) -----------------------------------------------------------------------------------

13 HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 13 Nowe tagi Nowe typy pola input w formularzach (3): ułatwiają wprowadzanie danych poprawiają kontrolę nad danymi zapewniają podstawową walidację

14 HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 14 Nowe tagi IEFirefoxOperaChromeSafari emailNie 9.0Nie urlNie 9.0Nie numberNie 9.07.0Nie rangeNie 9.04.0 Data i czasNie 9.0Nie searchNie 11.0Nie colorNie 11.0Nie Nowe typy pola input w formularzach (4):

15 HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 15 Nowe tagi Nowe rodzaje pól w formularzach (1)  datalist – rozwijana lista wyboru danych Wybierz stronę:

16 HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 16 Nowe tagi Nowe rodzaje pól w formularzach (2)  keygen – generator pary kluczy publiczny / prywatny  output – używany do wyświetlania wyników skryptów

17 HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 17 Nowe tagi Nowe rodzaje pól w formularzach (3) IEFirefoxOperaChromeSafari datalistNie 9.5Nie keygenNie 10.53.0Nie outputNie 9.5NoNie

18 HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 18 Nowe tagi Nowe atrybuty w formularzach (1)  autocomplete – automatyczne uzupełnianie pola input, może być zdefiniowany dla całego formularza  autofocus – ustawia kursor w polu input  required – pole nie może zostać puste Imię: Nazwisko: E-mail:

19 HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 19 Nowe tagi Nowe atrybuty w formularzach (2)  novalidate – wyłącza walidację pola  multiple – umożliwia wpisanie wielu adresów e-mail lub nazw plików  min, max, step – definiuje wartość minimalną, maksymalną i krok zmiany dla pól typu number i range Wiek: Notatka: E-mail:

20 HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 20 Nowe tagi Nowe atrybuty w formularzach (3)  placeholder – umieszcza podpowiedź w polu input  height, width – określa wysokość i szerokość pola image  form – określa do jakich formularzy należy pole Imię:

21 HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 21 Nowe atrybuty w formularzach IEFirefoxOperaChromeSafari autocomplete8.03.59.53.04.0 autofocusNie 10.03.04.0 formNie 9.5Nie height, width8.03.59.53.04.0 requiredNie 9.53.0Nie min, max, stepNie 9.53.0Nie multipleNie3.511.03.04.0 novalidateNie 11.0Nie patternNie 9.53.0Nie placeholderNie 11.03.0

22 HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 22 Nowe tagi  Nowe elementy do łatwiejszej kontroli struktury dokumentu: header footer nav section...

23 HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 23 Przechowywanie zmiennych  Przechowywanie dużych zmiennych w cookie jest nieefektywne  HTML 5 używa zmiennych JavaScript: localStorage – aktywna bez limitu czasu sessionStorage – aktywna w danej sesji localStorage.imie="Stefan"; document.write(localStorage.imie);

24 HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 24 Uproszczenia kodu  Rodzaj dokumentu zamiast  Kodowanie znaków zamiast

25 HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 25 Uproszczenia kodu  Załączanie arkusza stylu CSS zamiast  Załączanie pliku JavaScript zamiast

26 HTML 5.0 Dziękuję