Topanzone™

Rahasia Dibalik Surfing

Ledakan pertumbuhan dari penggunaan world wide web sangat mencengangkan, apalagi jika mengingat bagaimana revolusi yang terjadi dari awal, ketika komputer mulai populer.

Ketika personal komputer pada 1980an membanjiri kantor dan rumah, orang berbondong-bondong belajar menggunakannya, padahal tampilannya masih sangat biasa sekali jika dibandingkan komputer yang digunakan saat ini.

Secara tiba-tiba dengan berkembangnya teknologi yang mendukung internet ini, dengan cara sederhana, orang sudah bisa membuat suatu halaman yang menakjubkan. Hasil dokumen yang dibuatnya menjadi lebih pintar dengan tampilan yang begitu menarik dan bisa berinteraksi dari satu dokumen dengan dokumen lain, yang dikenal dengan istilah Hypertext Mark-up Language (HTML).

Seperti yang sama-sama kita lihat pada halaman-halaman yang tersedia di internet. Sebuah document dapat saja membuat kita berpindah ke tempat lain dengan kemampuan yang dimilikinya, bahkan dari dokumen yang ada tadi kita juga bisa langsung berkirim surat, mengirimkannya, tanpa harus beranjak dari kursi. Hal itu baru sebagian dari kemampuan yang dimilikinya tadi.

HTML Bukanlah Sebuah Bahasa Pemrograman

Banyak orang mengira kalau HTML termasuk dalam sebuah bahasa pemrograman. Padahal hal itu tidaklah benar. HTML bukanlah merupakan sebuah bahasa pemrograman. Jadi, untuk membuat sebuah halaman tersebut, yang perlu ditambahkan adalah kemampuan untuk mengolah gambar, tentunya halaman-halaman yang dibuat akan lebih menarik jika mempunyai gambar. Kalau tidak bisa menggambar? Ya sudah, cari dan ambil saja di internet gambar-gambar yang sesuai dengan kbutuhan waktu itu.

Membuat dokumen HTML untuk sebuah homepage sulit ngga? Hmm, begini saja jawabannya, kalau seseorang pernah membuat sebuah dokumen dengan pengolah kata, seperti Microsoft word, maka ia bisa membuat dokumennya menjadi sebuah halaman HTML.

Mari kita sama-sama belajar membuat

Sebenarnya, dasar dari file HTML adalah file teks yang terdiri dari kode-kode ASCII. Coba ketikkan teks berikut dengan program notepat yang ada pada Microsoft Windows.

TEST.HTML

Selamat Datang di Homepage saya. Seperti yang anda lihat, homepage saya belum lengkap, karena saya sedang membangunnya. Homepage ini diharapkan sebagai media tambahan agar mudah menemukan saya dari manapun. Perkenalkan, saya Bejo Margono, mahasiswa di Jogja. Jika anda ingin mengontak saya, silahkan melalui e-mail ke bejo@topanz.com, atau kontak langsung ke (08139….).

Kemudian simpan dengan nama index.html, lalu coba buka dengan browser anda. Hasilnya akan sebagai berikut

Prinsip Web dan HTML

Seperti disebutkan diatas, HTML, bukanlah bahasa pemrograman, melainkan merupakan bahasa pengkodean tampilan World Wide Web. Disamping perangkat lunak bagi web server dan client, HTML merupakan komponen penting untuk mengatur tampilan web, setiap halaman berikut pola hubungan antar halaman dalam web ditulis dalam format HTML.

HTML, berisi tanda-tanda (tag) yang mudah dipelajari seperti halnya pengolah kata. Setiap kali mengakses dokumen web, saat itu anda mengambil dokumen dalam format HTML. Hyperlink yang membimbing loncatan antar-hubungan satu halaman dengan halaman lainnya yang dibuat dengan HTML ini. Gambar warna-warni, Applet java, serta eksekusi akses database dirangkum dalam HTML.

Secara umum, tampilan web melibatkan sisi server dan sisi client. Browser pada sisi client mengirimkan suatu perintah ke sever, yaitu meminta dokumen atau layanan service tertentu. Server akan memberikan dokumen atau layanan service tertentu. Server akan memberikan dokumen jika permintaan dalam protocol HTTP. Browser akan menerima jawaban dari server, dan akan menampilkannya dalam tampilan browser. Beberapa browser yang cukup dikenal misalkan internet explorer, Mozilla firefox, netscape, mosaic, dan masih banyak beberapa program browser lain.

Format Dasar HTML

Dalam penulisan perintah HTML, tidak ada perbedaan antara huruf besar atau kecil, setiap instruksi dimulai dengan perintah yang ada di dalam kurung siku berikutnya yang diawali dengan slash.

