Your SlideShare is downloading. ×
0
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Ppt
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ppt

165

Published on

Sekilas Tentang HTML 5 …

Sekilas Tentang HTML 5
by Zaka_Xerpeel

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
165
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. MENU HTML5 ? HTML5 VIDEO HTML5 AUDIO HTML5 CANVAS TAG BARU DI HTML5
  • 2. Apa itu HTML5? HTML5 adalah standar terbaru untuk HTML. Versi sebelumnya dari HTML, HTML 4.01, datang pada tahun 1999, dan internet telah berubah secara signifikan sejak saat itu. HTML5 dirancang untuk menggantikan HTML 4, XHTML, dan HTML DOM Level 2. Hal ini khusus dirancang untuk memberikan konten yang kaya tanpa membutuhkan plugin tambahan. Versi saat memberikan segala sesuatu dari animasi grafis, musik untuk film, dan juga dapat digunakan untuk membangun aplikasi web yang rumit. HTML5 juga cross-platform. Hal ini dirancang untuk bekerja apakah Anda menggunakan PC, atau Tablet, Smartphone, atau Smart TV.
  • 3. Bagaimana Memulai Apakah HTML5? HTML5 merupakan kerjasama antara World Wide Web Consortium (W3C) dan Kelompok Kerja Teknologi Web Hypertext Application (WHATWG). WHATWG bekerja dengan bentuk web dan aplikasi, dan W3C bekerja dengan XHTML 2.0. Pada tahun 2006, mereka memutuskan untuk bekerja sama dan membuat versi baru dari HTML. Beberapa aturan untuk HTML5 didirikan: •Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript •Kebutuhan untuk plugin eksternal (seperti Flash) harus dikurangi •Penanganan kesalahan harus lebih mudah daripada versi sebelumnya •Scripting harus diganti dengan yang lebih markup •HTML5 harus perangkat-independen •Proses pembangunan harus terlihat untuk umum
  • 4. The HTML5 <! DOCTYPE> Dalam HTML5 hanya ada satu deklarasi, dan sangat sederhana <DOCTYPE>: <!DOCTYPE html>
  • 5. Sebuah Dokumen Minimum HTML5 Di bawah ini adalah dokumen HTML5 sederhana, dengan minimal tags diperlukan: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> Content of the document...... </body> </html>
  • 6. HTML5 - Fitur Baru Beberapa fitur baru yang paling menarik di HTML5 adalah: •Unsur <canvas> untuk gambar 2D •The <video> dan elemen <audio> untuk media pemutaran •Dukungan untuk penyimpanan lokal •Baru-elemen konten tertentu, seperti <article>, <footer>, <header>, <nav>, <section> •Bentuk kontrol baru, seperti kalender, tanggal, waktu, email, url, pencarian
  • 7. Dukungan Browser untuk HTML5 HTML5 adalah pekerjaan yang sedang berjalan. Namun, semua browser utama (Chrome, Firefox, Internet Explorer, Safari, Opera) mendukung elemen HTML5 baru dan API, dan terus menambahkan HTML5 baru fitur untuk versi terbaru mereka. The HTML 5 kelompok kerja termasuk AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, dan ratusan vendor lainnya.
  • 8. Menulis HTML Menggunakan Notepad atau TextEdit HTML dapat diedit dengan menggunakan editor HTML profesional seperti: •Adobe Dreamweaver •Microsoft Expression Web •CoffeeCup HTML Editor Namun, untuk belajar HTML sebaiknya editor teks seperti Notepad (PC) atau TextEdit (Mac). Kami percaya menggunakan editor teks sederhana adalah cara yang baik untuk belajar HTML. Ikuti 4 langkah berikut untuk membuat halaman web pertama Anda dengan Notepad. 1 2 3 4
  • 9. Langkah 1: Jalankan Notepad Untuk memulai Notepad kunjungi: Mulai All Programs Accessories Notepad 4 langkah
  • 10. Langkah 2: Edit HTML Anda dengan Notepad Ketik kode HTML Anda ke Notepad Anda: 4 langkah
  • 11. Langkah 3: Simpan HTML Anda Pilih Simpan sebagai .. di menu file Notepad itu. Bila Anda menyimpan file HTML, Anda dapat menggunakan baik htm. Atau ekstensi file. Html. Tidak ada perbedaan, itu sepenuhnya terserah Anda. Simpan file dalam folder yang mudah diingat. 4 langkah
  • 12. Langkah 4: Jalankan HTML di Browser Anda Memulai browser web Anda dan buka file html Anda dari file , Buka menu, atau hanya menelusuri folder dan double-klik file HTML Anda.Hasilnya akan terlihat seperti ini: 4 langkah
  • 13. HTML5 VIDEO Video di Web Sebelum HTML5, tidak ada standar untuk menampilkan video / film pada halaman web. Sebelum HTML5, video hanya bisa dimainkan dengan plug-in (seperti flash). Namun, browser yang berbeda mendukung berbagai plug-in. HTML5 mendefinisikan elemen baru yang menentukan cara standar untuk menanamkan video atau film pada halaman web: elemen <video>. Dukungan Browser
  • 14. HTML5 Video - Cara Bekerja Untuk menampilkan video di HTML5, ini adalah semua yang Anda butuhkan: Contoh <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> Kontrol atribut menambahkan kontrol video, seperti play, pause, dan volume. Ini juga merupakan ide yang baik untuk selalu menyertakan atribut lebar dan tinggi. Jika tinggi dan lebar diatur, ruang yang dibutuhkan untuk video dicadangkan saat halaman dimuat. Namun, tanpa atribut-atribut ini, browser tidak mengetahui ukuran video, dan tidak dapat cadangan ruang yang tepat untuk itu. Efeknya akan bahwa tata letak halaman akan berubah selama loading (sementara beban video). Anda juga harus memasukkan konten teks antara <video> dan </ video> tag untuk browser yang tidak mendukung elemen <video>. Unsur <video> memungkinkan beberapa elemen <source>. elemen <source> dapat link ke file video yang berbeda. Browser akan menggunakan format yang diakui pertama. Dukungan Browser
  • 15. HTML5 Audio Audio di Web Sebelum HTML5, tidak ada standar untuk memutar file audio pada halaman web. Sebelum HTML5, file audio harus bermain dengan plug-in (seperti flash). Namun, browser yang berbeda mendukung berbagai plug-in. HTML5 mendefinisikan elemen baru yang menentukan cara standar untuk menanamkan file audio pada halaman web: elemen <audio>. Dukungan Browser
  • 16. HTML5 Audio - Cara Bekerja Untuk memutar file audio dalam HTML5, ini adalah semua yang Anda butuhkan: Contoh <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> Kontrol atribut menambahkan kontrol audio, seperti play, pause, dan volume. Anda juga harus memasukkan konten teks antara <audio> dan </ audio> tag untuk browser yang tidak mendukung elemen <audio>. Unsur <audio> memungkinkan beberapa elemen <source>. elemen <source> dapat link ke file audio yang berbeda. Browser akan menggunakan format yang diakui pertama. Dukungan Browser
  • 17. Dukungan Browser Internet Explorer 9 +, Firefox, Opera, Chrome, Dan Safari Mendukung Elemen <Video> Dan <Audio>. Saat Ini, Ada 3 Format Video dan Audio Yang Didukung Untuk Elemen <Video> dan <Audio>: Mp4, Webm, Dan Ogg Dukungan Browser
  • 18. HTML5 Canvas Canvas di Web Unsur <canvas> digunakan untuk menggambar grafik, on the fly, pada halaman web. Contoh di sebelah kiri menunjukkan sebuah persegi panjang merah, persegi panjang gradien, persegi panjang multicolor, dan beberapa teks multicolor yang ditarik ke kanvas. Apa Canvas? The HTML5 Elemen <canvas> digunakan untuk menggambar grafik, on the fly, melalui scripting (JavaScript biasanya). Unsur <canvas> hanya wadah untuk grafis. Anda harus menggunakan script untuk benarbenar menarik grafis. Kanvas memiliki beberapa metode untuk path gambar, kotak, lingkaran, teks, dan gambar menambahkan.
  • 19. Buat kanvas Sebuah kanvas adalah area persegi pada halaman HTML, dan itu ditentukan dengan elemen <canvas>. Catatan: Secara default, elemen <canvas> tidak memiliki perbatasan dan tidak ada konten. Markup terlihat seperti ini: <canvas id="myCanvas" width="200" height="100"></canvas> Catatan: Selalu menentukan atribut id (yang akan disebut dalam naskah), dan lebar dan tinggi atribut untuk menentukan ukuran kanvas. Tip: Anda dapat memiliki beberapa elemen <canvas> pada satu halaman HTML. Untuk menambahkan border, gunakan atribut style: Contoh <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
  • 20. Menggambar Ke The Canvas Dengan JavaScript Semua menggambar di kanvas harus dilakukan di dalam JavaScript: Contoh <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75); </script>
  • 21. Contoh menjelaskan Pertama, menemukan elemen <canvas>: var c = document.getElementById("myCanvas"); Kemudian, sebut getContext () metode (Anda harus lulus string "2d" ke getContext (metode)): var ctx = c.getContext("2d"); The getContext ("2d") objek adalah built-in objek HTML5, dengan banyak properti dan metode untuk menggambar jalan, kotak, lingkaran, teks, gambar, dan banyak lagi. Dua baris berikutnya menggambar persegi panjang merah: ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75); Properti fillStyle bisa menjadi warna CSS, gradien, atau pola. The fillStyle default adalah # 000000 (hitam). The fillRect ( x, y, lebar, tinggi ) metode menggambar persegi panjang diisi dengan gaya mengisi saat ini.
  • 22. Canvas Koordinat Kanvas adalah grid dua dimensi. Sudut kiri atas kanvas telah koordinat (0,0) Jadi, metode fillRect () di atas memiliki parameter (0,0,150,75). Ini berarti: Mulai di pojok kiri atas (0,0) dan menggambar persegi panjang 150x75 piksel. Koordinat Contoh Arahkan mouse ke persegi panjang di bawah ini untuk melihat x dan y koordinat: X Y
  • 23. Canvas - Jalan Untuk menggambar garis lurus di atas kanvas, kita akan menggunakan dua metode berikut: MoveTo ( x, y ) mendefinisikan titik awal baris LineTo ( x, y ) mendefinisikan titik akhir baris Untuk benar-benar menarik garis, kita harus menggunakan salah satu dari "tinta" metode, seperti stroke ().
  • 24. Contoh Tentukan titik awal di posisi (0,0), dan titik akhir pada posisi (200.100). Kemudian gunakan stroke () metode untuk benarbenar menarik garis: JavaScript: var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); Untuk menggambar sebuah lingkaran di kanvas, kita akan menggunakan metode berikut: busur (x, y, r, start, stop) Untuk benar-benar menggambar lingkaran, kita harus menggunakan salah satu dari "tinta" metode, seperti stroke () atau mengisi (). Contoh Buat lingkaran dengan metode arc (): JavaScript: var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();
  • 25. Canvas - Teks Untuk menggambar teks pada kanvas, properti yang paling penting dan metode adalah: Font - mendefinisikan sifat font untuk teks fillText ( teks, x, y ) - Menarik "diisi" teks pada kanvas strokeText ( teks, x, y ) - Menarik teks pada kanvas (no fill) Menggunakan fillText (): Contoh Tulis tinggi 30px teks penuh di kanvas, menggunakan font "Arial": JavaScript: var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World",10,50);
  • 26. Canvas - Gradien Gradien dapat digunakan untuk mengisi persegi panjang, lingkaran, garis, teks, dll Shapes pada kanvas tidak terbatas pada warna solid. Ada dua jenis gradien: createLinearGradient ( x, y, x1, y1 ) - Menciptakan gradien linier createRadialGradient ( x, y, r, x1, y1, r1 ) - Membuat radial / melingkar gradien Setelah kita memiliki objek gradien, kita harus menambahkan dua atau lebih warna berhenti. The addColorStop () metode menentukan berhenti warna, dan posisinya di sepanjang gradien. Posisi Gradient dapat di mana saja antara 0 sampai 1. Untuk menggunakan gradien, mengatur properti fillStyle atau strokeStyle untuk gradien, dan kemudian menggambar bentuk, seperti persegi panjang, teks, atau garis. Menggunakan createLinearGradient ():
  • 27. Contoh Buat gradien linier. Isi persegi panjang dengan gradien: JavaScript: var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80);
  • 28. Canvas - Images Untuk menggambar sebuah gambar pada kanvas, kita akan menggunakan metode berikut: drawImage ( gambar, x, y )
  • 29. Gambar untuk menggunakan: Contoh Menggambar gambar ke kanvas: JavaScript: var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = document.getElementById("scream"); ctx.drawImage(img,10,10);
  • 30. HTML Tag <canvas> Tag Description <canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
  • 31. Memerintahkan abjad : tag baru di HTML5. Tag <!--...--> <!DOCTYPE > <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> Description Defines a comment Defines the document type Defines a hyperlink Defines an abbreviation Not supported in HTML5. Use <abbr> instead. Defines an acronym Defines contact information for the author/owner of a document Not supported in HTML5. Use <object> instead. Defines an embedded applet Defines an area inside an image-map Defines an article Defines content aside from the page content Defines sound content Defines bold text Specifies the base URL/target for all relative URLs in a document Not supported in HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document Isolates a part of text that might be formatted in a different direction from other text outside it Overrides the current text direction Not supported in HTML5. Use CSS instead. Defines big text
  • 32. <blockquote> Defines a section that is quoted from another source <body> Defines the document's body <br> Defines a single line break <button> Defines a clickable button <canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript) <caption> <cite> <code> Defines a table caption Not supported in HTML5. Use CSS instead. Defines centered text Defines the title of a work Defines a piece of computer code <col> Specifies column properties for each column within a <colgroup> element <colgroup> Specifies a group of one or more columns in a table for formatting <center> <command> Defines a command button that a user can invoke <datalist> Specifies a list of pre-defined options for input controls <dd> Defines a description/value of a term in a description list <del> Defines text that has been deleted from a document
  • 33. <details> <dfn> <dialog> Defines additional details that the user can view or hide Defines a definition term Defines a dialog box or window Not supported in HTML5. Use <ul> instead. <dir> Defines a directory list <div> Defines a section in a document <dl> Defines a description list <dt> Defines a term/name in a description list <em> Defines emphasized text <embed> Defines a container for an external (non-HTML) application <fieldset> Groups related elements in a form <figcaption Defines a caption for a <figure> element > <figure> Specifies self-contained content Not supported in HTML5. Use CSS instead. <font> Defines font, color, and size for text <footer> Defines a footer for a document or section <form> Defines an HTML form for user input Not supported in HTML5. <frame> Defines a window (a frame) in a frameset
  • 34. <details> Defines additional details that the user can view or hide <dfn> <dialog> <div> <dl> <dt> <em> Defines a definition term Defines a dialog box or window Not supported in HTML5. Use <ul> instead. Defines a directory list Defines a section in a document Defines a description list Defines a term/name in a description list Defines emphasized text <embed> Defines a container for an external (non-HTML) application <fieldset> <figcaption> <figure> Groups related elements in a form Defines a caption for a <figure> element Specifies self-contained content Not supported in HTML5. Use CSS instead. Defines font, color, and size for text Defines a footer for a document or section Defines an HTML form for user input Not supported in HTML5. Defines a window (a frame) in a frameset <dir> <font> <footer> <form> <frame>
  • 35. <main> <map> <mark> <menu> <meta> Specifies the main content of a document Defines a client-side image-map Defines marked/highlighted text Defines a list/menu of commands Defines metadata about an HTML document <meter> Defines a scalar measurement within a known range (a gauge) <nav> Defines navigation links <noframes> Not supported in HTML5. Defines an alternate content for users that do not support frames <noscript> Defines an alternate content for users that do not support client-side scripts <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> Defines an embedded object Defines an ordered list Defines a group of related options in a drop-down list Defines an option in a drop-down list Defines the result of a calculation Defines a paragraph Defines a parameter for an object Defines preformatted text Represents the progress of a task Defines a short quotation
  • 36. <rp> Defines what to show in browsers that do not support ruby annotations <rt> Defines an explanation/pronunciation of characters (for East Asian typography) <ruby> Defines a ruby annotation (for East Asian typography) <s> <samp> <script> <section> <select> <small> Defines text that is no longer correct Defines sample output from a computer program Defines a client-side script Defines a section in a document Defines a drop-down list Defines smaller text <source> Defines multiple media resources for media elements (<video> and <audio>) <span> Defines a section in a document Not supported in HTML5. Use <del> instead. Defines strikethrough text Defines important text Defines style information for a document Defines subscripted text Defines a visible heading for a <details> element Defines superscripted text <strike> <strong> <style> <sub> <summary> <sup>
  • 37. <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <time> <title> <tr> Defines a table Groups the body content in a table Defines a cell in a table Defines a multiline input control (text area) Groups the footer content in a table Defines a header cell in a table Groups the header content in a table Defines a date/time Defines a title for the document Defines a row in a table <track> Defines text tracks for media elements (<video> and <audio>) <tt> Not supported in HTML5. Use CSS instead. Defines teletype text <u> Defines text that should be stylistically different from normal text <ul> <var> <video> <wbr> Defines an unordered list Defines a variable Defines a video or movie Defines a possible line-break

×