HTML 5

         SELVY METHA A. / 13.02.8479        

1.         Pengertian HTML 5

HyperText Markup Language (HTML) adalah suatu spesifikasi atau standard yang dikeluarkan oleh W3C (World Wide Web Consortium) sebagai revisi dari standard HTML. Tujuan utamanya telah meningkatkan bahasa dengan dukungan untuk multimedia terkini dengan tetap mudah dibaca oleh manusia dan secara konsisten dimengerti oleh komputer dan perangkat (web browser, parser, dll). HTML5 dimaksudkan untuk menggolongkan tidak hanya HTML 4, tapi XHTML 1 dan DOM Level 2 HTML juga.HTML5 ini merupakan hasil proyek dari lembaga persatuan website dunia, World Wide Web Consortium (W3C) dan Web Hypertext Application Technology Working Group (WHATWG). Proyek tersebut dimulai di tahun 2009 untuk menyempurnakan bahasa penanda sebelumnya yang dianggap sudah lawas. Tujuan utama dengan adanya HTML5 adalah mengurangi penggunaan plugin-plugin 3rd party pada HTML sehingga dapat mempercepat kinerja web itu sendiri. Plugin-plugin tersebut seperti Adobe Flash, Microsft Silverlight, Java dan lain-lainnya.

HTML adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam format ASCII normal sehingga menjadi home page dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language),HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internetyang didefinisikan dan dikendalikan penggunaannya olehWorld Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).

Tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenali setiap elemen dari dokumen dengan suatu tanda tertentu. IBM kemudian mengembangkan suatu jenis bahasa yang menggabungkan teks dengan perintah-perintah pemformatan dokumen. Bahasa ini dinamakan Markup Langiage, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya. IBM menamakan sistemnya ini sebagai Generalized Markup Language atau GML.

Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang dokumen yang sangat baik, dan kemudian mengeluarkan suatu publikasi ( ISO 8879 ) yang menyatakan markup language sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi memberinya nama lain, yaitu SGML ( Standard Generalized Markup Language ).

ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk pemrosesan informasi teks dan sistem-sistem perkantoran. Tetapi diluar perkiraan ISO, SGML dan terutama subset dari SGML, yaitu HTML juga berguna untuk menjelajahi internet. Khususnya bagi mereka yang menggunakan World Wide Web. Versi terakhir dari HTML adalah HTML 4.01, meskipun saat ini telah berkembang XHTMLyang merupakan pengembangan dari HTML.

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dariInternet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologiHTMLagar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua(World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak] pembuat web.

HTML5 adalah versi revisi ke lima dari kakak pendahulunya, HTML dan HTML4. Banyak fitur tambahan yang ada di HTML5 membuat para programmer web semangat untuk mempelajarinya.

2.         Sejarah HTML 5

Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk menulis halaman web. HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu.

HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990 HTML mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya. Namun perkembangan resmi dikeluarkan pada bulan November 1995 oleh IETF (Internet Engineering Task Force). HTML 2.0 ini merupakan penyempurnaan dari HTML+ (1993).

HTML 3.0 (1995) memberikan kemampuan lebih daripada versi sebelumnya. Sebuah usaha dari World Wide Web Consortium’s (W3C) HTML Working Group pada tahun 1996 menghasilkan HTML 3.2. HTML versi ini secara resmi diterbitkan pada bulan Januari 1997. HTML versi terbaru adalah HTML 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. HTML merupakan perbaikan dari HTML 4.0 yang lebih dulu diterbitkan. (18 Desember 1997).

Awal mulanya sebenarnya Sejarah HTML atau Hypertext Markup Language telah menjadi teknologi utama untuk Web sejak awal tahun 1990-an. Tim Berners-Lee menciptakan HTML pada tahun 1989 sebagai cara sederhana namun efektif untuk mengkodekan dokumen elektronik. Bahkan, tujuan awal dari web browser adalah untuk melayani sebagai pembaca untuk dokumen berformat HTML. Dua dekade kemudian, browser itu sendiri telah menjadi sebuah portal ke dunia media online. Itu sebabnya HTML5 tidak hanya sebagai revisi HTML, tetapi juga sebagai standar yang komprehensif untuk bagaimana halaman web bekerja.

