ianpanrita » html5 http://ianpanrita.com BELAJAR BERBAGI DAN BERPRESTASI Sun, 01 Jan 2012 01:37:30 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Belajar HTML5 http://ianpanrita.com/belajar-html5.ian/ http://ianpanrita.com/belajar-html5.ian/#comments Sat, 18 Sep 2010 16:16:00 +0000 ianpanrita http://ianpanrita.com/?p=229 Belajar HTML5 tidaklah sulit, cuma karna merupakan hal baru jadi masih kurang referensi atau tutorial mengenai HTML5. Disini saya akan berbagi sedikit mengenai HTML5, sebelumnya saya sudah membuat artikel mengenai unsur atau tag-tag baru pada HTML5.

Ok lansung aja kita belajar mengenai HTML5 dimulai dari membandingkan code HTML versi sebelumnya kemudian kita mengubahnya menjadi HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

        <style type="text/css">
		* { margin:0px; padding:0px;}
	</style>
	<script type="text/javascript" src="http://ianpanrita.com/blog/demo/js.js"></script>
</head>
<body>
<h1>Welcome To My Site</h1>
Bagian Artikel
</body>
</html>

<!DOCTYPE>, dalam dokumen HTML versi sebelumnya DOCTYPE dituliskan dengan

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Sedangkan pada HTML5 DOCTYPE cuma ditulis

<!DOCTYPE HTML>

wow ringkas banget, mudah diingat pastinya. DOCTYPE ditulis sebelum tag <html>. Fungsi dari doctype adalah memberitahukan ke browser bahwa tipe dokumen yang digunakan adalah HTML. Deklarasi DOCTYPE bukanlah tag HTML, yang merupakan instruksi untuk web browser tentang apa versi bahasa markup halaman website. Sangat penting bahwa kita menuliskan DOCTYPE dalam semua dokumen HTML, sehingga browser tahu apa jenis dokumen yang harus diharapkan.

kemudian pada META, Perbedaan Antara 4,01 HTML dan HTML 5, skema atribut tidak didukung dalam HTML 5 yang memiliki atribut baru, charset, yang membuatnya lebih mudah untuk menentukan charset.

Contoh :

HTML 4.01:
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
HTML 5:
<meta charset="ISO-8859-1">

Kemudian pada bagian style, kita suda ngak membutuhkan lagi type=”text/css” nya , untuk HTML5 kita ubah saja menjadi seperti berikut

<style>
		* { margin:0px; padding:0px;}
	</style>

kemudian pada tag script cukup ditulis dengan

<script src="http://cruzenaldo.com/jquery.js"></script>

Selanjutnya kita menambahkan beberapa tag-tag baru pada HTML5, seperti menambahkan Tag HEADER, NAV, ASIDE, dan FOOTER. Sedikit penjelasan mengenai tag yang akan kita tambahkan. Pertama Header biasanya digunakan untuk logo atau judul web kita. NAV digunakan untuk menu utama, berbeda dengan menu yang ada di sidebar loh dan NAV ini biasanya digunakan di dalam tag HEADER. Kemudian ada ASIDE untuk bagian sidebar dan FOOTER untuk bagian bawah tempat Copyright, dll. Sehingga hasilnya sebagai berikut :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
<style>
		* { margin:0px; padding:0px;}
	</style>
	<script src="http://ianpanrita.com/blog/demo/js.js"></script>
</head>
<body>
	<header>
<h1>Welcome To My Site</h1>
Bagian Artikel
	<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
</ul>
	</nav>
	</header>
	<aside>
<h2>Kategori</h2>
<ul>
<li><a href="#">Januari</a></li>
<li><a href="#">Februari</a></li>
</ul>
	</aside>
	<footer>
		copyleft by ianpanrita	</footer>
</body>
</html>

Namun Tag-tag baru pada HTML5 masih belum banyak browse yang support, agar dapat diakses pada bebrapa browse kita dapat menambahkan

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

Semoga artikel ini dapat membantu anda dalam belajar HTML5, amien….

