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

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

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.

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.

Langkah 1: Jalankan Notepad

Untuk memulai Notepad kunjungi:

Mulai
    All Programs
        Accessories
            Notepad

Langkah 2: Edit HTML Anda dengan Notepad

Ketik kode HTML Anda ke Notepad Anda:

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, seperti W3Schools.

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:

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

Internet Explorer 9 +, Firefox, Opera, Chrome, dan Safari mendukung elemen <video>.

Catatan: Internet Explorer 8 dan versi sebelumnya, tidak mendukung elemen <video>.

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.

Format Video dan Dukungan Browser

Saat ini, ada 3 format video yang didukung untuk elemen <video>: MP4, WebM, dan Ogg

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

Internet Explorer 9 +, Firefox, Opera, Chrome, dan Safari mendukung elemen <audio>.

Catatan: Internet Explorer 8 dan versi sebelumnya, tidak mendukung elemen <audio>.

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.

Format Audio dan Dukungan Browser

Saat ini, ada 3 format file yang didukung untuk elemen <audio>: MP3, WAV, dan Ogg

HTML5 Canvas

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.

Dukungan Browser

Internet Explorer 9 +, Firefox, Opera, Chrome, dan Safari mendukung elemen <canvas>.
Catatan: Internet Explorer 8 dan versi sebelumnya, tidak mendukung elemen <canvas>.

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:

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

Menggambar Ke The Canvas Dengan JavaScript

Semua menggambar di kanvas harus dilakukan di dalam JavaScript:

Contoh

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.

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:

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

Contoh

Tentukan 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 ().

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

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

Menggunakan strokeText ():

Contoh

Tulis teks tinggi 30px (tanpa fill) di kanvas, menggunakan font "Arial":
JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);

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 ():

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

Menggunakan createRadialGradient ():

Contoh

Buat radial / melingkar gradien. Isi persegi panjang dengan gradien:
JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);

Canvas - Images

Untuk menggambar sebuah gambar pada kanvas, kita akan menggunakan metode berikut:

drawImage ( gambar, x, y )

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

HTML Canvas Referensi

Untuk referensi lengkap semua properti dan metode yang dapat digunakan dengan objek kanvas (dengan try-it contoh pada setiap properti dan metode), pergi ke kami Referensi kanvas.

HTML Tag <canvas>

Tag	Description
<canvas>	Used to draw graphics, on the fly, via scripting (usually JavaScript)

Memerintahkan abjad

: tag baru di HTML5.

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
<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
<frameset>	Not supported in HTML5. Defines a set of frames
<h1> to <h6>	Defines HTML headings
<head>	Defines information about the document
<header>	Defines a header for a document or section
<hgroup>	Groups heading elements
<hr>	Defines a thematic change in the content
<html>	Defines the root of an HTML document
<i>	Defines a part of text in an alternate voice or mood
<iframe>	Defines an inline frame
<img>	Defines an image
<input>	Defines an input control
<ins>	Defines a text that has been inserted into a document
<kbd>	Defines keyboard input
<keygen>	Defines a key-pair generator field (for forms)
<label>	Defines a label for an <input> element
<legend>	Defines a caption for a <fieldset> element
<li>	Defines a list item
<link>	Defines the relationship between a document and an external resource (most used to link to style sheets)
<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

info lebih lanjut klik http://www.w3schools.com

Kak Zaka

Kamis, 27 Februari 2014

reveal.js

Kamis, 20 Februari 2014

Attrib di Command Prompt

SMP NEGERI 1 TAPEN

Sekilas Tentang HTML 5

Rabu, 12 Februari 2014

Sekilas HTML 5

HTML5 Video

HTML5 Audio

HTML5 Canvas

Apa Canvas?

Dukungan Browser

Buat kanvas

Contoh

Menggambar Ke The Canvas Dengan JavaScript

Contoh

Canvas Koordinat

Canvas - Jalan

Contoh

Contoh

Canvas - Teks

Contoh

Contoh

Canvas - Gradien

Contoh

Contoh

Canvas - Images

Gambar untuk menggunakan:

Contoh

HTML Canvas Referensi

HTML Tag <canvas>

Formulir Kontak

Popular Posts