Pada tahun 1994, HTML masih dalam revisi pertama, Mosaic dan Netscape mendominasi pasar browser, dan kebanyakan orang belum familiar dengan istilah World Wide Web. Tahun itu, pencipta HTML  Berners-Lee memimpin kelompok untuk membuat Web standar yang dikenal sebagai World Wide Web Consortium (W3C).

Meskipun W3C adalah kewenangan standarisasi yang diakui saat ini, para pemain komersial di pasar browser 1990 mengabaikan standar-standar ini dan merintis jalan mereka sendiri. Pada tahun 1995, W3C menerbitkan revisi kedua dari standar HTML, dan Web pendatang baru Microsoft menjadi platform  browser Internet Explorer (IE).

Selama perang browser awal, para pengembang Web ditantang untuk menjaga situs mereka selalu kompatibel dengan setiap rilis baru dari browser utama. Meskipun W3C telah menerbitkan HTML 3.2 pada tahun 1997, diikuti dengan HTML 4 tahun 1998, mengikuti standar sepertinya kurang penting dibandingkan menjaga fitur browser yang disajikan pengembang. Hal ini berlangsung hingga tahun 2003 ketika komunitas berbasis Mozilla Foundation mematahkan tren. Setelah dibebaskan Browser Mozilla asli, yang diikuti oleh browser Firefox pada tahun 2004, Mozilla cepat mendominasi dibandingkan IE.

Sementara Mozilla Firefox terus berkembang menggunakan HTML 4 standar, Mozilla bergabung dengan Apple dan Opera pada tahun 2004 untuk membentuk kelompok yang disebut Web Hypertext Application Technology Working Group (WHATWG). Tujuan dari WHATWG adalah untuk menjaga perkembangan siklus HTML. WHATWG dan W3C mengkombinasikan spesifikasi yang ada untuk HTML dan XHTML untuk dikembangkan lebih lanjut dengan spesifikasi HTML 5 baru.

3.                    Pengenalan HTML

HTML5 adalah versi kelima dari HTML standar yang pertama kali diciptakan pada tahun 1990. HTML5 hingga bulan September 2011 ini masih dalam tahap pengembangan. HTML5 ini diharapkan dapat memperbaiki teknologi HTML sehingga mendukung teknologi multimedia terbaru serta lebih mudah dimengerti oleh manusia maupun mesin. Meski masih dalam tahap pengembangan, perlu kiranya kita mengenal HTML5 ini.

Berikut coding-coding menarik di HTML5.

<html><body>Ini contoh Video<br /> <video width="320" height="240" controls="controls">  <source src="http://img.muchad.com/film.mp4" type="video/mp4" /> <source src="http://img.muchad.com/film.ogg" type="video/ogg" /> <source src="http://img.muchad.com/film.webm" type="video/webm" /> Browser Anda tidak mendukung Video Tag. </video> <br /><br /> Ini contoh Audio<br /> <audio controls="controls"> <source src="http://img.muchad.com/song.ogg" type="audio/ogg" /> <source src="http://img.muchad.com/song.mp3" type="audio/mpeg" /> Browser Anda tidak mendukung Elemen Audio. </audio> <br /><br /> Contoh Input<br /> <form action="" method="get"> Homepage: <input type="url" name="user_url" /><br /><br /> <input type="submit" /> </form> <br /><br /> <form action="" method="get"> E-mail: <input type="email" name="user_email" /><br /><br /> <input type="submit" /> </form> </body> </html>

Tampilan dari coding di atas adalah sebagai berikut:

Ini contoh Video

Browser Anda tidak mendukung Video Tag.

Ini contoh Audio

Browser Anda tidak mendukung Elemen Audio.

Contoh Input

Top of Form

Homepage:

Bottom of Form

Top of Form

E-mail:

Bottom of Form

Contoh file video dan suara muchad peroleh dari Wikipedia.

INGAT! Untuk video dan suara tidak semua browser mendukung berikut listnya:

Format Video IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MPEG 4 9.0+ No No 5.0+ 3.0+ WebM No 4.0+ 10.6+ 6.0+ No

Format Audio	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis	No	Yes	Yes	Yes	No
MP3	Yes	No	No	Yes	Yes
Wav	No	Yes	Yes	Yes	Yes