Pencarian kata kunci di search engine :

  • belajar html5
  • belajar html 5
  • tutorial html 5
  • html5
  • artikel html5
  • HTML
  • perbedaan html dengan html5
  • belajar script HTML5
  • perbedaan html 5 dengan html sebelumnya
  • perbedaan html dan html5
]]> http://ianpanrita.com/belajar-html5.ian/feed/ 8 Unsur Baru atau tag baru pada HTML5 http://ianpanrita.com/unsur-baru-tag-pada-html5.ian/ http://ianpanrita.com/unsur-baru-tag-pada-html5.ian/#comments Tue, 14 Sep 2010 17:53:41 +0000 ianpanrita http://ianpanrita.com/?p=197 Disini saya akan share Unsur baru atau tag-tag baru pada HTML5, jujur aja artikel yang saya tulis ini merupakan hasil sadur atau bersumber dari w3schools , tujuan saya hanya untuk berbagi dan belajar bersama. mari kita bersama-sama belajar dan semoga bisa bermanfaat bagi anda.

Dalam perkembangan dunia Internet banyak berubah sejak HTML 4.01 menjadi standar pada tahun 1999. Beberapa elemen dalam HTML 4.01 yang sudah usang, tidak pernah digunakan, atau tidak memberikan manfaat yang banyak , maka akan dihapus atau ditulis ulang di HTML5.

Untuk lebih menangani penggunaan internet saat ini yang semakin berkembang, HTML5 juga mencakup beberapa unsur-unsur baru untuk struktur yang lebih baik, gambar, isi media, dan bentuk penanganan yang lebih baik.

Penambahan unsur baru pada HTML5 :

 

Tag Penjelasan
<article> Untuk konten eksternal, seperti teks dari artikel-berita, blog, forum, atau konten lain dari sumber eksternal
<aside> Untuk konten selain konten itu ditempatkan di samping konten yang masuk harus berkaitan dengan isi sekitarnya
<command> Sebuah tombol, atau radiobutton, atau sebuah kotak centang
<details> Untuk rincian menggambarkan tentang sebuah dokumen, atau bagian dari dokumen
<summary> Sebuah keterangan, atau ringkasan, dalam rincian elemen
<figure> Untuk pengelompokan bagian dari konten berdiri sendiri, bisa video
<figcaption> Keterangan dari tokoh bagian
<footer> Untuk footer dari dokumen atau bagian, dapat meliputi nama penulis, tanggal dokumen, informasi kontak, atau informasi hak cipta
<header> Untuk penerapan suatu dokumen atau bagian, dapat mencakup navigasi
<hgroup> Untuk bagian dari pos, menggunakan <h1> untuk <h6>, di mana yang terbesar adalah pos utama bagian tersebut, dan yang lainnya sub-judul
<mark> Untuk teks yang harus disorot
<meter> Untuk pengukuran, digunakan hanya jika nilai-nilai maksimum dan minimum diketahui
<nav> Untuk bagian navigasi atau menu
<progress> Keadaan pekerjaan berlangsung
<ruby> Untuk penjelasan ruby (catatan Cina atau karakter)
<rt> Untuk penjelasan tentang penjelasan ruby
<rp> Apa untuk menunjukkan browser yang tidak mendukung elemen ruby
<section> Untuk bagian dalam dokumen. Seperti bab, header, footer, atau bagian lain dari dokumen
<time> Untuk menentukan waktu atau tanggal, atau keduanya

Elemen baru untuk Media

Standar baru untuk konten Media :

Tag Penjelasan
<audio> Untuk konten multimedia , suara, musik atau streaming audio lainya
<video> Untuk konten video , seperti klip film atau Streaming video lainya
<source> Untuk sumber suatu media pada elemen media, menjelaskan didalam video atau media audio
<embed> Untuk mengisi embedded , contohnya seperti plug-in atau mengambil video dari Youtube.

Unsur tag Canvas

Unsur kanvas menggunakan JavaScript untuk membuat gambar pada halaman web.

Tag Penjelasan
<canvas> Untuk membuat gambar pada halaman web

Tag atau unsur baru pada Form

HTML5 memberika unsur-unsur bentuk yang lebih baik, dengan fungsionalitas yang lebih baik pula:

Tag Penjelasan
<datalist> Daftar pilihan untuk nilai input
<keygen> Hasilkan kunci untuk mengotentikasi pengguna
<output> Untuk berbagai jenis output, seperti output yang ditulis oleh script

Nilai Baru Atribut Tipe Input

Sebuah atribut elemen input yang memiliki nilai-nilai baru, untuk kontrol input yang lebih baik sebelum mengirimnya ke server:

