ppt
DESCRIPTION
Sekilas Tentang HTML 5 by Zaka_XerpeelTRANSCRIPT
SEKILAS TENTANG HTML 5
SEKILAS TENTANG HTML 5SEKILAS TENTANG HTML 5
SEKILAS TENTANG
HTML 5
SEKILAS TENTANG HTML 5
SEKILAS TENTANG
HTML 5
SEKILAS TENTANG HTML 5
SEKILAS TENTANG
HTML 5
SEKILAS TENTANG
HTML 5
SEKILAS TENTANG
HTML 5
SEKILAS TENTANG HTML 5
SEKILAS TENTANG
HTML 5
SEKILAS TENTANG HTML 5
SEKILAS TENTANG
HTML 5
MENU
HTML5 VIDEO
HTML5 ?
HTML5 CANVAS
TAG BARU DI HTML5
HTML5 AUDIO
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.
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
The HTML5 <! DOCTYPE>Dalam HTML5 hanya ada satu deklarasi,
dan sangat sederhana <DOCTYPE>:<!DOCTYPE html>
Sebuah Dokumen Minimum HTML5Di 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>
HTML5 - Fitur BaruBeberapa 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
Dukungan Browser untuk HTML5HTML5 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.
Menulis HTML Menggunakan Notepad atau TextEditHTML dapat diedit dengan menggunakan editor HTML profesional seperti:•Adobe Dreamweaver•Microsoft Expression Web•CoffeeCup HTML EditorNamun, 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
Langkah 1: Jalankan Notepad
Untuk memulai Notepad kunjungi:Mulai All Programs Accessories Notepad
4 langkah
Langkah 2: Edit HTML Anda dengan Notepad
Ketik kode HTML Anda ke Notepad Anda:
4 langkah
Langkah 3: Simpan HTML AndaPilih 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
Langkah 4: Jalankan HTML di Browser AndaMemulai 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
HTML5 VIDEOVideo 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
HTML5 Video - Cara BekerjaUntuk 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
HTML5 AudioAudio 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
HTML5 Audio - Cara BekerjaUntuk 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
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
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 benar-benar menarik grafis.Kanvas memiliki beberapa metode untuk path gambar, kotak, lingkaran, teks, dan gambar menambahkan.
HTML5 CanvasCanvas di Web
Buat kanvasSebuah 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>
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>
Contoh menjelaskanPertama, 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.
Canvas KoordinatKanvas 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 ContohArahkan mouse ke persegi panjang di bawah ini untuk melihat x dan y koordinat:XY
Canvas - JalanUntuk menggambar garis lurus di atas kanvas, kita akan menggunakan dua metode berikut:MoveTo ( x, y ) mendefinisikan titik awal barisLineTo ( x, y ) mendefinisikan titik akhir barisUntuk benar-benar menarik garis, kita harus menggunakan salah satu dari "tinta" metode, seperti stroke ().
ContohTentukan titik awal di posisi (0,0), dan titik akhir pada posisi (200.100). Kemudian gunakan stroke () metode untuk benar-benar 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 ().
ContohBuat 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();
Canvas - TeksUntuk menggambar teks pada kanvas, properti yang paling penting dan metode adalah:Font - mendefinisikan sifat font untuk teksfillText ( teks, x, y ) - Menarik "diisi" teks pada kanvasstrokeText ( teks, x, y ) - Menarik teks pada kanvas (no fill)Menggunakan fillText ():ContohTulis 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);
Canvas - GradienGradien 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 liniercreateRadialGradient ( x, y, r, x1, y1, r1 ) - Membuat radial / melingkar gradienSetelah 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 ():
ContohBuat gradien linier. Isi persegi panjang dengan gradien:JavaScript:var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");
// Create gradientvar grd = ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0,"red");grd.addColorStop(1,"white");
// Fill with gradientctx.fillStyle = grd;ctx.fillRect(10,10,150,80);
Canvas - ImagesUntuk menggambar sebuah gambar pada
kanvas, kita akan menggunakan metode
berikut:drawImage ( gambar, x, y )
Gambar untuk menggunakan:
ContohMenggambar gambar ke kanvas:JavaScript:var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");var img = document.getElementById("scream");ctx.drawImage(img,10,10);
Tag Description
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
HTML Tag <canvas>
Tag Description
<!--...--> Defines a comment
<!DOCTYPE>
Defines the document type
<a> Defines a hyperlink
<abbr> Defines an abbreviation
<acronym>Not supported in HTML5. Use <abbr> instead.Defines an acronym
<address> Defines contact information for the author/owner of a document
<applet>Not supported in HTML5. Use <object> instead.Defines an embedded applet
<area> Defines an area inside an image-map
<article> Defines an article
<aside> Defines content aside from the page content
<audio> Defines sound content
<b> Defines bold text
<base> Specifies the base URL/target for all relative URLs in a document
<basefont>Not supported in HTML5. Use CSS instead.Specifies a default color, size, and font for all text in a document
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<bdo> Overrides the current text direction
<big>Not supported in HTML5. Use CSS instead.Defines big text
Memerintahkan abjad: tag baru di HTML5.
<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> Defines a table caption
<center>Not supported in HTML5. Use CSS instead.Defines centered text
<cite> Defines the title of a work
<code> 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
<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
<details> Defines additional details that the user can view or hide
<dfn> Defines a definition term
<dialog> Defines a dialog box or window
<dir>Not supported in HTML5. Use <ul> instead.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
<font>Not supported in HTML5. Use CSS instead.Defines font, color, and size for text
<footer> Defines a footer for a document or section
<form> Defines an HTML form for user input
<frame>Not supported in HTML5.Defines a window (a frame) in a frameset
<details> Defines additional details that the user can view or hide
<dfn> Defines a definition term
<dialog> Defines a dialog box or window
<dir>Not supported in HTML5. Use <ul> instead.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
<font>Not supported in HTML5. Use CSS instead.Defines font, color, and size for text
<footer> Defines a footer for a document or section
<form> Defines an HTML form for user input
<frame>Not supported in HTML5.Defines a window (a frame) in a frameset
<main> Specifies the main content of a document
<map> Defines a client-side image-map
<mark> Defines marked/highlighted text
<menu> Defines a list/menu of commands
<meta> 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> Defines an embedded object
<ol> Defines an ordered list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<output> Defines the result of a calculation
<p> Defines a paragraph
<param> Defines a parameter for an object
<pre> Defines preformatted text
<progress> Represents the progress of a task
<q> Defines a short quotation
<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> Defines text that is no longer correct
<samp> Defines sample output from a computer program
<script> Defines a client-side script
<section> Defines a section in a document
<select> Defines a drop-down list
<small> Defines smaller text
<source> Defines multiple media resources for media elements (<video> and <audio>)
<span> Defines a section in a document
<strike>Not supported in HTML5. Use <del> instead.Defines strikethrough text
<strong> Defines important text
<style> Defines style information for a document
<sub> Defines subscripted text
<summary> Defines a visible heading for a <details> element
<sup> Defines superscripted text
<table> Defines a table
<tbody> Groups the body content in a table
<td> Defines a cell in a table
<textarea> Defines a multiline input control (text area)
<tfoot> Groups the footer content in a table
<th> Defines a header cell in a table
<thead> Groups the header content in a table
<time> Defines a date/time
<title> Defines a title for the document
<tr> 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> Defines an unordered list
<var> Defines a variable
<video> Defines a video or movie
<wbr> Defines a possible line-break
THANKS FOR YOUR ATTENTION !!
BY AHMAD ZAKA BARLAMAN