Senin, 19 Januari 2015

Sejarah dan Coding - Coding HTML

Sejarah HTML dan kelebihan serta kekurangannya dan Coding - Coding HTML

SEJARAH HTML
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).
DASAR HTML
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.
PERKEMBANGAN HTML
Sebelum suatu HTML disahkan sebagai suatu dokumen HTML standar, ia harus disetujui dulu oleh W3C untuk dievaluasi secara ketat.
Setiap terjadi perkembangan suatu versi HTML, maka mau tak mau browser pun harus memperbaiki diri agar bisa mendukung kode-kode HTML yang baru tersebut. Sebab jika tidak, browser tak akan bisa menampilkan HTML tersebut.
HTML versi 1.0
Kemampuan yang dimiliki versi 1.0 ini antara lain heading, paragraph, hypertext, list, serta cetak tebal dan miring pada teks. Versi ini juga mendukung peletakan image pada dokumennya tanpa memperbolehkan meletakkan teks disekelilingnya (wrapping).
HTMl versi 2.0
Pada versi ini, penambahan kualitas HTML terletak pada kemampuannya untuk menampilkan suatu form pada dokumen. Dengan adanya form ini, maka kita dapat memasukkan nama, alamat, serta saran/kritik. HTML versi 2.0 ini merupakan pionir dari adanya homepage interaktif.
HTML versi 3.0
HTML versi 3.0 menambahkan beberapa fasilitas baru seperti table. Versi ini yang disebut juga sebagai HTML+ tidak bertahan lama dan segera digantikan HTML versi 3.2.
HTML versi 4.0
HTML versi 4 ini merupakan HTML versi terakhir pada saat sumber ini diambil. HTML ini memuat banyak sekali perubahan dan revisi dari pendahulunya. Perubahan ini terjadi di hampir segala perintah-perintah HTML seperti table, image, link, text, meta, imagemaps, form, dan lain- lain.
Kemudian lahir HTML versi 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. HTML 4.01 menjadi standart pada tahun 1999. HTML 4.01 merupakan perbaikan dari HTML versi 4.0 yang terlebih dahulu diterbitkan (18 Desember 1997). HTML versi HTML 4.01 masih standart resmi sampai sekarang ini .
HTML 5
HTML 5 merupakan perkembangan html generasi saat ini dan merupakan generasi terakhir dan mungkin akan berkembang lagi mengikuti perkembangan jamanAda
KEKURANGAN DAN KELEBIHAN HTML
Seperti yang kita tahu bahwa, setiap bahasa dan program mempunyai kelebihan dan Kekurangan. Ada baiknya kita mengetahui kelebihan dan kekurangan dari HTML sehingga kita bisa memaksimalkan pengetahuan dan wawasan kita dalam mengeksplorasi dunia browser.
Kelebihan-kelebihan HTML antara lain:
1. Merupakan bahasa penkodean yang lintas platform (cross platform), maksudnya HTML dapat digunakan pada berbagai jenis mesin komputer yang berbeda dan berbagai macam sistem operasi yang berbeda. Jadi bersifat fleksibel karena ditulis cukup dengan menggunakan editor karakter ASCII.
2. Dapat disisipi gambar baik gambar statis atau dinamis (animasi) termasuk menggunakan gambar untuk dijadikan hyperlink. Gambar di sini digunakan untuk merujuk pada suatu halaman web, dimana setiap titik-titik yang sudah didefinisikan berupa rectangular (kotak), poligon (kurva tak beraturan) atau lingkaran digunakan untuk ‘jump’ ke halaman lain, atau link ke halaman di luar web yang bersangkutan.
3. Dapat disisipi animasi berupa Java Applet atau file-file animasi dari Macromedia Flash atau Macromedia Shockwave (untuk keperluan ini, browser harus memiliki plug-in khusus untuk menjalankan file-file animasi ini).
4.Dapat disisipi bahasa pemrograman untuk mempercantik halaman web seperti Javascript, VBScript, Active Server Pages, Perl, Tcl, PHP dan sebagainya.
Bukan merupakan bahasa pemrograman jadi tidak memerlukan kompiler. Cara menjalanakannya cukup dengan menggunakan browser.
Adapun kekurangan dari HTML ini adalah:
1. Menghasilkan halaman yang statis, yang saya tahu untuk memperoleh halaman yang dinamis harus menggunakan bahasa pemrograman tertentu seperti Javascript atau VBScript dan animasi seperti Flash atau Shockwave.
2. Memiliki tag-tag yang begitu banyak sehingga susah dipelajari untuk yang masih awam.
Tidak dapat menghasilkan halaman yang interaktif. Interaktif di sini maksudnya client dapat berinteraksi dengan server. Untuk keperluan itu, HTML harus disisipi bahasa pemrograman yang dapat menangani hal tersebut, contohnya Perl atau Tcl.

 Coding-coding html 