Contoh perintah html

<B> My Homepage </B>

Dalam perintah tersebut, kata My Homepage ditulis dengan cetak tebal. Dimulai dari perintah <B> hingga akhir perintah cetak tebal tersebut, yaitu </B>.. Kok bisa? Yup, B sama dengan bold, yang kalau di Ms word biasa kita pakai juga untuk menebalkan sebuah tulisan. Dan perintah slash atau garis miring adalah sebagai tanda akhir dari perintah yang bersangkutan.

Berikut adalah contoh dokumen HTML yang sederhana:

CONTOH SATU.HTML

<HTML>

<HEAD>

<TITLE> Homepage Pribadiku </TITLE>

</HEAD>

<BODY>

<H3> Selamat datang </H3>

Selamat datang, perkenalkan nama saya adalah Bejo Margono, tinggal di Jogja. <P>

Saya sedang belajar membuat homepage ini <P>

Terima kasih anda telah mengunjunginya <P>

Bejo Margono

</BODY>

</HTML>

Gunakan notepad kemudian save dengan sama Contoh satu.html, lalu coba buka file tersebut atau panggil dengan browser anda. Maka hasilnya akan seperti ini:

Sekarang, anda telah berhasil membuatnya, dan mari kita lihat arti dari masing-masing perintah yang diisikan di dalam file Contoh satu.html yang diketik tadi:

1. Sepasang tag tersebut digunakan untuk mengorganisasikan dokumen HTML. <HTML> </HTML>
2. Tag HEAD merupakan deskripsi header dari halaman web, yang berisi didalamnya seperti pemilik, tanggal perubahan, judul, dan sebagainya. <HEAD> </HEAD>
3. Tag TITLE akan ditempatkan pada bagian atas browser, silahkan dilihat dimana kata-kata yang dijepit oleh TITLE tersebut ditampilkan pada browser seperti contoh gambar dan tag TITLE ini ditempatkan pada bagian HEAD, seperti yang telah diterangkan pada point 2 diatas. <TITLE> </TITLE>
4. Tag BODY, mencakupi dokumen untuk informasi yang ingin disampaikan dalam browser. Disini biasanya berisi teks, link, perintah pemformatan ditempatkan. <BODY> </BODY>
5. Tag H merupakan singkatan dari Headline. Headline ini sebenarnya terdiri dari 6 tingkatan. <H1> adalah menampilkan huruf dengan ukuran terbesar, sedangkan <H6> adalah yang paling kecil. Silahkan anda bisa coba mgubah-ubah sendiri nilai dari headline tersebut. <H3> </H3>

Tag paragraf atau <P> adalah salah satu dari beberapa tag yang tidak harus digunakan secara berpasangan. Tag <P> ini digunakan pada akhir paragraf. Saat browser menampilkan paragraf tersebut, pada baris sesudahnya akan dikosongkan satu baris untuk membedakan dengan paragraf lainnya.

Yang perlu diketahui dalam membuat sebuah halaman dengan dokumen HTML, penulisan yang ditulis dalam beberapa baris bukan berarti nantinya akan ditampilkan demikian dalam browser, sehingga perintah berikut ini mempunyai hasil yang sama:

<TITLE> Homepage pribadiku </TITLE>

Dengan

<TITLE> Homepage

Pribadiku

</TITLE>

Memisahkan Kalimat

Coba ketikan perintah HTML berikut ini, lalu simpan dengan nama Contoh dua.html.

CONTOH DUA.HTML

<HTML>

<HEAD>

<TITLE> Memisahkan Kalimat </TITLE>

</HEAD>

<BODY>

<H1> Lihat baik-baik perbedaannya </H1>

Selamat datang, perkenalkan nama saya adalah Bejo Margono, tinggal di Jogja.<P> Saya sedang belajar membuat homepage ini <BR> Terima kasih anda telah mengunjunginya <BR>

Bejo Margono

</BODY>

</HTML>

Hasil Pada Browser

Perintah baru yang digunakan adalah <H1> dan </H1> untuk headlinenya, yang menampilkan huruf lebih besar dibandingkan dengan <H3> dan </H3> pada contoh sebelumnya.

Yang perlu ditekankan lagi adalah pemakaian perintah <P> dan <BR>. Perhatikan bedanya. Terlihat bahwa <P> memisahkan satu kalimat, dan satu baris kosong sesudahnya, sedangkan <BR> menuju awal baris berikutnya.

Daftar Bernomor

Membuat daftar bernomor dapat dilakukan dengan tag <OL> dan <LI>, contohnya dapat dilihat pada dokumen berikut, simpan dengan nama Contoh tiga.html.

CONTOH TIGA.HTML

<HTML>

<HEAD>