Tipe Penjelasan
tel Nilai input untuk nomor telepon
search Untuk bidang pencarian
url Nilai input untuk memasukkan URL
email Untuk mengisi email atau lebih dari 1 email
datetime Untuk pengisian waktu dan tanggal
date Untuk pengisian tanggal
month Untuk pengisian bulan
week Untuk pengisian minggu
time Untuk pengisian waktu
datetime-local Untuk pengisian lokal waktu/tanggal
number Untuk pengisian nomer
range Untuk pengisian rentang waktu
color Untuk pengisian heksadesimal sebuah warna, contohnya #FF8800

Buat teman-teman yang ingin mendownload ebooknya silahkan download disini

Ebook html5

Pencarian kata kunci di search engine :

  • penjelasan html 5
  • tag html 5 dan contohnya
  • Tag pada HTML5
  • penjelasan html5
  • tag untuk html 5
  • coding untuk mengcopy image ke dalam canvas html5
  • tag html 5 terbaru bagaimana ?
  • tag tag pada html 5
  • tag-tag baru html 5
  • TAG-TAG BARU HTML5
]]> http://ianpanrita.com/unsur-baru-tag-pada-html5.ian/feed/ 4 Apa itu HTML5 http://ianpanrita.com/apa-itu-html5.ian/ http://ianpanrita.com/apa-itu-html5.ian/#comments Sun, 08 Aug 2010 01:46:54 +0000 ianpanrita http://ianpanrita.com/?p=136 HTML5 merupakan standar baru untuk HTML, XHTML, dan DOM HTML. Sejak munculnya HTML versi 4.01, perkembangan website dunia semakin berkembang. Saat ini HTML5 masih dalam pengembangan, namun hanya beberapa browse sudah mendukung HTML5.

HTML5 merupakan hasil proyek dari W3C ( World Wide Web Consortium dan WHATWG ( Web Hypertext Application Technology Working Group ). Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.

Berikut tujuan dibuatnya HTML5 :

  • Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
  • Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )
  • Penanagan kesalahan yang lebih baik
  • Lebih markup untuk menggantikan scripting
  • HTML5 merupakan perangkat mandiri
  • Proses pembangunan dapat terlihat untuk umum

Fitur baru dalam HTML5 :

  • Unsur kanvas untuk menggambar
  • Video dan elemen audio untuk media pemutaran
  • Dukungan yang lebih baik untuk penyimpanan secara offline
  • Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section
  • Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.

Beberapa browse sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Exploree ) akan mendukung beberapa fitur dari HTML5

Pencarian kata kunci di search engine :

  • apa itu html5
  • apa itu html 5
  • html5
  • Perkembangan HTML 5
  • perkembangan html5
  • apa itu html5?
  • html 5 adalah
  • html 5
  • apa yang dimaksud dengan html5
  • Aplikasi Permainan Client Server Menggunakan J2ME
]]> http://ianpanrita.com/apa-itu-html5.ian/feed/ 3 Belajar membuat website dengan HTML5 http://ianpanrita.com/belajar-membuat-website-html5.ian/ http://ianpanrita.com/belajar-membuat-website-html5.ian/#comments Wed, 28 Jul 2010 18:34:50 +0000 ianpanrita http://ianpanrita.com/?p=79 XHTML 2 sudah mati, saatnya beralih ke HTML 5! Menurut W3C , XHTML 2 telah sudah tidak lagi dikembangkan dan W3C berencana untuk meningkatkan kelebihan dari HTML 5 saja. meskipun HTML 5 tidak akan sepenuhnya didukung hingga tahun 2022, tidak berarti bahwa kita tidak mempelajari dan pasti akan mempergunakanya.disini saya akan bagikan scripts HTML 5 Cheat Sheet yang berisi daftar tag , penjelasan, atribut dan apakah support dalam HTML 4.
namun beberapa browse masih belum support html5… tapi tidak ada salahnya untuk mempelajari hingga html 5 bener2 disempurnakan

Silahkan Download Cheat Sheet HTML 5 :

Cheat Sheet HTML 5

Pencarian kata kunci di search engine :

  • belajar html5
  • belajar HTML 5
  • membuat html5
  • tutorial html 5
  • cara membuat html5
  • membuat web dengan html5
  • membuat web dengan html 5
  • membuat website dengan html 5
  • membuat website dengan html5
  • membuat html 5
]]> http://ianpanrita.com/belajar-membuat-website-html5.ian/feed/ 11