1. Struktur Dasar
Berikut struktur dasar kode HTML :
<html>
<head>
<! Ini adalah bagian header–>
<title>Judul Web</title>
</head>
<body>
<! Tempat menuliskan kode–>
</body>
</html>
2. <!—->
Digunakan untuk menuliskan komentar
Contoh:
<!–Ini adalah komentar dan tidak akan ditampilkan di browser–>
3. <!DOCTYPE>
Deklarasi ini bukan termasuk tag HTML, tetapi merupakan instruksi untuk web browser tentang versi bahasa markup yang digunakan.
Contoh:
<!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml/DTD/xhtml1-tr…;
4. <a>
Mendefinisikan tag anchor. Digunakan untuk membuat link ke dokumen lain menggunakan atribut href dan juga untuk membuat bookmark dokumen menggunakan atribut name.
Contoh:
<body>
<a href=http://www.google.com>Kunjungi website Google</a>
</body>
5. <abbr>
Digunakan untuk menampilkan informasi pada saat pointer mouse diletakkan pada teks yang ditandai.
Contoh:
<body>
<abbr title=HyperText Markup Language>
HTML</abbr> adalah kode dasar untuk membuat web.
</body>
6. <acronym>
Digunakan untuk mendefinisikan sebuah singkatan. Informasi akan muncul pada saat pointer mouse diletakkan pada teks yang ditandai.
Contoh:
<body>
Hari-hari bersama <acronym title=Facebook>
FB</acronym> sungguh mengasyikkan
</body>
7. <address>
Digunakan untuk mendefinisikan informasi kontak pada halaman web. Biasanya digunakan sebagai signature pada halaman web.
Contoh:
<body>
<address>
Hasnul Arifin<br>
<a href=mailto:hasnul.arifin@gmail.com>
Kirim Email</a><br>
Alamat: Yogyakarta<br>
Telp: +62 xxxxxx
</address>
</body>
8. <area>
Digunakan untuk mendefinisikan daerah (area) pada pemetaan gambar.
Contoh:
<img src =planets.gif width=145 height=126
Alt=Planets usemap =#planetmap/>
<map name=planetmap>
<area shape=rect coords=0, 0, 82, 126
href=matahari.htm alt=Matahari />
<area shape=circle coords=90, 58, 3
href=mercurius.htm alt=Mercurius />
<area shape=circle coords=124, 58, 8
href=venus.htm alt=Venus />
</map>
9. <b>
Digunakan untuk mencetak tebal suatu teks.
Contoh:
<b>Teks tercetak tebal (bold)</b>
10. <base>
Digunakan untuk mendefinisikan link default dalam sebuah halaman web. Tag ini diletakkan pada bagian head.
Contoh:
<head>
<base href=http://www.w3schools.com/images//>
<base target=_blank/>
</head>
<body>
<img src=stickman.gif/>
<a href=http://www.w3schools.com>
w3schools</a>
</body>
11. <bdo>
Digunakan untuk menentukan arah teks.
Contoh:
<bdo dir=ltr>Contoh teks LTR (Left to Right)
</bdo>
<bdo dir=rtr>Contoh teks RTR (Right to Left)
</bdo>
12. <big>
Digunakan untuk membuat teks berukuran besar.
Contoh:
<big>Big text</big>
13. <blockquote>
Digunakan untuk mendefinisikan pendapat (quote) yang panjang. Browser Anda akan menambahkan spasi kosong sebelum dan sesudah elemen ini.
Contoh:
<blockquote>
HTML adalah kode dasar untuk membuat web
HTML adalah kode dasar untuk membuat web
HTML adalah kode dasar untuk membuat web
</blockquote>
14. <body>
Digunakan untuk mendefinisikan badan HTML, yang didalamnya merupakan tempat untuk meletakkan elemen-elemen HTML lainnya, seperti gambar, teks, tabel, form, dan lain-lain.
Contoh:
<html>
<head>
<title>Judul Web</title>
</head>
<body>
<! Ini adalah bagian badan tempat Anda menuliskan kode –>
</body>
</html>
15. <br>
Digunakan untuk menyisipkan sebuah baris (ganti baris).
Contoh:
<body>
Salah satu aplikasi internet adalah web<br>
HTML adalah kode dasar untuk membuat web<br>
</body>
16. <button>
Digunakan untuk mendefinisikan sebuah tombol.
Contoh:
<button type=submit>Klik disini untuk menyimpan</button>
17. <caption>
Digunakan untuk mendefinisikan judul pada tabel.
Contoh:
<table border=1>
<caption>Daftar Situs</caption>
<tr>
<th>Berita</th>
<th>Belanja</th>
</tr>
<tr>
<td>Detik</td>
<td>Glodokshop</td>
</tr>
</table>
18. <center>
Digunakan untuk menampilkan teks di tengah halaman.
Contoh:
<center>Teks ini akan tampil di tengah halaman</center>
19. <cite>
Digunakan untuk mendefinisikan kutipan.
Contoh:
<cite>Life is Beautiful</cite> Hidup itu begitu indahnya
20. <code>
Digunakan untuk mendefinisikan teks yang berisi kode-kode komputer.
Contoh:
<code>Ini adalah teks yang dianggap kode-kode</code>
21. <col>
Digunakan untuk mendefinisikan nilai atribut kolom pada tabel.
Contoh:
<table width=100% boder=1>
<col align=left />
<col align=left />
<col align=right />
<tr>
<th>Judul Buku</th>
<th>ISBN</th>
<th>Harga</th>
</tr>
<tr>
<td>Pemrograman Web</td>
<td>999-888-877-4/5</td>
<td>45000</td>
</tr>
</tabel>
Catatan: pada browser Firefox, hanya atribut width pada tag <col> yang dapat berfungsi. Atribut lain, seperti align pada contoh diatas tidak berfungsi.
22. <colgroup>
Digunakan untuk mengelompokkan kolom pada tabel untuk keperluan format tabel.
Contoh:
<table width=100% border=1>
<colgroup span=2 align=left></colgroup>
<colgroup align=right style=color:#0000FF;>
</colgroup>
<tr>
<th>Judul Buku</th>
<th>ISBN</th>
<th>Harga</th>
</tr>
<tr>
<td>Pemrograman Web</td>
<td>999-888-877-4/5</td>
<td>45000</td>
</tr>
</tabel>
Catatan: browser Firefox, Chrome, dan Safari, hanya mendukung atribut span dan width pada tag <colgroup>. Atribut lain, seperti align pada contoh diatas tidak berfungsi.
23. <dd>
Digunakan untuk membuat daftar item pada sebuah definition list (dI).
Contoh:
<dI>
<dt>Daftar Menu Makanan</dt>
<dd>- Ayam goreng</dd>
<dd>- Ayam bakar</dd>
<dt>Daftar Menu Minuman</dt>
<dd>- Macam-macam jus</dd>
<dd>- Cappucino</dd>
</dl>
24. <del>
Digunakan untuk mendefinisikan sebuah teks yang telah dihapus (teks tercoret).
Contoh:
<b>Khusus promo.. </b><br>
Harga normal <del>Rp. 150.000</del> Harga diskon <ins>Rp. 130.000</ins>
25. <dfn>
Digunakan untuk mendefinisikan sebuah istilah.
Contoh:
<dfn>Netbook</dfn>, merupakan versi sederhana dari sebuah netbook.
26. <dir>
Digunakan untuk memuat daftar judul dari sebuah direktori.
Contoh:
<dir>
<li>html</li>
<li>xhtml</li>
<li>css</li>
</dir>
27. <div>
Digunakan untuk mendefinisikan bagian dari sebuah halaman web. Seringkali digunakan untuk mengelompokkan elemen-elemen HTML dengan format style tertentu.
Contoh:
<div stye=color:#FF0000>
<h3>Ini Merupakan Judul</h3>
<p>Ini Merupakan Paragraf</p>
</div>
28. <dl>
Digunakan untuk membuat sebuah daftar definisi (definition list) yang terdiri dari beberapa item.
Contoh:
<dI>
<dt>Daftar Menu Makanan</dt>
<dd>- Ayam goreng</dd>
<dd>- Ayam bakar</dd>
<dt>Daftar Menu Minuman</dt>
<dd>- Macam-macam jus</dd>
<dd>- Cappucino</dd>
</dl>
29. <dt>
Digunakan untuk membuat daftar item dari sebuah definition list.
Contoh:
<dI>
<dt>Daftar Menu Makanan</dt>
<dd>- Ayam goreng</dd>
<dd>- Ayam bakar</dd>
<dt>Daftar Menu Minuman</dt>
<dd>- Macam-macam jus</dd>
<dd>- Cappucino</dd>
</dl>
30. <em>
Digunakan untuk menekankan sebuah teks.
Contoh:
<em>HTML</em>adalah kode dasar untuk membuat web
31. <fieldset>
Digunakan untuk mengelompokkan beberapa elemen dalam sebuah form.
Contoh:
<form>
<fieldset>
<legend>Buku Tamu</legend>
Nama : <input type=text size=30 /><br/>
Email : <input type=text size=30 /><br/>
<fieldset>
</form>
32. <font>
Digunakan untuk mendefinisikan huruf (jenis, warna, dan ukuran).
Contoh:
<font size=3 color=red>Life is Beautiful</font>
<font face=verdana color=green>Lifr is Beautiful</font>
33. <form>
Digunakan untuk mendefinisikan sebuah form masukan dari pengguna.
Contoh:
<form action=action.php method=get>
Nama : <input type=text name=f_nama />
<br>
Email : <input type=text name=f_nama />
<br>
<input type=submit value=Simpan />
</form>
34. <frame>
Digunakan untuk mendefinisikan sebuah jendela (window) tertentu dalam sebuah frameset.
Contoh:
<frameset cols=25%, 50%, 25%>
<frame src=frame_a.htm/>
<frame src=frame_b.htm/>
<frame src=frame_c.htm/>
</frameset>
35. <frameset>
Digunakan untuk mendefinisikan sebuah frameset. Tiap frameset dapat terdiri dari 2 atau lebih frame, dan tiap-tiap frame memiliki file yang berbeda-beda.
Contoh:
<frameset cols=25%, 50%, 25%>
<frame src=frame_a.htm/>
<frame src=frame_b.htm/>
<frame src=frame_c.htm/>
</frameset>