Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html5

666 views

Published on

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

Html5

  1. 1. Основи и вовед во HTML5 By, Vlad Јуни, 2011.
  2. 2. Што е HTML5? <ul><li>HTML5 е новиот стандард за HTML, XHTML во документниот модел HTML DOM. </li></ul><ul><li>HTML5 е сеуште во развој, но како и да е модерните прелистувачи веќе почнаа да додаваат поддршка за овој нов стандард. </li></ul>
  3. 3. Како се започна? <ul><li>HTML5 e соработка меѓу W3C (World Wide Web Consortium) и WHATWG (Web Hypertext Application Technology Working Group). </li></ul><ul><li>WHATWG го изработувале делот со веб форми и апликации додека W3C работеле на XHTML 2.0. Во 2006 овие две организации се состанале и решиле да го креираат HTML5. </li></ul>
  4. 4. Цели на HTML5 <ul><li>Новите додатоци треба да се основани на HTML, CSS, DOM и JavaScript. </li></ul><ul><li>Да се намали потребата од користење на надворешни приклучоци како Флеш плеер. </li></ul><ul><li>Подобро справување со грешки. </li></ul><ul><li>Повеќе маркап елементи за да се замени скриптирање. </li></ul><ul><li>HTML5 треба да биде независен од уредот. </li></ul><ul><li>Развојниот процес треба да биде видлив за јавноста </li></ul>
  5. 5. Новини во HTML5 <ul><li>Елементот canvas за цртање. </li></ul><ul><li>Елементите video и audio за емитување звук и слика. </li></ul><ul><li>Подобра поддршка за локално стовариште за податоци и датотеки. </li></ul><ul><li>Нови специфични елементи за содржина како article, footer, header, nav, section. </li></ul><ul><li>Нови контроли за форма како calendar, date, time, email, url, search. </li></ul>
  6. 6. Нови елементи во HTML5 <ul><li>Интернетот е сменет многу откако HTML 4.01 стана основен стандард во 1999. </li></ul><ul><li>Денес некои елементи на HTML 4.01 се застарени или никогаш користени, а има и такви кои се користат на начин не соодветен за нив. </li></ul><ul><li>Ваквите елементи се заменети, подобрени или отстранети од HTML 5. </li></ul>
  7. 7. <ul><li>Нови маркап елементи се: <article>, <aside>, <footer>, <header>, <nav>, <progress>, <ruby>, <section> и други. </li></ul><ul><li>Нови медијски елементи се: <audio>, <video>, <source>, <embed>. </li></ul><ul><li>Canvas елементот кој служи за цртање со скрипти: <canvas> </li></ul><ul><li>Нови елементи на форма: <datalist>, <keygen>, <output>. </li></ul><ul><li>Нови вредности на атрибути на <input> елементот: tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range, color </li></ul>
  8. 8. Видео на Веб <ul><li>До сега не постоеше стандард за прикажување видео материјал на веб. </li></ul><ul><li>Овој проблем се решаваше со надворешни приклучоци како Флеш плеерот. </li></ul><ul><li>HTML5 воведува стандард за прикажување видео материјал на веб страна без притоа да има потреба од додатоци. </li></ul><ul><li>Поддржани видео формати се Ogg, MPEG4 и WebM </li></ul>
  9. 9. Видео на веб <ul><li>Ogg стандардот се однесува на Ogg и Theora видео кодеците како и Vorbis аудио кодекот. </li></ul><ul><li>MPEG 4 стандардот се однесува на H.264 видео кодек и AAC аудио кодек. </li></ul><ul><li>WebM стандардот се однесува на VP8 видео кодек и Vorbis аудио кодек. </li></ul>
  10. 10. Видео на веб <ul><li>За да прикажете видео на веб ви е потребно следново: </li></ul><ul><li><video src=&quot;movie.ogg&quot; width=&quot;320&quot; height=&quot;240&quot; controls=&quot;controls&quot;> </li></ul><ul><li>Your browser does not support the video tag. </li></ul><ul><li></video> </li></ul><ul><li>Ако прелистувачот не поддржува HTML5 тогаш пожелно е да се стави текст измеѓу таговите. </li></ul>
  11. 11. <ul><li>Видео елементот дозволува повеќекратни типови на видео стрим. Оваа опција е добра за различни прелистувачи бидејќи секој ќе си го препознае оној кој го поддржува: </li></ul><ul><li><video width=&quot;320&quot; height=&quot;240&quot; controls=&quot;controls&quot;> </li></ul><ul><li><source src=&quot;movie.ogg&quot; type=&quot;video/ogg&quot; /> </li></ul><ul><li><source src=&quot;movie.mp4&quot; type=&quot;video/mp4&quot; /> </li></ul><ul><li><source src=&quot;movie.webm&quot; type=&quot;video/webm&quot; /> </li></ul><ul><li>Your browser does not support the video tag. </li></ul><ul><li></video> </li></ul>
  12. 12. Атрибути на Видео тагот <ul><li>Атрибут вредност </li></ul><ul><li>audio muted </li></ul><ul><li>autoplay autoplay </li></ul><ul><li>controls controls </li></ul><ul><li>height pixels </li></ul><ul><li>loop loop </li></ul><ul><li>poster url </li></ul><ul><li>preload preload </li></ul><ul><li>src url </li></ul><ul><li>width pixels </li></ul>
  13. 13. Аудио на Веб <ul><li>Како и за видео така и за аудио не постоеше стандард за емитување звук на веб. </li></ul><ul><li>HTML5 го решава овој проблем. </li></ul><ul><li>И за аудио важат истите формати Ogg, MPEG 4 и WebM. </li></ul><ul><li>За да ставите аудио на веб страна потребно ви е следново: </li></ul><ul><li><audio src=&quot;song.ogg&quot; controls=&quot;controls&quot;> </li></ul><ul><li>Your browser does not support the audio element. </li></ul><ul><li></audio> </li></ul>
  14. 14. Аудио на Веб <ul><li>И аудиото на веб поддржува повеќекратни типови на аудио стрим како што беше за видео. Така прелистувачот ќе го препознае првиот тип на стрим кој го поддржува. </li></ul><ul><li><audio controls=&quot;controls&quot;> </li></ul><ul><li><source src=&quot;song.ogg&quot; type=&quot;audio/ogg&quot; /> </li></ul><ul><li><source src=&quot;song.mp3&quot; type=&quot;audio/mpeg&quot; /> </li></ul><ul><li>Your browser does not support the audio element. </li></ul><ul><li></audio> </li></ul>
  15. 15. Атрибути на аудио тагот <ul><li>Атрибут вредност </li></ul><ul><li>autoplay autoplay </li></ul><ul><li>controls controls </li></ul><ul><li>loop loop </li></ul><ul><li>preload preload </li></ul><ul><li>src url </li></ul>

×