I.
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
olehworld wide web consortium (W3C).
Berdasarkan kata-kata penyusunnya
HTML dapat diartikan lebih dalam lagi menjadi :
a. 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.
b. 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.
c. 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.
II.
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.
III.
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 :
a.
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.
b.
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
c.
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
d.
Menyisipkan citra
Dengan
menyisipkan citra maka tampilan page kita akan lebih menarik, interaktif dan
informatif untuk mendukung data-data lainnya dalam bentuk teks.
e.
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.
IV.
VISUAL EDITOR
HTML
Secara garis
besar, terdapat 4 jenis elemen dari HTML:
a. 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.
b. 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,
c. Hiperteks
Tanda yang menunjukkan pranala ke
bagian dari dokumen tersebut atau pranala kedokumenlain (contoh, <a
href="http://www.wikipedia.org/">Wikipedia</a>akan
menampilkanwikipedia sebagai sebuah hyperlink ke URL tertentu).
d. 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.
4.1.
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">
4.2.
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.
4.3.
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>
4.4.
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.
V.
CONTOH APLIKASI HTML
Ini contoh
aplikasi Canvas HTML 5 yang begitu menggiurkan untuk dicicipi:
1. 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.
2. 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.
3. 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.
4. 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.
5. 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.
VI.
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>