HTML 5

Pengenalan HTML5

Diambil dari artikel Wikipedia/

Pengertian HTML5 Dari Wikipedia

HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan. Dimana tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium) dan WHATWG ( Web Hypertext Application Technology Working Group ).

Pengertian HTML Dari Sumber lain

HTML adalah singkatan dari Hyper Text Markup Language, yang merupakan sebuah sebuah bahasa Mark Up atau memformat file menjadi halaman web. Yang mana setiap syntax yang terdapat dalam file HTML akan di eksekusi atau di jalankan oleh browser pada untuk menjadikan halaman web. HTML merupakan dasar dari pemograman web. dimana kita bisa mengatur sesuai dengan web atau pun aplikasi yang berbasis web yang akan kita buat .Penjelasan Mudah jika dalam analoginya HTML merupakan pondasi sebuah rumah, disaat pembangunan sebuah rumah pondasi merupakan hal yg penting dan utama sebagai dasar nya.

Web browser adalah suatu program yang mampu membaca dan menerjemahkan document HTML(halaman web) hingga menampilkan nya secara grafis atau secara visual. dan dengan Syntax-syntax yang di ketikkan di file HTML akan mampu di tampilkan oleh web browser.dari menampilkan gambar,animasi,grafik,text,link, mendengarkan musik hingga memutar video.di sini web browser juga bekerja sebagai compiler dari kode-kode html dan php. Contoh dari web browser adalah Internet Explorer,Mozilla Firefox,Google Chrome,Netscape,Safari,Opera dan masih banyak lagi.

Untuk Mulai belajar Pemograman web yang kita butuhkan adalah Sebuah text editor  (Notepad,Notepad++,Netbeans dll). Web Browser(InternetExplorer,Mozilla Firefox,Google Chrome,Opera dll).dan Server local atau localhost(jika sudah mulai masuk ke pemograman PHP yang akan di jelaskan pada tutorial selanjut nya). Saat ini untuk belajar HTML kita hanya akan menggunakan text editor dan browser saja. 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 browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur dari HTML5.

Pembuatan HTML5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight.

Semakin menjamurnya plugin didalam aplikasi atau browser membuat aplikasi web ini susah untuk menembus banyak browser. Hal ini dikarenakan setiap plugin mempunyai cara yang berbeda-beda, sebagai contoh kita ingin memasang plugin flash untuk sharing video maka pada halaman web kita harus ditulis sebagai berikut:

<object type="application/x-shockwave-flash" width="400" height="220" wmode="transparent" data="flvplayer.swf?file=movies/holiday.flv">
<param name="movie" value="flvplayer.swf?file=movies/holiday.flv" />
<param name="wmode" value="transparent" />
</object>

Contoh diatas menggunakan plugin Flash dari Adobe untuk menjalankan aplikasi web pada browser maka lain caranya bila kita menggunakan Silverlight. Teknologi Silverlight dikembangkan oleh Microsoft. Contoh penggunaan Silverlight pada halaman web dapat dilihat pada HTML dibawah ini:

<img src="https://youtu.be/oqdZpxkzNvc?list=PLEdYyTRpdEO8wBbKus_iPanjNOsn3gSPz" style="background-color: #b2b2b2; height: 300px; width: 300px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_1" data-original-id="BLOGGER_object_1" />

HTML5 ini dibuat menyederhanakan kompleksitas penggunaan media video dengan standard baru yaitu penggunaan tag <head>. Dengan fitur baru ini maka kita cukup menulis script untuk menjalankan file video sebagai berikut:

<video src=https://youtu.be/oqdZpxkzNvc?list=PLEdYyTRpdEO8wBbKus_iPanjNOsn3gSPz></video>

Isu bagaimana menjalankan file video pada aplikasi web merupakan salah satu contoh bagaimana HTML4 tidak dapat mencakup masalah ini dan masih banyak lagi isu pada HTML4. Oleh karena itu, kita sudah saatnya memanfaatkan HTML5 sebagai standard aplikasi web kita.

Apakah Browser Saya Support HTML5?

Bagaimana caranya untuk menguji apakah browser yang anda install itu sudah support HTML5 atau tidak dan seberapa banyak fitur HTML5 yang disupport? Caranya cukup mudah, pertama-tama pastikan komputer anda sudah terhubung dengan internet dan arahkan ke alamat web sebagai berikut:

HTML5 TEST

HTML 5 Training

Dari data yang ada pada website itu browser Maxthon 3.4.1 merupakan browser terbaik dalam hal mendukung bahasa HTML5 dengan 422 total skor diikuti kemudian dengan google Chrome 20 dengan 414 total skor kemudian berturut-turut Opera 12.00 dengan 385, Firefox 13 dengan 345, Safari 5.1 dengan 317 dan Internet Explorer 9 dengan 138 point.