<TITLE> Daftar bernomor </TITLE>

</HEAD>

<BODY>

<H1> Daerah-daerah di DIY </H1>

DIY terbagi menjadi beberapa daerah, yaitu:

<OL>

<LI> Yogyakarta </LI>

<LI> Sleman </LI>

<LI> Bantul </LI>

<LI> Kulon Progo </LI>

<LI> Gunung Kidul </LI>

</OL>

</BODY>

</HTML>

Hasilnya pada browser akan nampak seperti berikut

Daftar Tidak Bernomor

Untuk menampilkan daftar tidak bernomor, gunakan perintah <UL> dan <LI>. Silahkan dicoba dan simpan file tersebut dengan nama Contoh empat.html. Isinya adalah:

CONTOH EMPAT.HTML

<HTML>

<HEAD>

<TITLE> Daftar bernomor </TITLE>

</HEAD>

<BODY>

<H1> Daerah-daerah di DIY </H1>

DIY terbagi menjadi beberapa daerah, yaitu:

<UL>

<LI> Yogyakarta </LI>

<LI> Sleman </LI>

<LI> Bantul </LI>

<LI> Kulon Progo </LI>

<LI> Gunung Kidul </LI>

</UL>

</BODY>

</HTML>

Hasilnya pada browser sebagai berikut

Daftar Definisi

Tag untuk pembuatan daftar definisi ini adalah <DL>, <DT>, dan <DD>. Ketikkan dokumen dibawah ini, lalu simpan ke dalam file Contoh lima.html

CONTOH LIMA.HTML

<HTML>

<HEAD>

<TITLE> Daftar definisi </TITLE>

</HEAD>

<BODY>

<H3> Istilah yang digunakan </H3>

<DL>

<DT> ISP (Internet Service Provider)

<DD> Usaha atau institusi yang menyediakan jasa akses ke internet

<DT> Download

<DD> Mengambil salinan file dari komputer lain.

</DL>

</BODY>

</HTML>

hasilnya

Menampilkan Simbol Khusus

Kadangkala kita ingin menampilkan tanda kurung siku, sedangkan lambang tersebut biasanya digunakan oleh tag. Untuk simbol lainnya, anda bisa menggunakan perintah berikut ini:

Simbol Perintah

< &lt;

> &gt;

© &copy;

Misalnya, akan ditampilkan

< ini aku lho>

Maka perintah yang digunakan adalah &alt; ini aku lho &gt;

Link ke Email

Kirim link ke email, misalnya

Kirim email ke bejo dengan alamat email bejo@topanz.com

Maka perintahnya adalah:

Kirim email ke

<A HREF=mailto:bejo@topanz.com> Bejo</A>

Format Text

Berikut adalah memformat teks seperti cetak tebal, tulisan miring, garis bawah dan lain-lain:

Perintah Fungsi

<B> … </B> cetak tebal

<I> … </I> cetak miring

<U> … </U> menggaris bawahi

<S> … </S> memberikan coretan pada teks

<STRIKE> … </STRIKE> sama dengan <S> … </S>

<BLINK> … </BLINK> membuat tekt berkedip

<TT> … </TT> membuat teks dalam font type writer

<CENTER> … </CENTER> memposisikan teks ditengah

<BIG> … </BIG> membesarkan teks

<SMALL> … </SMALL> mengecilkan teks

<SUB> … </SUB> membuat teks subscript

<SUP> … </SUP> membuat teks superscript

Itulah dasar dasar atau sangatlah dasar dari bagaimana membuat dokumen html. Karena masih banyak lagi langkah selain diatas. Namun kali ini saya khususnya dulu pada penulisan teks. Sebenarnya sekarang sudah banyak mesin-mesin pengolahan otomatis. Seperti halnya dalam membuat posting pada blog. Kita tinggal ketik, dan mesin blog akan otomatis mengolahnya sebagai format HTML. Masih adakah yang lebih MUDAH?? Ada, buka saja microsoft word anda, buat tulisan anda kemudian save dalam format HTML. Caranya klik save, pilih save as web page…, lalu coba buka dengan jendela browser anda..hehehe gampang ya?

Loh terus kenapa? Kenapa masih buat postingan ini? Kan ada yang lebih mudah!!!

Sesuatu yang instan atau tampak lebih mudah tidak selalu lebih baik. Karena dengan mengetahui dasarnya kitapun mengetahui prosesnya. Yahh itung-itung menambah ilmu. Kuno memang, tapi mungkin bermanfaat bagi yang belum tahu dan ingin tahu. Awalnya saya sendiri juga tidak paham dengan HTML. Tapi mungkin rasa ingin tahu yang bisa membuat kita jadi lebih tahu..