AZI'S BLOG: April 2013

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

<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>

</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>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>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>

</table>
</form>
</html>

AZI'S BLOG

Jumat, 12 April 2013

HTML

Bahasa pemrograman