HTML REFERENCE

Contoh Awal Sebelum Lanjut ke Bab Berikutnya.

HTML memiliki ribuan sample/contoh dari HTML itu sendiri. dengan HTML Editor secara OnLine, anda bisa mengubah HTML serta menClick Tombol untuk menampilkan hasil.

<html> <html> <head> <title><span style="color: blue;">Page Title</title> </head> <body> <h1><span style="color: blue;">This is a Heading</h1> <p><span style="color: blue;">This is a paragraph</p> </body> </html>

HASIL

This is a Heading

This is a paragraph

-->untuk uji coba latihan, silahkan Click Link HTML5TEST di bawah ini;&gt--

HTML5 TEST

HTML 5 Training

PENGENALAN HTML

HTML merupakan kepanjangan dari Hyper Text Markup Language, dan HTML merupakan sebuah bahasa markup untuk menjabarkan Document Web (Web Pages).

• HTML berdiri hanya untuk Hyper Text Markup Language
• sebuah bahasa markup adalah sebuah tag dari markup tag
• Dokumen HTML penjelasan dari HTML tag
• Setiap tag HTML menjabarkan perbedaan konten pada tiap dokumen

contoh kecil dari HTML:

<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

PENJELASAN DARI CONTOH

• Definisi dari pendeklarasian DOCTYPE merupakan tipe dokumen dalam HTML
• Teks diantara <HTML> dan </HTML> menggambarkan sebuah dokumen
• Teks diantara <HEAD> dan </HEAD> memberikan informasi tentang dokumen
• Teks diantara <TITLE> dan </TITLE> memberikan judul untuk dokumen
• Teks diantara <BODY> dan </BODY> menggambarkan isi halaman yang terlihat
• Teks diantara <H1> dan </H1> menggambarkan judul
• Teks diantara <p> dan </p> menggambarkan Paragraf

Menggunakan deskripsi ini , web browser dapat menampilkan dokumen dengan judul dan paragraf .

TAG HTML
Tag HTML adalah kata kunci ( nama tag ) yang dikelilingi oleh kurung sudut <tagname> content </tagname>

• Tag HTML biasanya datang berpasangan seperti <p> dan </p>
• Tag pertama dalam pasangan adalah < tag awal tag kedua adalah > tag akhir
• Tag akhir ditulis seperti tag awal < tetapi tag akhir harus ditutup dengan tanda akhir/> dengan garis miring dalam nama tag

Tag awal sering disebut tag pembuka. Tag akhir sering disebut tag penutup .

WEB BROWSER

STRUKTUR PAGE HTML

Di bawah ini adalah visualisasi dari struktur halaman HTML :

==============================================================================================================================

Galerry Kota

LONDON

PARIS

TOKYO

LONDON

London adalah Ibu Kota dari England. dan merupakan kota dengan tingkat populasi besar di United Kingdom/Inggris, dengan area metropolotan dengan luas 13000000 kilometer persegi.

berdiri pada sebuah sungai, London menjadi pusat berdirinya 2 milenium, Sejarah ini kembali terjadi untuk para penemu di Roma, yang menamakannya Londinium.

C&S Programs

==============================================================================================================================

untuk hasil OutPut diatas, di bawah ini Source Codenya:

<!DOCTYPE html> <html> <head><title>Galerry Kota</title> </head> <body> <header> <h1>Gallery Kota</h1> </header> <nav> London Paris Tokyo </nav> <section> <h1>LONDON</h1> <p> London adalah Ibu Kota dari England. dan merupakan kota dengan tingkat populasi besar di United Kingdom/Inggris, dengan area metropolotan dengan luas 13000000 kilometer persegi. </p> <p> berdiri pada sebuah sungai, London menjadi pusat berdirinya 2 milenium, Sejarah ini kembali terjadi untuk para penemu di Roma, yang menamakannya Londinium. </p> <p> <footer><B><span style="font-family: Georgia, Times New Roman, serif;">C&S Programs </p> </section> </body> </html>

DEKLARASI <!DOCTYPE>

<!DOCTYPE> mendeklarasi atau membantu browser untuk menampilkan halaman web dengan benar .Ada jenis dokumen yang berbeda di web .Untuk menampilkan dokumen dengan benar , browser harus tahu kedua jenis dan versi. DOCTYPE deklarasi yang tidak sensitif terhadap huruf dalam Semua kasus yang diterima :

< !DOCTYPE html >

< !DOCTYPE HTML >

< !doctype html >

< !Doctype html >

DEKLARASI UMUM

HTML5

Deklarasi dalam HTML 5

<!DOCTYPE html>

HTML 4.01