4.         Manfaat Menggunakan HTML 5

Ø   Dukungan suara dan video

Pengembang web bekerja tanpa lelah untuk membuat software yang streaming video, animasi layar dan mengintegrasikan dengan situs web Jaringan pribadi seperti Facebook dan Twitter. Dalam pencarian mereka untuk membuat aplikasi gambar dan video mereka harus belajar dan menerapkan alat-alat, termasuk Silverlight dan Flex atau tool JavaScript lainnya. Namun, ha ini meningkatkan waktu dan kompleksitas untuk mengembangkan Aplikasi Web umum dan perangkat lunak. Dengan dukungan HTML, audio dan embedding video mungkin, serta grafik dan gambar berkualitas.

Ø  Peningkatan membentuk elemen objek

Format HTML5 juga menawarkan bentuk ditingkatkan untuk mencari kotak, input teks dan bidang lain yang relevan dan menawarkan validasi data yang mudah dan interaksi dengan elemen halaman serta perbaikan yang berarti lainnya.

Geo-Lokasi

HTML5 mendukung fitur geo-lokasi canggih, terlepas dari apakah yang diberikan oleh GPS atau tidak, secara langsung diterapkan pada semua browser HTML5 kompatibel. Lintang Google pada iPhone adalah contoh terbaik dari Geo-lokasi. Aplikasi geo-lokasi benar-benar platform independen.

Ø  User-friendly interface

Format HTML5 juga fitur baru dan lebih baik Database API umum digunakan secara lokal. Sederhananya, ia menyediakan penyimpanan yang jelas database yang memberikan pengembang kesempatan untuk menyimpan atau menyimpan data terstruktur. Database ini digunakan ketika Anda ingin menyimpan belanja produk keranjang untuk situs belanja secara online.

HTML5 tidak dapat diandalkan dalam hal format karena web browser yang berbeda karena mereka tidak mendukung salah satu format tunggal. diambil dari situs orang pandai cerita.

5.         Dasar-dasar HTML 5

Mendesain HTML berarti melakukan suatu tindakan pemrograman. Namun HTML bukanlah sebuah bahasa pemrograman. Namun HTML hanyalah berisi perintah-perintah yang telah terstruktur berupa tag-tag penyusun. Menuliskan tag-tag HTML tidaklah sebatas hanya memasukkan perintah-perintah tertentu agar HTML kita dapat di akses oleh browser. Mendesain HTML adalah adalah sebuah seni tersendiri. Homepage yang merupakan implementasi dari HTML adalah refleksi dari orang yang membuatnya. Untuk itu kita perlu mendesainnya dengan baik agar para pengunjung homepage yang kita buat merasa senang dan bermanfaat.

Mendesain HTML dapat dilakukan dengan dua cara:

1. Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan lain-lain. Dapatkan editor HTML lainnya disini.

2. Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam dokumen HTML.

6.            Fitur-fitur baru HTML 5

·  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,
navigation, section.

·  Bentuk kontrol form seperti kalender, tanggal, waktu, e-mail, URL, search.

7.                Pengenalan Struktur HTML 5

Seiring dengan perkembangan Web yang semakin inovatif, HTML 4 yang telah berkibar selama hampir satu dekade ini akhirnya mulai semakin dikembangkan kearah yang lebih baik atau kita kenal dengan nama HTML 5.

HTML 5 menjanjikan fleksibilitas lebih bagi penulis, memungkinkan Website lebih menarik dan interaktif serta memperkenalkan dan meningkatkan berbagai Fitur, seperti Kontrol bentuk, API, multimedia, struktur, dan semantik.

Markup untuk Dokumen dapat digambarkan sebagai berikut:

<body>

<header>…</header>

<nav>…</nav>

<article>

<section>

…

</section>

</article>

<aside>…</aside>

<footer>…</footer>

</body>

Contohnya, Struktur Dibawah ini yang ditandai dengan bagian nested dan elemen h1:

<section>

<h1>Level 1</h1>

<section>

<h1>Level 2</h1>

<section>

<h1>Level 3</h1>

</section>

</section>

</section>

