SEJARAH
HTML
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.
Untuk
lebih memahami apa yang membuat HTML5 unik, mari kita simak sejarah
dari HTML itu sendiri. 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.
PENGERTIAN
HTML
HyperText
Markup Language (HTML) adalah sebuah bahasa yang digunakan untuk
membuat sebuah halaman web, menampilkan berbagai informasi di dalam
sebuah penjelejah web Internet dan pemformatan hiperteks sederhana
yang ditulis dalam berkas format ASCII agar dapat menghasilkan
tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang
dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format
ASCII normal sehingga menjadi halaman web 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 standarinternet yang didefinisikan dan dikendalikan
penggunaannya oleh world wide web consortium (W3C).
Berdasarkan
kata-kata penyusunnya HTML dapat diartikan lebih dalam lagi menjadi :
Hypertext
Link
hypertext adalah kata atau frase yang dapat menunjukkan hubungan
suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik
pada kata atau frase untuk mengikuti link ini maka web browser akan
memindahkan tampilan pada bagian lain dari naskah atau dokumen yang
kita tuju.
Markup
Pada
pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi
suatu intruksi tertentu yang dapat memberikan suatu format pada
dokumen yang akan ditampilkan pada World Wide Web.
Language
Meski
HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan
kumpulan dari beberapa instruksi yang dapat digunakan untuk
mengubah-ubah format suatu naskah atau dokumen.
KEGUNAAN
HTML
Aplikasi
penggunaan HTML antara lain adalah untuk:
Mengintegerasikan
gambar dengan tulisan.
Membuat
pranala.
Mengintegerasikan
berkas suara dan rekaman gambar hidup.
Membuat
form interaktif.
HTML dokumen tersebut mirip dengan
dokumen tulisan biasa, hanya dalam dokumen ini sebuah tulisan bisa
memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan
TAG tertentu. Sebagai contoh jika ingin membuat tulisan ditampilkan
menjadi tebal seperti: TAMPIL TEBAL,
maka penulisannya dilakukan dengan cara: <b>TAMPIL TEBAL</b>.
Tanda <b> digunakan untuk mengaktifkan instruksi cetak tebal,
diikuti oleh tulisan yang ingin ditebalkan, dan diakhiri dengan tanda
</b> untuk menonaktifkan cetak tebal tersebut. HTML lebih
menekankan pada penggambaran komponen-komponen struktur dan format di
dalam halaman web daripada menentukan penampilannya.
Sedangkan penjelajah web digunakan
untuk menginterpretasikan susunan halaman ke gaya built-in penjelajah
web dengan menggunakan jenis tulisan, tab, warna, garis, dan perataan
text yang dikehendaki ke komputer yang menampilkan halaman web. Salah
satu hal Penting tentang eksistensi HTML adalah tersedianya Lingua
franca (bahasa Komunikasi) antar komputer
dengan kemampuan berbeda. Pengguna macintosh tidak dapat melihat
tampilan yang sama sebagaimana tampilan yang terlihat dalam pc
berbasis Windows. Pengguna Microsoft windows pun tidak akan dapat
melihat tampilan yang sama sebagaimana tampilan yang terlihat pada
pengguna yang menggunakan produk-produk sun microsystem. namun
demikian pengguna-pengguna tersebut dapat melihat semua halaman web
yang telah diformat dan berisi grafika dan pranala.
Dengan menggunakan HTML anda dapat
membuat antara lain:
Memodifikasi
format teks
Penggunaan HTML memungkinkan kita
untuk memodifikasi tampilan atau format dokumen yang akan kita
transmisikan melalui media Internet. Beberapa hal yang dapat
dilakukan dalam menentukan format dokumen ini adalah:
Kita
dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang
dapat digunakan untuk judul, heading dan sebagainya.
Kita
dapat menampilkan teks dalam bentuk cetakan tebal
Kita
dapat menampilkan sekelompok kata dalam bentuk miring
Kita
dapat menampilkan naskah dalam bentuk huruf yang mirip dengan hasil
ketikan mesin ketik
Kita
dapat mengubah-ubah ukuran font untuk suatu karakter tertentu.
Menampilkan
daftar sesuatu dalam bentuk point-point (item)
Dengan HTML kita dapat menampilkan
daftar atau deretan informasi dalam bentuk point-point sehingga lebih
mudah dibaca dan dipahami
Membuat
link
Konsep hypertext pada HTML
memungkinkan kita untuk membuat link pada suatu kelompok kata atau
frase untuk menuju ke bagian manapun dalam World Wide Web. Ada tiga
macam link yang dapat kita gunakan:
Link
menuju bagian lain dari page
Link
menuju page lain dalam satu web site
Link
menuju resource atau web site yang berbeda
Menyisipkan
citra
Dengan menyisipkan citra maka
tampilan page kita akan lebih menarik, interaktif dan informatif
untuk mendukung data-data lainnya dalam bentuk teks.
Menampilkan
informasi dalam bentuk tabel
Penampilan informasi dalam bentuk
tabel ini akan mempermudah pembaca untuk memahami informasi yang kita
tawarkan. Penggunaan tabel ini juga dapat dilakukan untuk menambah
nilai estetika dari page yang akan kita rancang.
VISUAL
EDITOR HTML
Secara
garis besar, terdapat 4 jenis elemen dari HTML:
Struktural
Tanda
yang menentukan level atau tingkatan dari sebuah tulisan (contoh,
<h1>Golf</h1> akan memerintahkan peramban untuk
menampilkan "Golf" sebagai tulisan tebal besar yang
menunjukkan sebagai Heading 1.
Presentasional
Tanda
yang menentukan tampilan dari sebuah tulisan tidak peduli dengan
level dari tulisan tersebut (contoh, <b>boldface</b> akan
menampilkan bold.
Tanda presentasional saat ini sudah mulai digantikan oleh CSS dan
tidak direkomendasikan untuk mengatur tampilan tulisan,
Hiperteks
Tanda
yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala
kedokumenlain (contoh, <a
href="http://www.wikipedia.org/">Wikipedia</a>
akan menampilkan wikipedia sebagai sebuah hyperlink ke URL tertentu).
Elemen
widget
Yang
membuat objek-objek lain seperti tombol (<button>), list
(<li>), dan garis horizontal (<hr>). Konsep hypertext
pada HTML memungkinkan pembuatan link pada suatu kelompok kata atau
frasa untuk menuju ke bagian manapun dalam World Wide Web,
Ada
tiga macam pranala (link)
yang dapat digunakan:
Pranala
menuju bagian lain dari page.
Pranala
menuju page lain dalam satu web site.
Pranala
menuju resource atau web site yang berbeda.
Selain
markup presentasional, markup
yang lain tidak menentukan bagaimana tampilan dari sebuah tulisan.
Namun untuk saat ini, penggunaan tag HTML untuk menentukan tampilan
telah dianjurkan untuk mulai ditinggalkan, dan sebagai gantinya
digunakan cascading style sheets.
Head
Dokumen
HTML diapit oleh tag <HEAD></HEAD>. Di dalam bagian ini
biasanya dimuat tag TITLE yang menampilkan judul halaman pada
titlenya browser. Selain itu Bookmark juga menggunakan tag TITLE
untuk memberi mark suatu web site. Browser menyimpan “title”
sebagai bookmark dan juga untuk keperluan pencarian (searching)
biasanya title digunakan sebagai keyword. Header juga memuat tag META
yang biasanya digunakan untuk menentukan informasi tertentu mengenai
document HTML. Anda bisa menentukan author name, keywords, dan
lainnya pada tag META.
Contoh: <meta
name="author" content="ubuntu-online">
Elemen
Body
Bagian
BODY, yang dinyatakan dengan tag <BODY>…</BODY>,
merupakan tubuh atau isi dari dokumen HTML dimana anda meletakan
informasi yang akan ditampilkan pada browser.
Tag
HTML
tidak membedakan penggunaan huruf besar ataupun huruf kecil dari
suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks
yang ada dalam tag-tag tersebut. Tag ini dinyatakan dengan tanda
lebih kecil (<) dan tanda lebih besar (>).
Tag
biasanya merupakan suatu pasangan yang disebut dengan:
Tag
awal, dinyatakan dalam bentuk <nama tag>
Tag
akhir, dinyatakan dalam bentuk </nama tag>
Formatnya:
<nama tag> teks yang ditampilkan </nama tag>.
Contoh:
untuk menampilkan teks dalam format teks miring Teks
ini terlihat miring di browser anda dengan
perintah HTML <i>Teks ini terlihat miring di browser Anda</i>
Atribut
Tag
awal bisa memiliki beberapa buah atribut yang menyatakan
karakteristik dari tag tersebut. Misalnya, <P ALIGN=”left”>
digunakan untuk membuat rata kiri suatu paragraf. Tag yang digunakan
adalah <P> dan atribut yang menyertainya adalah ALIGN dengan
nilai left. Nilai atribut ALIGN hanya bisa berupa center, left, right
atau justify.
CONTOH
APLIKASI HTML
Ini
contoh aplikasi Canvas HTML 5 yang begitu menggiurkan untuk dicicipi:
Sketchpad,
bisa dicoba disini: http://mugtug.com/sketchpad/ Sketchpad ini
dibuat oleh seorang Developer senior Mic. Deal, yang menggunakan
elemen canvas dan banyak JavaScript untuk menciptakan aplikasi
canvas painting yang impresif.
Liquid
Particles, coba disini:
http://9elements.com/io/projects/html5/canvas/ Dibuat oleh Daniel
Puhe, yang mensimulasikan liquid motion particle dengan traditional
dots dan huruf.
3D
OBJ Viewer bisa dicoba disini:
http://www.canvasdemos.com/userdemos/toxicgonzo/3dobjviewer.html
Dibuat
oleh Toxicgonzo, uniknya aplikasi ini bisa membaca konten 3D dengan
extensi .OBJ dan menampilkan hasilnya secara real time.
Music
Visualization, bisa coba disini:
http://www2.nihilogic.dk/labs/canvas_music_visualization/
Jacob
Seidelin membikin aplikasi yang dia percayai sebagai Visualisasi
Musik Pertama yang menggunakan elemen canvas dan Sound Manager2. Pada
demo ditampilkan frequency bars dari radiohead’s Idioteque, juga
tampilan waveforms, binary outputs dan tampilan image dari Thom
Yorke, sang vokalisnya Radiohead.
jTenoriOn,
hasilnya disini: http://jabtunes.com/labs/jtenorion.html Dibuat oleh
Joshua Koo, yang membuat implementasi canvas dari Tenori-On dari
Yamaha. Tampilannya adalah interface dari 256 LED buttons yang
menyala saat anda mengakses suara yang berbeda.
CONTOH
SCRIP HTML
<tr>
<td><font
face=”Berlin Sans FB Demi” font
color=”Purple”>NPM</font></td>
<td>:</td>
<td><input
size=”20″ type=text” /></td><br>
</tr>
<td><font
face=”Berlin Sans FB Demi” font color=”Purple”>
Nama</font></td>
<td>:</td>
<td><input
size=”35″ type=text” /></td><br>
</tr>
<td><font
face=”Berlin Sans FB Demi” font color=”Purple”>Jurusan /
Semester</font></td>
<td>:</td>
<td><input
size=”25″ type=text” /> / <input size=”15″ type=text”
/></td><br>
</tr>
<td><font
face=”Berlin Sans FB Demi” font color=”Purple”>
Agama</font></td>
<td>:</td>
<td><select><option>
Agama</options>
<option>Islam</options>
<option>Kristen
Protestan</options>
<option>Kristen
Katolik</options>
<option>Hindu</options>
<option>Budha</options>
</tr>
<td><font
face=”Berlin Sans FB Demi” font
color=”Purple”>Gender</font></td>
<td>:</td>
<td><input
type=”Radio”name=”kelamin” value=”Male” />Male
<input
type=”Radio”name=”kelamin” value=”Female”
/>Female
<tr>
<td><font face=”Berlin Sans
FB Demi” font
color=”Purple”>Alamat</font></td>
<td>:</td>
<td><input
size=”50″ type=”text” /></td>
</tr>
<td><font
face=”Berlin Sans FB Demi” font
color=”Purple”>TTL</font></td>
<td>:</td>
<td><input
size=”20′ type=”text” />
<select>
<option>-Tanggal-</options>
<option>1</options>
<option>2</options>
<option>3</options>
<option>4</options>
<option>5</options>
<option>6</options>
<option>7</options>
<option>8</options>
<option>9</options>
<option>10</options>
<option>11</options>
<option>12</options>
<option>13</options>
<option>14</options>
<option>15</options>
<select>
<option>-Bulan-</options>
<option>January</options>
<option>February</options>
<option>March</options>
<option>April</options>
<option>May</options>
<option>June</options>
<option>July</options>
<option>August</options>
<option>September</options>
<option>October</options>
<option>November</options>
<option>December</options>
<select>
<option>-Tahun-</options>
<option>2011</options>
<option>2010</options>
<option>2009</options>
<option>2008</options>
<option>2007</options>
<option>2006</options>
<option>2005</options>
<option>2004</options>
<option>2003</options>
<option>2002</options>
<option>2001</options>
<option>2000</options>
<option>1999</options>
<option>1998</options>
<option>1997</options>
<option>1996</options>
<option>1995</options>
<option>1994</options>
<option>1993</options>
<option>1992</options>
<option>1991</options>
<option>1990</options>
</tr>
<td><font
face=”Berlin Sans FB Demi” font
color=”Purple”>Hobby</font></td>
<td>:</td>
<td><input
type=”Checkbox”name=”Hobby” value=”Reading”
/>Reading
<input type=”Checkbox”name=”Hobby”
value=”Singing” />Singing
<input
type=”Checkbox”name=”Hobby” value=”Cooking”
/>Cooking
<input type=”Checkbox”name=”Hobby”
value=”Sport” />Sport
<input
type=”Checkbox”name=”Hobby”<input type= “15″
value=”lainnya…”></td>
</tr>
<td><font
face=”Berlin Sans FB Demi” font color=”Purple”>No
Telp</font></td>
<td>:</td>
<td><input
size=”20″ type=text” /></td><br>
</tr>
<td><font
face=”Berlin Sans FB Demi” font
color=”Purple”>E-mail</font></td>
<td>:</td>
<td><input
size=”25″ type=text” /></td><br>
</tr>
<tr>
<td
valign=”Top”><font face=”Berlin Sans FB Demi” font
color=”Purple”> comment</font> </td>
<td
valign=”top”>:</td>
<td><textarea cols=”25″
rows=”5″> isikan komentar anda di sini</textarea></td>
</tr>
<tr>
<td><cosplan=”2″></td>
<td><input
type=”Reset” Name=”Reset”/></td>
<td><input
type=”Submit” Name=”Submit”/></td>
</tr>
</table>
</form>
</html>