Perbedaan dengan HTML 5, HTML 4.01 ini dalam pendeklarasian harus dijabarkan terlebih dahulu. bila tidak dijabarkan maka fungsi dari <!DOCTYPE html> tidak akan jalan atau beroperasi untuk mengeksekusi Source Code pada HTML yang ingin di jalankan.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">

Versi HTML

Awal dari terbentuknya web memiliki banyak versi HTML :

Version	Year
HTML	1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML5	2014

	C&S Programs

Contoh Pembuatan Photo Slide Pada HTML

<html> <!DOCTYPE html> <html> <head> <title> Cara Membuat Images Slideshow Pada Dokumen HTML </title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script src="js/jquery-min.js" type="text/javascript"></script> <script src="js/s3slider.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#slider').s3Slider({ timeOut: 3000 }); }); </script> </head> <body> <!-- start images slideshow --> <div id="slider"> <ul id="sliderContent"> <li class="sliderImage"> <a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/1.jpg" alt="1" style="border:0;"/></a> <span class="top"><strong>Title text 1</strong><br />Content text...</span> </li> <li class="sliderImage"> <a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/2.jpg" alt="2" style="border:0;" /></a> <span class="top"><strong>Title text 2</strong><br />Content text...</span> </li> <li class="sliderImage"> <a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/3.jpg" alt="3" style="border:0;" /></a> <span class="bottom"><strong>Title text 3</strong><br />Content text...</span> </li> <li class="sliderImage"> <a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/4.jpg" alt="4" style="border:0;" /></a> <span class="bottom"><strong>Title text 4</strong><br />Content text...</span> </li> <li class="sliderImage"> <a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/5.jpg" alt="5" style="border:0;" /></a> <span class="top"><strong>Title text 5</strong><br />Content text...</span> </li> <div class="clear sliderImage"></div> </ul> </div> <!-- // end images slideshow --> </body> </html>

KETERENGAN

1. Ganti css/style.css dengan url tempat Anda menyimpan file css images slideshow (sudah ada di dalam file example).
2. Ganti js/jquery-min.js dengan url tempat Anda menyimpan file jquery-min.js (sudah ada di dalam file example).
3. Ganti js/s3slider.js dengan url tempat Anda menyimpan file s3slider.js (sudah ada di dalam file example). Ganti http://www.amirabella-zone.blogspot.com dengan url link Anda.
4. Pada attribute target _blank artinya target link akan ditampilkan pada tab baru apabila Anda menginginkan targetnya pada halaman yang sama maka ganti valuenya dengan _self, atau dapat jg dengan menghapus attribute target="_blank".
5. Ganti images/1.jpg, images/2.jpg, images/3.jpg, images/4.jpg, images/5.jpg dengan url file images (gambar) Anda.
6. Ganti Title text 1, Title text 2, Title text 3, Title text 4, Title text 5 dengan Title yang Anda inginkan.
7. Ganti Content text..., dengan content text Anda.

CARA MEMBUAT EFEK HUJAN SALJU PADA HTML

<!DOCTYPE html> <html> <head> <title> Cara Membuat Efek Hujan Salju Pada Dokumen HTML </title> <script src='js/snowstorm.js' type='text/javascript'></script> </head> <body> </body> </html>

KETERANGAN

1. Sisipkan kode '' tepat di atas kode seperti pada contoh di atas.
2. Ganti js/snowstorm.js sesuai dengan Url javascript efek hujan salju Anda. (Sudah disertakan di dalam file download di bawah).
3. Silahkan download contoh cara membuat Efek Hujan Salju dalam bentuk file HTML dengan cara klik Link 'Download Example Here' Di bawah ini.

CARA MENYISIPKAN SPOILER PADA HTML

<!DOCTYPE html> <html> <head> <title> Cara Membuat Spoiler Pada Dokumen HTML </title> </head> <body> <!-- Awal Script Spoiler --> <div> <div style="margin-bottom: 5px;"> <span style="font-size: large; font-weight:bold;">Judul Spoiler:</span> <input value="Buka" type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }"></div> <div style="margin: 0px; padding: 10px; border: 1px inset;"> <div style="display: none;"> Letakan Konten Di Sini..!! </div></div></div> <!-- Akhir Script Spoiler --> </body> </html>

KETERANGAN

1. Ganti Judul Spoiler: sesuai dengan judul yang Anda kehendaki.
2. Letakan konten yang akan dimasukkan di dalam spoiler seperti sebuah paragraf maupun file gambar tepat pada kata Letakan Konten Di Sini..!!.
3. Silahkan download contoh cara membuat spoiler (Tombol Buka Tutup) dalam bentuk file HTML pada Link Di bawah ini.

Terima Kasih Atas Kunjungan Anda, Moga Bermanfaat...Peace & Respect