Perhatikan Struktur Diatas, Untuk kompabilitas yang lebih baik dengan Browser saat ini, telah dimungkinkan menggunakan elemen post lain (h2 untuk h6) tepat ditempat elemen h1. itulah salah satu keuntungan menggunakan elemen ini.

Dengan mengidentifikasi halaman menggunakan elemen sectioning spesifik, teknologi bantu dapat membantu pengguna untuk lebih mudah menavigasi halaman. Misalnya, mereka dengan mudah dapat melompat ke bagian navigasi atau cepat melompat dari satu artikel ke berikutnya tanpa perlu bagi penulis untuk memberikan skip link.

Pada elemen header anda dapat menyertakan sub judul, informasi atau lainnya. Seperti Struktur Dibawah Ini:

<header>

<h1>A Preview of HTML 5</h1>

<p>By Ferdinand</p>    

</header>

<header>

<h1>Example Blog</h1>

<h2>Insert tag line here.</h2>

</header>

Setelah itu bagian lainnya adalah Footer yang berisi data hak Cipta, Link ke halaman Terkait dan lainnya, Strukturnya seperti dibawah ini:

<footer>© 2010 DJ Note Inc.</footer>

Selanjutnya adalah bagian link navigasi, dengan struktur seperti dibawah ini:

<nav>

<ul>

<li><a href=”/”>Home</a></li>

<li><a href=”/prolog”>Prolog</a></li>

<li><a href=”/contact”>Contact</a></li>

<li><a href=”/about”>About</a></li>

</ul>

</nav>

Selanjutnya adalah Struktur Sidebar, seperti dibawah ini:

<aside>

<h1>Archives</h1>

<ul>

<li><a href=”/2010/09/”>September 2010</a></li>

<li><a href=”/2010/08/”>August 2010</a></li>

<li><a href=”/2010/07/”>July 2010</a></li>

</ul>

</aside>

Selanjutnya, Section yang merupakan bagian utama dalam sebuah dokument, misalnya kita bayangkan seperti sebuah Bab dengan Struktur seperti dibawah ini:

<section>

<h1>Chapter 1: Saya Orang Kreatif</h1>

<p>

Banyak yang bilang saya gak cerdas dan bengal, dan saya akui demikianlah saya, tapi ditengah kebodohan saya, saya tetap bersyukur diberikan otak yang kreatif oleh Tuhan

…</p>

</section>

Terakhir adalah Unsur artikel, yang berisi konten, postingan, komentar dan lainnya, Strukturnya seperti dibawah ini:

<article id=”comment-3″>

<header>

<h4><a href=”#comment-3″ rel=”bookmark”>Comment #3</a>

by <a href=”http://example.com/”>Google</a></h4&gt;

<p><time datetime=”2010-08-29T13:58Z”>August 29th, 2010 at 13:58</time>

</header>

<p>Blogwalking Gan!</p>

</article>

Read More

Form HTML

BELAJAR MEMBUAT FORM PADA HTML

Kali ini kita akan belajar membuat form pada HTML,, sebelum membuat Form HTML harus mengetahui apa kegunaan dari form HTML tersebut,,nah biasa'nya form digunakan untuk mengumpulkan data dari pengunjung web kita,,Mulai dari form untuk login, form kontak, form untuk pendaftaran user, bahkan untuk mengirimkan data antar halaman web.

Sebuah form dalam HTML harus berada di dalam tag form, yang diawali dengan <form> dan diakhiri dengan </form>. Seperti yang sudah dipelajari mengenai penulisan kode pada HTML diawali dengan <Nama Function Tag> ......( Isi sebuah tag )..... </Nama Function Tag>,, nah pada bagian terakhir kita harus menutup kode dengan menambahkan slash ( / ).

Berikut beberapa properti masukan pada elemen form :
1.       Text box<input type="text">
Dignakan untuk memasukan input yang berupa teks.
2.       Password<input type="password">
Di gunakan untuk memasukan password

