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
<html>
<body background=”http://www.allformyspace.com/public/a4m//BackGrounds/Seasons/8740381572_High%20quality%20christmas%20myspace%20background.jpg”>
<body background=”http://www.allformyspace.com/public/a4m//BackGrounds/Seasons/8740381572_High%20quality%20christmas%20myspace%20background.jpg”>
<div
align=”center”><font size=”5″ font face=”Goudy Stout”
font color=”green”> BIODATA PRIBADI
</font></div align>
<img src=”http://a6.sphotos.ak.fbcdn.net/hphotos-ak-snc4/61382_1190276692534_1696884613_349673_8228938_n.jpg” width=”95″ height=”106″ hspace=”3″ vspace=”3″ border=0>
<table>
</font></div align>
<img src=”http://a6.sphotos.ak.fbcdn.net/hphotos-ak-snc4/61382_1190276692534_1696884613_349673_8228938_n.jpg” width=”95″ height=”106″ hspace=”3″ vspace=”3″ border=0>
<table>
<tr>
<td><font face=”Berlin Sans FB Demi” font color=”Purple”>NPM</font></td>
<td>:</td>
<td><input size=”20″ type=text” /></td><br>
<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><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>
</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>
<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>
<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>
<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>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>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>
<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>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>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>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>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>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”>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><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 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>
<td><cosplan=”2″></td>
<td><input type=”Reset” Name=”Reset”/></td>
<td><input type=”Submit” Name=”Submit”/></td>
</tr>
</table>
</form>
</html>
</form>
</html>
Tidak ada komentar:
Posting Komentar