HTML 5.0

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

HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 3 Literatura specyfikacja HTML tutorial strona Marty'ego Halla, tutorial

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

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 r)  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

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.

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 OggNie Nie MPEG4Nie WebMNie Nie

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.

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

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

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):   url:  number:  range:  search:  color:

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)

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ę

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

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ę:

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

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 Nie outputNie 9.5NoNie

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:

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 lub nazw plików  min, max, step – definiuje wartość minimalną, maksymalną i krok zmiany dla pól typu number i range Wiek: Notatka:

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ę:

HTML 5.0 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 21 Nowe atrybuty w formularzach IEFirefoxOperaChromeSafari autocomplete autofocusNie formNie 9.5Nie height, width requiredNie Nie min, max, stepNie Nie multipleNie novalidateNie 11.0Nie patternNie Nie placeholderNie

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

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

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

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

HTML 5.0 Dziękuję