Tapi ada lagi jenis input lainnya yaitu :

            <input type=”checkbox” /> adalah inputan berupa checkbox yang dapat diceklist atau di centang oleh user. User dapat memilih atau tidak memilih checkbox ini. Type checkbox memiliki atribut checked yang jika ditulis atau diisi dengan nilai checked, akan membuat chexkbox langsung terpilih pada saat pertama kali halaman ditampilkan. Contoh inputan checkboxberupa hobi, yang oleh user dapat dipilih beberapa hobi.

            <input type=”radio” /> mirip dengan checkbox, namun user hanya bisa memilih satu diantara pilihan group radio. Type radio ini berada dalam suatu grup dan user hanya bisa memilih salah satunya. Contoh inputan type radio adalah jenis kelamin.

            <input type=”submit” /> akan menampilkan tombol untuk memproses form. Biasanya diletakkan pada baris terakhir dari form. Atribut value jika diisi akan membuat text tombol submit berubah sesuai inputan nilai value.

3.  Hidden<input type"hidden">
            Digunkan untuk mengirim data ke suatu aplikasi yang tidak dingginkan untuk dilihat oleh browser.
4. Check Box<input type="checkbox">
            Check box digunakan untuk dapat memilih lebih dari satu pilihan.
5. Radio Button<input type="radio">
            Radio button digunakan agar dapat memilih ahnya salah satu pilihan.
6. Push Button<input type="button">
            Elemen ini biasanya digunakan dengan JavaScript atau VBScript untuk menghasilkan suatu aksi.
7. Submit<input type="submit">
            Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilinya ke suatu aplikasi yang di tentukan dlam atribut ACTION dlam elemen FORM.
8. Image Submit Button<input type="image" src="url">
            Digunakan untuk menggantikan tombol standar submit dengan image.
9. Reset<input type="reset">
            Digunakan untuk mereset semua masukan dalam form.

10.    Text Area<textarea>…</textarea>

     Elemen untuk memasukan teks secara leluasa seperti notepad.

11.  Select<select>…</select>

     Daftar isi dalam property select menggunakan tag <option>

Berikut Contoh untuk penggunaan tag select adalah sebagai berikut:
<select>
    <option>Pilihan 1</option>
    <option>Pilihan 2</option>
    <option value="pilihan ketiga">Pilihan 3</option>
</select>

Nah langsung saja kita belajar script form :

<html>
<head>
<title>Belajar Membuat Form </title>
</head>
<body>
<form action=" formulir.html" method="get">

   Nama: <input type="text" name="nama" value="Nama Kamu" />
   <br />

   Password: <input type="password" name="password" />
   <br />

   Jenis Kelamin : <input type="radio" name="jenis_kelamin" value="laki-laki" checked/> Laki - Laki
                   <input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan
   <br />

   Hobi: <input type="checkbox" name="hobi_baca" /> Membaca Buku Javascript
         <input type="checkbox" name="hobi_nulis" checked /> Menulis Code HTML, CSS, PHP
         <input type="checkbox" name="hobi_mancing" /> Menggambar Design Banner Website
   <br />

   Asal Kota:
   <select name="asal_kota" >
        <option value="Kota Jakarta"> Jakarta</option>
        <option>Bandung</option>
        <option value="Kota Semarang" checked>Semarang</option>
   </select>
   <br />

   Komentar Anda:
   <textarea name="komentar" rows="5" cols="20">Silahkan berikan komentar anda</textarea>
   <br />
   <input type="submit" value="Proses" >
</form>
</body>
</html>

Dan ini dia hasil tampilan'nya ::

Dan berikut script Login Form :

<table width="405" height="169" border="0" cellpadding="0" cellspacing="0">

    <tr bgcolor="#428ef6">

      <td height="37" colspan="2"><div align="center"><strong>PLEASE LOGIN</strong></div></td>

    </tr>

    <tr>

      <td width="95" height="32">Username</td>

      <td width="304"><label>:

          <input name="username" type="text" id="username" />

      </label></td>

    </tr>

    <tr>

      <td height="26">Password</td>

      <td><label>:

          <input name="password" type="password" id="password" />

      </label></td>

    </tr>

    <tr>

      <td height="48"> </td>

      <td><input name="Login" type="submit" id="Login" value="Login" />

          <input name="Batal" type="submit" id="Batal" value="Batal" /></td>

    </tr>

    <tr bgcolor="#428ef6">

      <td height="26" colspan="2"><div align="right"><strong>roypurbo.blogspot.com</strong></div></td>

    </tr>

  </table>

Dan ini hasil'nya :

 

Read More