Seiring
dengan pertambahan jumlah netter (pengguna internet) di seluruh dunia, termasuk
di Indonesia, makin banyak pula orang yang ingin mempunyai homepage atau
website sendiri. Hal ini wajar mengingat manfaat yang bisa kita dapatkan dengan
mempunyai website sendiri. Memiliki alamat email, sekarang ini bukan lagi
sesuatu yang istimewa. Tapi memiliki website sendiri mungkin bagi kebanyakan
orang masih merupakan sesuatu yang diidam-idamkan. Untuk itulah kami mencoba
menyusun tutorial praktis ini agar dapat dipelajari dan dipraktikkan oleh para
netter yang berkeinginan menjadi webmaster (pengelola website). Mudah-mudahan
dengan kemampuan membuat website, kita dapat ikut serta menyebarluaskan ilmu
dan informasi yang bermanfaat bagi seluruh ummat manusia, baik di dunia maupun
di akhirat kelak.
Bagaimana caranya bisa menampilkan
website sendiri di internet? Ada beberapa tahapan dan langkah yang harus kita
lalui untuk membuat sebuah website yang benar-benar eksis di internet. Artinya
website yang dari segi perwajahan tidak "menyedihkan", dari segi isi
tidak "asal-asalan" dan dari segi pengunjung cukup
"dilirik". Untuk membuat website pertama-tama kita harus belajar
bahasa HTML yaitu sebuah "bahasa program" yang memungkinkan kita
membuat halaman web yang bisa ditampilkan dalam browser (Internet Explorer,
Netscape, Opera, dll). Setelah kita menguasai dasar-dasar HTML, barulah kita
mencoba membuat rencana dan rancangan dari desain dan isi website yang hendak
kita buat. Kemudian rancangan itu kita tuangkan dalam bentuk halaman-halaman
web yang terpadu. Setelah selesai atau "mengarah ke selesai", kita
harus mendaftarkannya ke web hosting agar website kita "terpasang"
dan dapat diakses di internet. Akhirnya, yang juga tidak kalah penting adalah
bagaimana mempromosikan website tersebut agar dikenal dan dikunjungi oleh para
netter.
Nah, kini kita mulai dari langkah
awal yaitu belajar bahasa HTML.
BELAJAR HTML
Dewasa ini, hampir semua dokumen web dibuat dengan
bahasa HTML (Hypertext Mark-up Language). Meskipun anda bisa saja membuat web
page (halaman web) tanpa mengerti sedikitpun HTML, yakni dengan menggunakan
editor HTML berjenis WYSIWYG seperti Microsoft FrontPage, Adobe PageMill atau
Netscape Composer, namun sangat disarankan bahkan nyaris diharuskan, agar anda
mengerti bahasa HTML. Terutama agar anda bisa memanfaatkan secara optimal
berbagai fasilitas browser dan mengingat sejumlah kelemahan yang terdapat pada
editor WYSIWYG seperti di atas. Untuk itu langkah pertama bagi Anda yang
bercita-cita memiliki website sendiri adalah belajar HTML.
HTML (Hypertext Markup Language) adalah
bahasa program yang digunakan untuk menulis format dokumen yang dapat digunakan
dalam Web. Dengan HTML, teks ASCII (file *.txt) dapat dipoles (di-mark-up)
dengan kode-kode tertentu yang disebut tag untuk menjadi dokumen HTML (file *.htm
atau *.html). Oleh karena itu, untuk membuat dokumen HTML, anda bisa
menggunakan semua program teks editor biasa, mulai dari Notepad hingga MS Word.
Untuk mudahnya, kita gunakan program Notepad. Bukalah program Notepad. Bila
anda belum tahu caranya, klik Start > Programs > Accessories
lalu Notepad. Sekarang ikutilah dengan seksama latihan-latihan
berikut satu demi satu.
PENGENALAN KODE HTML
Dalam program Notepad anda, tulislah
seperti ini:
<HTML>
</HTML>
|
Masing-masing baris di atas disebut tag. Tag
adalah kode yang digunakan untuk me-mark-up (memoles) teks ASCII menjadi file
HTML. Setiap tag diapit dengan tanda kurung runcing. Ada tag pembuka
yaitu <HTML> dan ada tag penutup yaitu </HTML> yang ditandai dengan
tanda slash (garis miring) di depan awal tulisannya. Tag di atas
memberikan faidah bahwa yang akan ditulis diantara kedua tag tersebut adalah
isi dari dokumen HTML. Perlu anda ketahui bahwa tag-tag html dapat ditulis
dengan huruf besar ataupun huruf kecil. Artinya, penulisan <HTML> atau
<html> atau <Html> sama saja hasilnya. Namun perlu selalu diingat
bahwa penulisan tag yang salah meskipun hanya satu karakter akan berpengaruh
terhadap dokumen HTML anda, bahkan bisa berakibat dokumen HTML anda tidak bisa
ditampilkan dalam browser.
Sekarang kita akan beralih pada tag
selanjutnya. Tambahkanlah tag seperti berikut:
<HTML>
<BODY>
</BODY>
</HTML>
|
Isi dari dokumen HTML yang
sesungguhnya adalah yang ditulis diantara tag <BODY>. Coba tuliskan:
<HTML>
<BODY>
Tulisan ini akan tampak dalam browser.
</BODY>
</HTML>
|
Sekarang simpanlah file ini dengan meng-klik menu File
lalu Save As. Pada kotak dialog yang muncul, terlebih dahulu klik anak
panah kecil di ujung kanan kotak Save as type kemudian pilih All
Files (*.*). Setelah itu, isilah kotak File name dengan nama file
yang anda inginkan misalnya: latih1.htm. Jangan lupa penambahan ekstensi
.htm di belakang nama file! Akhirnya, klik tombol Save maka file
akan tersimpan sebagai dokumen web. Kini, tutuplah program Notepad anda.
Sekarang bukalah lagi program browser (Internet Explorer) selain jendela
browser yang anda baca ini. Klik menu File lalu Open. Pada kotak
dialog yang muncul, klik tombol Browse. Cari dan pilih file latih1.htm
lalu klik Open. Nah, lihatlah hasil karya anda yang pertama!
Tulisan ini akan
tampak dalam browser
|
Apakah tag BODY fungsinya sekedar penanda tubuh atau
isi dari dokumen web? Tidak, dalam tag BODY ini bisa kita sisipkan
bermacam-macam atribut yang akan berpengaruh terhadap format atau tampilan
halaman web secara keseluruhan. Pada kesempatan ini kita mengambil contoh
bagaimana mengubah warna latar belakang dan warna tulisan dari halaman web
dengan penambahan atribut ke dalam tag BODY.
Sekarang lihatlah kembali browser anda yang sedang
menampilkan file latih1 tadi. Klik menu View lalu Source.
Dengan instruksi ini akan muncullah program Notepad yang di dalamnya tampak
source code atau kode-kode HTML yang tadi anda buat. Misalnya kita akan
menjadikan halaman web latih1 ini menjadi berwarna latar belakang kuning
dengan tulisan berwarna merah. Untuk itu, kita perlu menambahkan atribut
BGCOLOR dan TEXT ke dalam tag body sebagai berikut:
<HTML>
<BODY
BGCOLOR="yellow" TEXT="red">
Tulisan ini akan
tampak dalam browser.
</BODY>
</HTML>
|
Simpanlah kembali file ini (klik File lalu Save).
Untuk melihat bagaimana hasilnya, pergilah lagi ke program browser yang
menampilkan halaman web latih1 tadi. Klik menu View lalu Refresh
atau klik tombol Refresh pada toolbar atau bisa juga dengan menekan
tombol F5 pada keyboard. Dengan demikian, browser akan memanggil ulang
file latih1 yang kini sudah mengalami perubahan. Maka akan tampaklah
hasilnya:
Tulisan ini akan tampak
dalam browser
|
Perlu diketahui bahwa penentuan warna pada HTML bisa
dengan nama warna (dalam bahasa Inggris) dan bisa pula dengan kode warna. Kode
warna ditulis dalam format heksa #rrggbb. Berikut ini adalah 16 nama warna
beserta kodenya dalam format heksa (harap diingat bahwa tulisan 0 adalah angka
nol, bukan huruf O).
black
|
#000000
|
blue
|
#0000FF
|
olive
|
#808000
|
white
|
#FFFFFF
|
fuchsia
|
#FF00FF
|
green
|
#008000
|
red
|
#FF0000
|
gray
|
#808080
|
teal
|
#008080
|
yellow
|
#FFFF00
|
silver
|
#C0C0C0
|
navy
|
#000080
|
lime
|
#00FF00
|
maroon
|
#800000
|
purple
|
#800080
|
aqua
|
#00FFFF
|
Dengan demikian, kode HTML untuk contoh di atas bisa
ditulis sebagai berikut:
<HTML>
<BODY BGCOLOR="#FFFF00" TEXT="#FF0000">
Tulisan ini akan tampak dalam browser.
</BODY>
</HTML>
|
Dengan menggunakan kode warna heksa,
variasi warna yang dibuat bisa lebih banyak. Klik di sini untuk
melihat daftar kode warna yang lainnya!
Demikianlah sekilas fungsi tag BODY.
Sekarang bukalah kembali source code alias kode-kode HTML. Masih ingat, kan
caranya? (Klik menu View lalu Source). Tambahkanlah tag-tag
berikut ini:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="yellow" TEXT="red">
Tulisan ini akan tampak dalam browser.
</BODY>
</HTML>
|
Di sini terlihat bahwa kita menambah tag <HEAD>
dan tag <TITLE>. Tag HEAD berfungsi untuk mengapit berbagai macam fungsi
dan informasi yang berkenan dengan halaman web yang bersangkutan. Pada latihan
kali ini, kita memasukkan tag TITLE diantara tag HEAD. Sesuai namanya, tag
TITLE ini berfungsi untuk mengapit kalimat yang menjadi judul dari halaman web
tersebut. Sekarang mari kita tuliskan judul halaman web ini:
<HTML>
<HEAD>
<TITLE>Karya
Pertamaku</TITLE>
</HEAD>
<BODY
BGCOLOR="yellow" TEXT="red">
Tulisan ini akan
tampak dalam browser.
</BODY>
</HTML>
|
Simpan lagi file ini dengan meng-klik File lalu
Save. Sekarang kita akan melihat bagaimana perubahannya dalam browser.
Lakukan lagi Refresh seperti di atas. Maka anda akan melihat di baris
teratas (yang dinamakan Title Bar) dari program browser akan menampilkan
judul atau titel dari halaman web anda yaitu: Karya Pertamaku. Alhamdulillah,
selesailah latihan pertama kita.
MENGUTAK-ATIK HURUF
Dalam latihan kedua ini, kita akan mempelajari
beberapa tag yang relatif mudah diingat. Tag-tag ini berfungsi untuk mengubah
tipe huruf yaitu menebalkan (bold), membuat tulisan miring (italic)
atau memberi garis bawah (underline). Buka lagi program Notepad kemudian
tuliskan seperti berikut ini:
<HTML>
<HEAD>
<TITLE>Tipe-tipe Teks</TILE>
</HEAD>
<BODY>
Ada tiga macam tipe tulisan yang paling sering digunakan dalam penulisan dokumen
apa saja. Ketiga tipe tersebut ialah tulisan tebal, tulisan miring dan
tulisan bergaris bawah. Bisa pula dua tipe huruf dipadukan misalnya tulisan
tebal dan miring, tulisan tebal dan bergaris bawah atau tulisan miring dan
bergaris bawah. Bahkan bisa pula ketiga tipe tulisan tersebut sekaligus
bergabung menjadi satu berupa tulisan tebal, miring dan bergaris bawah.
</BODY>
</HTML>
|
Simpanlah file tersebut. Jangan lupa mengikuti
langkah-langkah cara menyimpan file HTML yang sudah kita pelajari dalam latihan
pertama dahulu. Setelah file tersimpan, bukalah file tersebut dengan program
Internet Explorer. Perhatikanlah bahwa semua tulisan dalam dokumen tersebut
masih seragam. Kini, kita akan melakukan sedikit perubahan pada beberapa kata
dan kalimat yang ada di situ sehingga menjadi seperti ini:
Ada tiga macam tipe
tulisan yang paling sering digunakan dalam penulisan dokumen apa saja. Ketiga
tipe tersebut ialah tulisan tebal, tulisan miringdan tulisan bergaris
bawah. Bisa pula dua tipe huruf dipadukan misalnya tulisan tebal
dan miring, tulisan tebal dan bergaris bawah atau
tulisan miring dan bergaris bawah. Bahkan bisa pula ketiga tipe
tulisan tersebut sekaligus bergabung menjadi satu berupa tulisan tebal,
miring dan bergaris bawah.
|
Bagaimana caranya? Bukalah source code dari
dokumen tadi (tekan F5), kemudian tambahkan tag-tag berikut. Tag-tag tersebut
adalah <B> untuk menebalkan (bold) tulisan, <I> untuk memiringkan
(italic) tulisan dan <U> untuk menggaris-bawahi (underline) tulisan:
<HTML>
<HEAD>
<TITLE>Tipe-tipe Teks</TITLE>
</HEAD>
<BODY>
Ada tiga macam tipe tulisan yang paling sering digunakan dalam penulisan
dokumen apa saja. Ketiga tipe tersebut ialah tulisan
<B>tebal</B>, tulisan <I>miring</I> dan tulisan
<U>bergaris bawah</U>. Bisa pula dua tipe huruf dipadukan
misalnya tulisan <B><I>tebal dan miring</B></I>,
tulisan <B><U>tebal dan bergaris bawah</B></U> atau
tulisan <I><U>miring dan bergaris bawah</I></U>.
Bahkan bisa pula ketiga tipe tulisan tersebut sekaligus bergabung menjadi
satu berupa tulisan <B><I><U>tebal, miring dan bergaris
bawah</B></I></U>.
</BODY>
</HTML>
|
Setelah anda menambahkan semua
tag-tag tersebut, simpan (Save) file source code itu kemudian lakukan Refresh
pada dokumen web yang tampak pada program browser anda. Lihatlah hasil
perubahannya! Andaikata ada yang tidak beres, coba perhatikan baik-baik
penulisan tag-tag anda, mulai dari tag pembuka <HTML> hingga
</HTML> jangan sampai ada yang salah tulis meskipun satu karakter.
Misalnya: bila tag </TITLE> anda tulis </TILE> maka browser tidak
akan menampilkan tulisan apa-apa dalam dokumen anda. Kalau tidak percaya,
cobalah menulis source code yang salah seperti itu, simpan (save) kemudian
refresh dokumen anda dan lihatlah hasilnya!
Untuk lebih mempermantap keterampilan
yang anda dapatkan dari latihan kedua ini, ada baiknya anda mencoba membuat
dokumen HTML berikut ini. Buatlah dokumen dengan judul (titel): Pemantapan
Tipe-tipe Teks, yang isinya adalah tulisan seperti berikut:
Karena file-file HTML
sebenarnya adalah file-file ASCII biasa, maka anda dapat menggunakan editor-editor
teks sederhana seperti WordStar (WS), Notepad, MS Write,
dan lain-lain. Editor-editor teks tersebut dapat membimbing anda mempelajari
kode-kode HTML secara luar dalam. Akan tetapi mungkin anda sedikit frustrasi
karena harus mengetik semua kode HTML baris per baris yang dalam
perkembangannya akan menjadi sangat rumit. Meski demikian, menggunakan
teks editor untuk membuat halaman web adalah cara terbaik untuk
benar-benar mengerti tentang struktur file HTML.
HEADER
ATAU KEPALA TULISAN
Header adalah huruf-huruf berukuran khusus yang digunakan untuk
menuliskan judul bab atau sub bab. Ada enam tingkatan header mulai dari H1
hingga H6. H1 adalah header yang paling besar dan H6 adalah header yang
paling kecil. Coba tulis dalam Notepad anda sebagai berikut:
Simpanlah dalam format file HTML kemudian buka dalam browser.
Hasilnya akan tampak sebagai berikut:
BARIS DAN PARAGRAF
Sekarang kita akan mempelajari bagaimana cara membuat baris dan
paragraf. Biasanya, untuk membuat baris baru, kita lakukan dengan menekan
tombol Enter. Bagaimana dengan dokumen HTML? Cobalah membuat tulisan berikut
pada Notepad:
Simpanlah sebagai file HTML kemudian bukalah dalam browser. Bagaimana
hasilnya? Ternyata hasilnya hanya seperti ini:
Kesimpulannya, penekanan tombol Enter tidak menghasilkan baris
dalam tampilan browser. Demikianlah sifat penulisan dokumen HTML. Lantas,
bagaimana caranya membuat baris? Gunakanlah tag <BR>. Tag ini tidak
mempunyai tag penutup. Bukalah source kode file HTML tadi lalu edit seperti
berikut:
Simpan kemudian lihat hasilnya dengan me-refresh pada browser.
Hasilnya kurang lebih akan seperti ini:
Membuat baris kalimat, gampang kan ? Tag <BR> tersebut dapat
pula digunakan untuk membuat baris kosong, artinya baris yang tidak mempunyai
kalimat apa-apa. Editlah sekali lagi source code latih4.htm
menjadi seperti ini:
Simpan lalu refresh sekali lagi maka hasilnya akan seperti
ini:
Di sini kita lihat bahwa tag <BR> yang ditulis dua kali akan
menghasilkan dua baris, demikian seterusnya. Setelah pandai membuat baris,
sekarang kita akan belajar membuat paragraf. Perhatikanlah contoh tulisan di
bawah ini:
Bila dilihat dalam browser, hasilnya akan seperti ini:
Dengan berpatokan pada contoh penggunaan tag <P> di atas,
cobalah buat file HTML dengan menggunakan Notepad sehingga menghasilkan
dokumen HTML yang akan tampak di browser seperti ini:
Bila anda masih mengingat pelajaran-pelajaran terdahulu, maka tanpa
kesulitan yang berarti anda akan bisa membuat source code untuk
menghasilkan tulisan-tulisan di atas. Kode sumbernya kira-kira sebagai
berikut:
Simpanlah file di atas kemudian buka dalam browser.
NOTASI KHUSUS
Kita telah mengetahui bahwa browser tidak mengenal pembuatan baris
dengan tombol Enter. Disamping itu, browser juga tidak mengenal pembuatan
spasi lebih dari satu spasi dengan menekan tombol Spasi ataupun tombol
Tab. Nah, bagaimana caranya membuat lebih dari satu spasi dalam
dokumen HTML? Pembuatan spasi dalam kode-kode HTML diganti tulisan
seperti yang bisa kita lihat pada contoh berikut ini:
Bila dilihat dalam browser hasilnya akan seperti ini:
Disamping notasi untuk pembuatan spasi ( ) ada lagi
sejumlah notasi khusus untuk penulisan karakter-karakter tertentu.
Karakter-karakter ini harus dituliskan dengan notasi khusus mengingat
karakter-karakter ini dipakai juga sebagai kode-kode tag atau karena memang
tidak dijumpai dalam karakter teks ASCII. Berikut beberapa diantaranya:
Misalnya kita akan membuat tulisan seperti ini:
Beginilah cara penulisannya dengan bahasa HTML:
MENAMPILKAN APA ADANYA
Meskipun browser tidak mengenali spasi lebih dari sekali , tabulasi
dan pembuatan baris dengan enter, namun dengan menggunakan tag <PRE>
maka browser akan menampilkan teks apa adanya, maksudnya spasi dianggap
spasi, tabulasi dianggap tabulasi dan enter dianggap enter. Bahkan font-nya
pun muncul sesuai aslinya. Begini contohnya:
Simpanlah file di atas sebagai file HTML kemudian tampilkan dalam
browser, hasilnya akan seperti ini:
Tag <PRE> ini sangat diperlukan bila kita ingin menampilkan
dalam halaman web sekumpulan karakter ASCII dalam susunan tertentu seperti
contoh berikut ini:
Awan dan Matahari
.
|
. /
\ I
/
\ ,g88R_
d888(` ). _
- --== 888( ).=-- .+(` )`.
) Y8P( '`. :( . )
.+(`( . ) .-- `. ( ) )
(( (..__.:'-' .=( ) ` _` ) )
`. `( ) ) ( . ) ( ) ._
) ` __.:' ) ( ( )) `-'.:(` )
) ) ( ) --' `- __.' :( ))
.-' (_.' .') `( ) ))
(_ ) ` __.:'
--..,___.--,--'`,---..-.--+--.,,-,,..._.--..-._.-a:f--.
Gedung-gedung
__ __ __
___ .-~~'. ___~~-_.-~~'. ___~ ~~-.-~~'. ___ -~ ~~-.-~~' ___
| ''|`-...--' ~' | ''| `-...--' | ''| `-...-- | ''| `-... | ''|
|' '| -' ': _|' '| ..--' |' '| _....--' |' '| ___....--' |' '|
| ''|_ _ | | ''| _ _ || ''| _ _ | ''| _ _ | ''|
| ''| |_| |____| | ''|| |_| |____|| ''|_| |_| |____| ''||_| |_| |___| ''|
|'' | | | | | |'' || | | | ||'' | | | | | |'' || | | | | |'' |
| ''|____ | | | ''|____ | || ''|____ | | | ''|____ | | | ''|
| ' |'' '|_______| ' |'' '|_______| ' |'' '|_______| ' |'' '|_______| ' |
|' '|' ' |'''' '|' '|' ' |'''' '|' '|' ' |'''' '|' '|' ' |'''' '|' '|
| ' | '''| '' ''| ' | '''| '' ''| ' | '''| '' ''| ' | '''| '' ''| ' |
____ ______________ ______________ ______________ ______________ ___
=||=)(=||===||===||=)(=||===||===||=)(=||===||===||=)(=||===||===||=)(=||
#########################################################################
| \\#// |'' ''' \\#// |'' ''' \\#// |'' '' \\#// |'' ' \\#//
|' |#| ''| '''' | |#| ''| '''' |#| ''| '''' |#| | ''| '''' |#| '|
|''|#| ' |''' '|'|#| '' |''' ' |#| ''' |''' |#|'|''' |''' |#| '|
|' |#| '| ' '' |'|#| ' '| ' '' |#| ' '| ' '' |#|'| ' '| ' ' |#| '|
|#| |#| |#| |#| |#|
Geert-Jan Thomas
Apartemen
_._._._ ^ _._._._ _._._._ ^
| ___ |_._._._| ___ |_._._._| ___ |
| |_| | ___ | |_| | ___ | |_| |
|_III_| |_| |_III_| |_| |_III_| ^!^
^ | ___ |__III__| ___ |__III__| ___ |
^ | |_| | ___ | |_| | ___ | |_| | ^!^
|_III_| |_| |_III_| |_| |_III_|
| ___ |__III__| ___ |__III__| ___ | _)o(_
| |_| | ___ | |_| | ___ | |_| | /(|)\
/) |_III_| |_| |_III_| |_| |_III_| H
_/ ) | ___ |__III__|_____|__III__| ___ | H
~^~^~ | |_| |"""""""||~|~||"""""""| |_| | H
^~'|_III_|@@@@@@@||_|_||@@@@@@@|_III_|^~^H '
@@@@@@@@@@@@@@ @/=====\@ @@@@@@@@@@@@@@
Rumah Klasik
( )
( )
( )
( )
) )
( ( /\
(_) / \ /\
________[_]________ /\/ \/ \
/\ /\ ______ \ / /\/\ /\/\
/ \ //_\ \ /\ \ /\/\/ \/ \
/\ / /\/\ //___\ \__/ \ \/
/ \ /\/ \//_____\ \ |[]| \
/\/\/\/ //_______\ \|__| \
/ \ /XXXXXXXXXX\ \
\ /_I_II I__I_\__________________\
I_I| I__I_____[]_|_[]_____I
I_II I__I_____[]_|_[]_____I
I II__I I XXXXXXX I
~~~~~" "~~~~~~~~~~~~~~~~~~~~~~~~
Kamar Tidur
_ () () _
/ \ ||______________|| / \
/___\ | | /___\
| | ~@@~ | |
(_) |_______ _______| (_)
___/_\___ {_______}{_______} ___/_\___
|__~__| %%%%%%%%%%%%%%%%%% |__~__|
___|_____|__%%%%%%%%%%%%%%%%%%%%__|_____|___
| | %%%%%%%%%%%%%%%%%%%%%% | |
`=====%%%%%%%%%%%%%%%%%%%%%%%%=====`
`=====%%%%%%%%%%%%%%%%%%%%%%%%%%=====`
`=====%%%%%%%%%%%%%%%%%%%%%%%%%%%%=====`
`=====/||||||||||||||||||||||||||||\=====`
`======||||||||||||||||||||||||||||||======`
`=======||||||||||||||||||||||||||||||=======`
`==============================================`
`================================================`
Toilet
|
__________ |
_ __ _ | | |
/_\ / \ /_\ | | |
=|= | // | =|= | | |
! \__/ ! | | |
_ | | |
___ ___ //' | | |
[___] _ :=| |=: __T_||_T__ |p= | |
| ~| =)_)= | | [__________] | | |
| | (_( |xXx| \_ _/ | | |
| | )_) """"" \ / | | |
\___| | | | | |
| `========, | | | | |
__`. .'_________________| |________|_____________|
`. .' (____) \
_| |_... .;;;;;;;;. \
(________);;;; :;;;;;;;;;;:
:::::::' '::::::::'
Secangkir Kopi
.
`:.
`:.
.:' ,::
.:' ;:'
:: ;:'
: .:'
`. :.
_________________________
: _ _ _ _ _ _ _ _ _ _ _ _ :
,---:".".".".".".".".".".".".":
: ,'"`::.:.:.:.:.:.:.:.:.:.:.::'
`.`. `:-===-===-===-===-===-:'
`.`-._: :
`-.__`. ,'
,--------`"`-------------'--------.
`"--.__ __.--"'
`""-------------""'
Botol Sirup
__
)==(
)==(
|H |
|H |
|H |
/====\
/ Dr S \
/========\
:HHHHHHHH H:
|HHHHHHHH H|
|HHHHHHHH H|
|HHHHHHHH H|
\______|=/========\________/
\ :/oO/ |\ /
\ / oOOO Le | \ /
\__/| OOO Grape| \__/
)( | O | )(
)( |==========| )(
)( |HHHHHHHH H| )(
)( |HHHHHHHH H| )(
.)(.|HHHHHHHH H| .)(.
~~~~~~~~~~~~~~~~ ~~~~~~
Botol Air Mineral
_________
|_-_-_-_-_|
|_________|
)_______(
(_________)
|uuuuuuuuu|
/ \
/ \
/ \
/ \
/ \
/ \
(_____________________)
)___________________(
(_____________________)
| |
|_____________________|
)___________________(
|_____________________|
)___________________(
| |
|_____________________|
)___________________(
|_____________________|
)___________________(
| |
| |
|_____________________|
(_____________________)
|_____________________|
(_____________________)
| |
| |
\_____________________/
'-------------------'
Jembatan Gantung
^^
^^ .. ..
[] []
.:[]:_ ^^ ,:[]:.
.: :[]: :-. ,-: :[]: :.
.: : :[]: : :`._ ,.': : :[]: : :.
.: : : :[]: : : : :-._ _,-: : : : :[]: : : :.
_..: : : : :[]: : : : : : :-._________.-: : : : : : :[]: : : : :-._
_:_:_:_:_:_:[]:_:_:_:_:_:_:_:_:_:_:_:_:_:_:_:_:_:_:_:[]:_:_:_:_:_:_
!!!!!!!!!!!![]!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!![]!!!!!!!!!!!!!
^^^^^^^^^^^^[]^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^[]^^^^^^^^^^^^^
[] []
[] []
[] []
~~^-~^_~^~/ \~^-~^~_~^-~_^~-^~_^~~-^~_~^~-~_~-^~_^/ \~^-~_~^-~~-
~ _~~- ~^-^~-^~~- ^~_^-^~~_ -~^_ -~_-~~^- _~~_~-^_ ~^-^~~-_^-~ ~^
~ ^- _~~_- ~~ _ ~ ^~ - ~~^ _ - ^~- ~ _ ~~^ - ~_ - ~^_~
Jembatan Lengkung
___....___
^^ __..-:'':__:..:__:'':-..__
_.-:__:.-:'': : : :'':-.:__:-._
.':.-: : : : : : : : : :._:'.
_ :.': : : : : : : : : : : :'.: _
[ ]: : : : : : : : : : : : : :[ ]
[ ]: : : : : : : : : : : : : :[ ]
:::::::::[ ]:__:__:__:__:__:__:__:__:__:__:__:__:__:[ ]:::::::::::
!!!!!!!!![ ]!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!![ ]!!!!!!!!!!!
^^^^^^^^^[ ]^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^[ ]^^^^^^^^^^^
[ ] [ ]
[ ] [ ]
[ ] [ ]
~~^_~^~/ \~^-~^~ _~^-~_^~-^~_^~~-^~_~^~-~_~-^~_^/ \~^ ~~_ ^
Ubin Segi Enam
\__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \_
/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/
\__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \_
/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/
\__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \_
/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/
\__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \_
/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/
\__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \_
/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/
\__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \_
/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/
\__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \_
/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/
\__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \_
Ubin Segi 12
\__ \__ \__ \__ \__ \__ \__ \__ \__ \__ \_
_/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/
\ \ \ \ \ \ \ \ \ \ \
_/ __/ __/ __/ __/ __/ __/ __/ __/ __/ __/
\__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \_
/ / / / / / / / / / /
\__ \__ \__ \__ \__ \__ \__ \__ \__ \__ \_
_/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/
\ \ \ \ \ \ \ \ \ \ \
_/ __/ __/ __/ __/ __/ __/ __/ __/ __/ __/
\__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \_
/ / / / / / / / / / /
\__ \__ \__ \__ \__ \__ \__ \__ \__ \__ \_
_/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/
\ \ \ \ \ \ \ \ \ \ \
_/ __/ __/ __/ __/ __/ __/ __/ __/ __/ __/
\__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \_
Sepeda Balap
/'=----= ______
(( || "--.__."
" @>||_____________//
_______ /^\"""""""""""//\========)
_--"""--/-. "\ // _\-:::-/_-.
." .-"""-/ "_\ "\ == // ;::\:::/::".\
; / _/ " \\ "\-+//--..._\_/:::::\\
. ; o . || ( ()/)======(o)::::::.
. \ ; .| -|.;____...."b:::::;
. -._ _ - ; == :::::::::::;
"-..____.' ls ":::::::'
Mobil Sedan
_____________
..---:::::::-----------. ::::;;.
.'"""""" ;; \ ":.
.'' ; \ "\__.
.' ;; ; \\";
.' ; _____; \\/
.' :; ;" \ ___:'.
.'--........................... : = ____:" \ \
..-"" """' o""" ; ; :
.--"" .----- ..----... _.- --. ..-" ; ; ; ;
.""_- "--""-----'"" _-" .-"" ; ; .-.
.' .' ." ." ; ; /. |
/-./' ." / _.. ; ; ;;;|
: ;-.______ / _________==. /_ \ ; ; ;;;;
; / | """"""""""".---.""""""" : /" ". |; ; _; ;;;
/"-/ | / / / / ;|; ;-" | ;';
:- : """----______ / / ____. . ."'. ;; .-"..T" .
'. " ___ "": '"""""""""""""" . ; ; ;; ;." ." '--"
", __ """ ""---... :- - - - - - - - - ' ' ; ; ; ;;" ."
/. ; """---___ ; ; ; ;|.""
: ": """----. .-------. ; ; ; ;:
\ '--__ \ \ \ / | ; ;;
'-.. """"---___ : .______..\ __/..-""| ; ; ;
""--.. """--" . ". . ;
""------... ..--"" " :
"""""""""""""""""" \ /
"------"
Mobil Balap
_..-------++._
_.-'/ | _|| \"--._
__.--'`._/_\j_____/_||___\ `----.
_.--'_____ | \ _____ /
_j /,---.\ | =o | /,---.\ |_
[__]==// .-. \\==`===========/==// .-. \\=[__]
`-._|\ `-' /|___\_________/___|\ `-' /|_.' hjw
`---' `---'
Mobil Pick-up
.------.
:|||"""`.`.
:||| 7.`.
.===+===+===+===+===||`----L7'-`7`---.._
[] || == | """-.
[]...._____.........||........../ _____ ____|
c\____/,---.\_ ||_________/ /,---.\_ _/
hjw /_,-/ ,-. \ `._____|__________||/ ,-. \ \_[
/\ `-' / /\ `-' /
`---' `---'
Mobil Toyota
___________________
|,-----.,-----.,---.\
|| || || \\
|`-----'|-----||-----\`----.
[ | -||- _| (|
[ ,--. |_____||___/.--. |
=-(( `))-----------(( `))-==
`--' `--'
Mobil Ambulans
EeeiiiiiEEiiiii.....
\|/
n______ .....iiiiiEEiiiieeEE
:~; : \|/
-----;``~' + ;------------ ______n --------------------------------
`-@-----@-= : :~:
=========================== ; + '~``; =============================
=-@-----@-'
jgs------------------------------------------------------------------
_____,_ __________ __,_
------ | + |\__ ----- | ||||||| | | |_|
----- | _ ' _ | ---- | _ . _. |_|tre|
--- `(o)---(o)' --- `-(o)-(o)----(o)'
_____________________________________________________________________
Kereta Api
__,-_-_--_-.___ ___,-----._ /,--' || `,---.'-._ -'' .
// \ || / | | _-. `
/'--.--,-'.`---...__| || | `-.
,' ((_ )) H | `-.
|o `--' o H`|-._ |`-.
,--._ ,---.. ,,-----. | `-.| `-.
,' _ |_`_|| ,--. ||_81__|. | -. |`-._
,-' | ((_ )) | : | -. -.| -_ `-
,' |--...__,`--'.__..._-_-. : |-...__| _-
|=_= -_-\::::/-_--_-=_=' : | |`''---
,' | \-_/||||\-_/ _| |
|_______`----'_________ ______.... ......
|=======[____]=========| __ | -- __
_, | || || | | -- --' __/'--'
_,- | || || | | | ___,--'
`--. ''--''--'-' ,----' -
_ '_----_-------','- _
Kapal Perang
|__
|\/
---
/ | [
! | |||
_/| _/|-++'
+ +--| |--|--|_ |-
{ /|__| |/\__| |--- |||__/
+---------------___[}-_===_.'____ /\
____`-' ||___-{]_| _[}- | |_[___\==-- \/ _
__..._____--==/___]_|__|_____________________________[___\==--____,------' .7
| BB-61/
\_________________________________________________________________________|
Matthew Bace
Pesawat Terbang
|
--====|====--
|
.-"""""-.
.'_________'.
/_/_|__|__|_\_\
;'-._ _.-';
,--------------------| `-. .-' |--------------------,
``""--..__ ___ ; ' ; ___ __..--""``
jgs `"-// \\.._\ /_..// \\-"`
\\_// '._ _.' \\_//
`"` ``---`` `"`
Keyboard
________________________________________________
| _____________________________ |
| [][] _____________________________ [_][_][_] |
| [][] [_][_][_] [_][_][_][_] [_][_] [_][_][_] |
| |
| [][] [][][][][][][][][][][][][][_] [][][][] |
| [][] [_][][][][][][][][][][][][][] [][][][] |
| [][] [__][][][][][][][][][][][][_] [][][][] |
| [][] [___][][][][][][][][][][][__] [__][][] |
| [_][______________][_] |
|______________________________________________|
Bunga Mekar
___ .
_~"| ~~ ~.\.~
/ : / / \_
?"" ; ` ,' ) /-, / . . . |
/ ~-_ / dp . . |
.%"": .? |: . . . |
% '. . \|:. . .. . . /
/ '. '.: : :| : .. . . _/
/ ~~~::. .:: ::. . .::.:. ..'~
\::... `'.. : : : " . :. . ~~| _____
(:::. .. '.: .:.::. : . : "/__-"" --
)"".> --~~~__. ::::*## :.:.:) : .:` ~\
|..::' >> ####### '.: .' . .` ?
\_.___ :''> ######### ::.". ~ ..~'" |,
_">~____~~::. #* )#### : ..~ . )
/:.:'';.:::_- _-#####*:;: ::>,, }
o__o___q~_-" _-"###### .:.'' ..~~ ~ |
( o() &@&__--" *::####::" ";.. ~~...::.)
(o& O& O?S).` .:':::*: : ~~~... "/
oS %@&>/ .:' ::::: :. .~ "'. {
\~*~~"" __:/ "::::..L ~ ''/
|::' /##) :':::::\ . %
\:; . |#/ : :::::::-___ -"
\::::: | : :::::::::::\----"
\::::::|:. : :::::::::::|
\::::::|' . : ::::::::::::|
-::::/ \ :.'::::::::::::/
~__/ \. ;:.::::::::::_/
\::.::::::::::::/
--_;::::::_-~/
""""""
Sepatu Laras
.-'\
.-' `/\
.-' `/\
\ `/\
\ `/\
\ _- `/\ _.--.
\ _- `/`-..--\ )
\ _- `,',' / ,')
`-_ - ` -- ~ ,','
`- ,','
\,--. ____==-~
\ \_-~\
`_-~_.-'
_ Seal _ \-~
Rangka Peti
__________________
/\ ______________ \
/::\ \ZZZZZZZZZZZZ/\ \
/:/\.\ \ /:/\:\ \
/:/Z/\:\ \ /:/Z/\:\ \
/:/Z/__\:\ \____/:/Z/ \:\ \
/:/Z/____\:\ \___\/Z/ \:\ \
\:\ \ZZZZZ\:\ \ZZ/\ \ \:\ \
\:\ \ \:\ \ \:\ \ \:\ \
\:\ \ \:\ \_\;\_\_____\;\ \
\:\ \ \:\_________________\
\:\ \ /:/ZZZZZZZZZZZZZZZZZ/
\:\ \ /:/Z/ \:\ \ /:/Z/
\:\ \/:/Z/ \:\ \/:/Z/
\:\/:/Z/________\;\/:/Z/
\::/Z/____________\/Z/
\/ZZZZZZZZZZZZZZZZZ/
Kotak-kotak
______________________
/\ _______ _______ \
/ \ /\ \/\ \ \
/ _ \ \ \ \ \ \
/ /\ \ \ \ \ \ \
/ / \ \ \______\ \______\ \
/ / \ \ / _____/_/ _____/_ \
/ / \_ \ /\ \/\ \ \
/ _\ / _ \ \ \ \ \ \
/ /\ \ / /\ \ \ \ \ \ \
/ / \ \ / / \ \ \______\ \______\ \
/ / \ \/_/ \ \ / / / / \
/ / \_ / \_ \_____________________\
\ \ / _\ / / /
\ \ / /\ \ / / \______\ \______\ /
\ \ / / \ \ / / / / / / /
\ \/_/ \ \/_ / / / / / /
\ / \_ / / / / / /
\ \ / / \/______/\/______/ /
\ \ / / \______\ \______\ /
\ \ / / / / / / /
\ \/_ / / / / / /
\ / / / / / /
\ / \/______/\/______/ /
\/_____________________/
ALIGNMENT ATAU PERATAAN
Dalam tulisan cetak, dikenal tiga
atau empat macam perataan yaitu rata kiri (align left), di tengah (center),
rata kanan (align right) dan rata kiri dan kanan (justify). Tag Header dan
Tag Paragraf dapat disisipi dengan atribut align untuk melakukan perataan
ini.
Contoh atribut perataan dalam tag
header:
Bila dilihat dalam browser, tampak
seperti ini:
Contoh atribut perataan dalam tag
paragraf:
Hasilnya seperti yang anda
bayangkan:
Berpedoman dengan contoh di atas,
cobalah membuat tulisan dengan model header dan paragraf sebagai berikut:
INDENTASI
Disamping mengatur perataan, kita
pun bisa mengatur posisi baris-baris paragraf dari margin (tepi halaman). Ada
tiga macam bentuk indentasi paragraf. Pertama, baris pertamanya saja yang
agak masuk ke dalam. Untuk membuat paragraf semacam ini kita menggunakan tag
<DD>. Contoh:
Beginilah hasilnya bila dibuka dalam
browser:
Beginilah tampilannya dalam browser:
Ketiga, membuat paragraf dalam susunan daftar definisi (definition
list). Daftar definisi ialah susunan paragraf yang berselang-seling
antara paragraf normal yang merupakan kalimat yang hendak dijelaskan
dengan paragraf yang agak masuk ke dalam yang merupakan penjelasan atau
definisi dari kalimat di atasnya. Untuk lebih jelasnya, berikut ini
contoh daftar definisi:
Untuk membuat daftar definisi semacam di atas digunakan tiga macam
tag yaitu <DL> yang menandai dimulai atau diakhirinya daftar definisi,
<DT> yang menandai paragraf normal (yang dijelaskan) dan <DD>
yang menandai paragraf yang agak masuk ke dalam (yang menjelaskan paragraf di
atasnya).
Untuk contoh di atas beginilah kode sumbernya:
Sekarang, cobalah berlatih membuat daftar definisi sendiri!
DAFTAR ITEM (BULLET AND NUMBERING)
Ada dua macam daftar item yaitu daftar item tak berurut (bullet) dan
daftar item berurut (numbering).
Contoh daftar item tak berurut (bullet):
Contoh daftar item berurut (numbering):
1.
item pertama
2.
item kedua
3.
item ketiga
Untuk membuat daftar item tak berurut kita gunakan tag <UL>
sedang untuk membuat daftar item berurut digunakan tag <OL>. Adapun
setiap item ditandai dengan tag <LI>.
Beginilah kode sumber untuk daftar item tak berurut di atas:
Kita pun dapat membuat daftar item bertingkat atau daftar item di
dalam daftar item. Contohnya sebagai berikut:
Untuk membuat daftar item bertingkat seperti di atas tidak ada
penambahan tag atau atribut apa-apa. Yang dilakukan hanyalah menempatkan
tag-tag daftar item tingkat bawah di dalam daftar item tingkat di atasnya.
Untuk jelasnya beginilah source kodenya:
Penulisan kode-kode HTML di atas sengaja kita beri spasi agak ke
dalam, agar lebih mudah dibaca dan dimengerti mana yang level pertama, kedua
dan seterusnya. Sebenarnya, tanpa pemberian spasi, hasilnya dalam browser
tetap akan menggunakan spasi agak ke dalam untuk level-level di
bawahnya.
Cara yang sama dilakukan untuk membuat daftar item berurut
bertingkat. Kita tinggal mengganti tag <UL> dengan tag <OL> maka
hasilnya akan seperti ini:
Dari contoh daftar item tak berurut yang bertingkat di atas, kita
lihat bahwa secara default, browser akan menampilkan gambar (bullet) bulatan
hitam untuk item-item level pertama, lingkaran untuk untuk item-item level
kedua, dan kotak hitam untuk item-item level ketiga. Sebenarnya
kita pun bisa memilih sendiri bullet jenis apa yang kita ingin gunakan dengan
menambah atribut TYPE dalam tag <UL>. Rumusnya: <UL
TYPE="jenis bullet">. Dimana nama bullet ada tiga macam:
"disc" untuk bulatan hitam, "circle" untuk lingkaran, dan
"square" untuk kotam hitam. Jadi bila kita ingin membuat daftar
item semacam ini:
Maka kita menuliskan kode-kode HTML sebagai berikut:
Untuk daftar item berurut (numbering), jenis angkanya pun dapat
diganti dengan menggunakan atribut yang sama. Jadi rumusnya: <OL
TYPE="jenis angka">. Sedangkan jenis angkanya diisi dengan
angka 1, A, a, I, atau i tergantung selera kita. Contoh:
Akan menghasilkan daftar item sebagai berikut:
Sekian pelajaran tentang bullet dan numbering.
VARIASI FONT
Tanpa campur tangan kita, dokumen HTML menggunakan font default dari
Windows (Sistem Operasi Komputer) atau browser (Internet Explorer), biasanya Times
New Roman dengan ukuran 12 point. Kita bisa mengubah jenis, warna
dan ukuran font sesuai dengan selera kita menggunakan tag <FONT>
diikut dengan atribut-atributnya. Misalnya untuk mengubah jenis font kita
gunakan atribut FACE:
Bila dilihat dalam browser, akan tampak seperti ini:
Untuk mengubah ukuran font, gunakan atribut SIZE:
Bila dilihat dalam browser, akan tampak seperti ini:
Sedangkan untuk mengubah warna tulisan, menggunakan atribut COLOR:
Bila dilihat dalam browser, akan tampak seperti ini:
Dalam satu tag FONT kita bisa menggabungkan lebih dari satu atribut.
Perhatikan contoh berikut:
Bila dilihat dalam browser, akan tampak seperti ini:
Untuk mengubah font default untuk satu halaman HTML, digunakan tag
<BASEFONT> yang ditempatkan diantara tag <HEAD> dan
</HEAD>. Contoh:
Cobalah buat dalam sebuah file HTML kemudian lihat hasilnya dalam
browser!
SUBSCRIPT DAN SUPERSCRIPT
Subscript adalah tulisan yang agak kecil dan letaknya agak di bawah
sedangkan superscript adalah tulisan yang agak kecil dan letaknya agak di
atas. Untuk menulis subscript kita gunakan tag <SUB> sedang untuk
menulis superscript kita gunakan tag <SUP>. Inilah contohnya:
Beginilah hasilnya dalam browser:
Bagusnya, anda berlatih sedikit. Coba buat tulisan berikut:
Gampang, kan?
LINK ATAU KAITAN
Sekarang kita akan belajar membuat link yang merupakan ciri khas dari
dokumen web. Link adalah sebuah teks atau gambar yang bila di-klik akan
membawa anda ke bagian lain dari dokumen web. Sebuah link biasanya ditandai
dengan teks warna biru bergaris bawah atau pointer mouse yang berubah menjadi
telunjuk tangan. Untuk membuat sebuah teks atau gambar menjadi sebuah link,
kita lakukan dengan mengapitnya dengan tag pembuka <A HREF> dan
tag penutup </A>. Jadi rumusnya kira-kira sebagai berikut:
<A HREF="lokasi_tujuan">link</A>.
Berdasarkan lokasi tujuannya, link dapat dibedakan atas:
1.
Link yang menuju ke homepage (halaman pertama) dari sebuah situs
2.
Link yang menuju ke halaman yang lain dalam situs yang sama
3.
Link yang menuju ke halaman yang lain dalam situs yang lain
4.
Link yang menuju ke bagian tertentu (bookmark) dalam halaman
yang sama.
5.
Link yang menuju ke bagian tertentu (bookmark) dalam halaman
yang berbeda
6.
Link yang mengarah ke sebuah file yang dapat ditampilkan dalam
browser, misalnya file image (gambar) atau animasi seperti GIF, JPG, BMP dan
sebagainya.
7.
Link yang mengarah ke sebuah file tertentu yang tidak bisa
ditampilkan atau dijalankan dalam browser misalnya: file program (EXE), file
kompresi (ZIP), file audio (seperti MP3, RM), file video, dan lain-lain. Bila
link semacam ini diklik, akan muncul kotak dialog yang menanyakan apakah anda
akan menyimpan (save) file itu dalam hardisk atau menjalankannya dengan
program yang sesuai. Proses pengambilan dan penyimpanan file semacam inilah
yang dinamakan download.
8.
Link yang mengarah ke alamat email. Bila link ini diklik akan membuka
jendela pengiriman email dari program email yang terinstall pada komputer
user (misalnya Microsoft Outlook). Pada kotak tujuan email (To:) sudah
tercantum alamat email tujuan.
Untuk setiap jenis link di atas, yang penting untuk diketahui adalah
cara penulisan alamat atau lokasi (URL) dari situs atau file yang dituju oleh
link itu. Lokasi ini ditulis diantara tanda kutip sesudah atribut href=.
Ketentuannya sebagai berikut:
1.
Link yang menuju ke homepage (halaman pertama) dari situs lain, cukup
dituliskan alamat URL dari website tersebut, misalnya: href="http://www.situs.com".
2.
Link yang menuju ke halaman lain dalam situs lain, maka harus kita
tuliskan alamat URL dan lokasi filenya.
Misalnya: href="http://www.situs.com/sini/situ.htm".
3.
Link yang menuju ke halaman lain dalam situs yang sama, maka cukup
dituliskan lokasi filenya, tanpa menuliskan alamat URL situs itu. Dalam hal
ini ada beberapa kemungkinan:
a) Bila file tersebut berlokasi pada folder yang sama dengan file dari link tersebut maka cukup dituliskan nama filenya, misalnya: href="freeware1.htm". b) Bila file yang dituju itu berada dalam folder yang lain di bawah folder yang ditempati oleh link tersebut, maka harus dituliskan nama foldernya. Misalnya: href="javascript/js001.htm". c) Sedangkan bila file yang dituju itu berada dalam folder yang lain di atas folder yang ditempati oleh file dari link tersebut maka dituliskan seperti berikut: href="../rainbow.gif". d) Bila file tersebut letaknya dua tingkat di atas maka dituliskan dua kali titik dua seperti ini: href="../../rainbow.gif" dan seterusnya.
4.
Untuk membuat link yang menuju ke bagian tertentu dari sebuah halaman
web, sebelumnya kita harus memberi nama pada tempat/lokasi yang akan dituju
itu dengan mencantumkan tag <a name="bagian"></a> pada
baris yang akan dituju itu. Setelah itu barulah kita bisa membuat link yang
menuju ke bagian tersebut. Dalam hal ini ada dua kemungkinan.
a) Bila tempat yang dituju itu terdapat dalam halaman yang sama dengan link tersebut maka cukup dituliskan nama lokasi yang dituju itu. Misalnya: href=#bagian. b) Bila tempat yang dituju itu terletak pada halaman yang lain maka harus dituliskan nama file dari halaman itu baru nama tempatnya. Misalnya: href="lain.htm#bagian".
5.
Link yang mengarah ke sebuah file yang bukan file HTML misalnya file
program, audio, image, dan lain-lain cara penulisannya sama saja caranya
dengan file HTML seperti pada point 1, 2 dan 3 di atas.
6.
Link yang berisi alamat email dituliskan seperti berikut: href="mailto:adifitrah@maktoob.com".
Telah kita ketahui bahwa bila sebuah link diklik maka browser akan
menampilkan halaman yang dituju oleh link tersebut. Cara browser memunculkan
halaman tujuan ini ada dua macam.
1.
Ditampilkan pada jendela yang sama. Artinya, halaman tempat link itu
akan digantikan oleh halaman yang dituju oleh link tersebut. Ini merupakan
cara pemunculan default.
2. Ditampilkan
pada jendela yang lain. Artinya, akan muncul jendela baru yang menampilkan
halaman yang dituju. Untuk membuat link semacam ini, kita harus menambahkan
atribut TARGET="_blank" dalam tag <A HREF>. Contoh: <a
href="webpage.htm" target="_blank">.
Sekian pelajaran tentang link.
Agar anda lebih mengerti cara pembuatan macam-macam link tersebut,
selanjutnya anda akan berlatih membuat
beberapa halaman web dengan sejumlah link di dalamnya.
PRAKTEK
MEMBUAT HALAMAN WEB
Untuk mempermantap keterampilan anda dalam membuat link sekaligus
mengulang semua pelajaran yang telah lalu, kita akan mencoba membuat halaman
web. Anggaplah ini adalah proyek pembuatan web anda yang pertama.
Bukalah program Notepad anda. Klik menu File lalu Save.
Pada kotak dialog yang muncul masuklah ke folder My Documents lalu
folder My Webs. Cara masuknya, klik ganda (klik dua kali dengan cepat)
folder yang bersangkutan. Setelah anda berada dalam folder My Webs,
buatlah folder baru dengan cara mengklik ikon create new folder yang
berada pada ikon ketiga. Maka akan muncul folder New Folder, silakan
anda ganti namanya misalnya web1. Setelah itu pada kotak Save As
Type, ganti isinya dengan All File. Lalu isi kotak File Name dengan
nama yang anda sukai misalnya home.htm. Klik Save.
Pada file dengan nama home.htm ini, buatlah halaman web dengan
judul (title) Halaman Pertama. Kemudian isilah halaman tersebut
sedemikian rupa sehingga dalam browser tampak seperti ini:
Sekarang kita akan membuat halaman web selanjutnya dengan judul Halaman
Kedua dengan tampilan dalam browser sebagai berikut:
Simpanlah halaman di atas dengan nama misalnya: kuning.htm.
Kemudian buatlah satu halaman web lagi dengan titel Halaman Ketiga
seperti berikut:
Simpanlah halaman ketiga di atas dengan nama misalnya: biodata.htm.
Sekarang kita telah mempunyai tiga buah file HTML yaitu home.htm, kuning.htm
dan biodata.htm. Tugas kita selanjutnya adalah memasukkan link-link ke
dalam setiap halaman web tersebut.
Dalam setiap halaman, di bagian atasnya terdapat link-link berikut: HAL.
1, HAL. 2 dan HAL. 3. Masing-masing link menuju ke file home.htm,
kuning.htm dan biodata.htm.
Juga dalam setiap halaman, terdapat link Kembali Keatas dan Selanjutnya.
Teks Kembali Keatas merupakan link yang membawa kita ke bagian paling
atas dari setiap halaman. Untuk itu sebelumnya kita harus memberi nama pada
baris tulisan HAL. 1 | HAL. 2 | HAL. 3 yang merupakan baris teratas
dari setiap halaman.
Setelah itu barulah kita membuat link Kembali Keatas dengan kode
sebagai berikut:
Sedang teks Selanjutnya dijadikan link yang menuju ke file
sesudahnya. Yakni dari file home.htm menuju ke kuning.htm dan
dari file kuning.htm menuju ke biodata.htm. Contoh dalam file home.htm:
Dalam halaman pertama terdapat dua link lagi di bagian tengah yaitu
link yang menuju ke Daftar Definisi yang ada di halaman kedua dan link
yang menuju ke Kesan dan Pesan yang ada di halaman ketiga. Karena itu
kita harus mencantumkan nama terlebih dahulu pada baris Daftar Definisi di
halaman kedua (file kuning.htm) dan pada baris Kesan dan Pesan di
halaman ketiga (file biodata.htm) seperti contoh berikut:
Untuk halaman ketiga:
Setelah itu barulah kita bisa memberi link pada kalimat berikut di
halaman pertama:
Di halaman kedua (file kuning.htm) terdapat contoh link yang
menuju ke situs yang lain. Buatlah link tersebut bila di-klik akan membuka
jendela browser baru untuk menampilkannya. Begini jadinya:
Bila anda telah selesai memasukkan seluruh link-link tersebut,
bukalah browser anda, kemudian cobalah meng-klik semua link-link yang
terdapat dalam ketiga halaman web itu.
Sampai pelajaran ini, anda sebetulnya sudah dapat
membuat website sendiri. Kami sangat menyarankan anda mencoba membuat website
sederhana dengan bekal pengetahuan yang telah anda pelajari.
MENYISIPKAN GAMBAR
(IMAGE)
Untuk menyisipkan gambar ke dalam sebuah halaman HTML, mula-mula kita
harus menyediakan terlebih dahulu file gambar yang dibutuhkan. File gambar
ini biasanya berekstensi GIF, JPG atau BMP. Bila file gambar itu telah
tersedia, dan kita mengetahui nama dan letak (lokasi) file gambar itu,
barulah kita bisa menyisipkannya ke dalam halaman web kita dengan menggunakan
tag <IMG SRC="file_gambar">.
Misalnya, kita mempunyai sebuah halaman web seperti ini:
Kita ingin menyisipkan sebuah gambar yang file gambarnya bernama email.gif
diantara kedua kalimat di atas. Bukalah source kode halaman HTML tersebut
sehingga tampak seperti ini:
Sisipkan satu tag paragraf lagi diantara kedua paragraf di atas,
kemudian tuliskan tag penyisip gambar <IMG
SRC="file_gambar"> sehingga menjadi seperti ini:
Simpan (Save) source code tersebut kemudian buka dengan
browser maka tampaklah seperti ini:
Untuk contoh di atas, file email.gif dan file halaman yang
disisipi gambar itu harus terletak dalam folder yang sama. Bila terletak
dalam folder lain, maka harus dituliskan lokasinya. Misalnya:
<IMG SRC="images/email.gif"> bila file gambar itu
terletak dalam folder bernama images, dimana folder images itu
letaknya di bawah (di dalam) folder yang ditempati oleh halaman HTML yang
disisipi gambar.
<IMG SRC="../email.gif"> bila file gambar itu
terletak satu tingkat di atas (di luar) folder yang ditempati oleh halaman
HTML yang disisipi gambar.
ATRIBUT-ATRIBUT GAMBAR
Setelah kita mengetahui cara menyisipkan gambar, sekarang kita akan
mempelajari atribut apa saja yang bisa disertakan dalam tag <IMG SRC>
untuk menghasilkan sejumlah efek tertentu. Atribut pertama yang bisa kita
tambahkan ke dalam tag gambar adalah BORDER. Sesuai dengan namanya, atribut
ini digunakan untuk memberi efek bingkai pada gambar. Bukalah file HTML di
atas tadi. Kemudian sisipkanlah atribut border dalam tag gambar sehingga
menjadi:
Anda boleh mengganti angka 3 dengan angka yang lebih kecil atau lebih
besar untuk menghasilkan ukuran border yang lebih kecil atau lebih besar
pula. Save lalu tampilkan dalam browser, maka hasilnya seperti ini:
Atribut selanjutnya yang bisa anda sisipkan adalah atribut ALT.
Dengan atribut ini kita bisa menyiapkan teks pengganti gambar bila suatu
waktu gambar - karena satu dan lain hal - tidak bisa ditampilkan. Misalnya
user menggunakan browser versi lama (yang belum bisa menampilkan gambar) atau
browser yang dimatikan fungsi penampil gambarnya (untuk mempercepat proses loading).
Dengan adanya atribut ALT ini, tampilan gambar dapat digantikan dengan teks
yang kita masukkan di dalamnya. Contoh:
Bila suatu ketika, gambar tidak bisa ditampilkan maka akan tampak
seperti ini:
Atribut image berikutnya yang akan kita pelajari adalah atribut
ukuran gambar yaitu WIDTH (lebar) dan HEIGHT (tinggi). Tanpa menggunakan
atribut ini, browser akan menampilkan gambar sesuai dengan ukuran asli dari
file gambar yang bersangkutan. Kita bisa mengatur ukuran tampilan gambar
dalam browser lebih kecil ataupun lebih besar dari ukuran aslinya dengan
menggunakan atribut WIDTH dan HEIGHT tersebut.
Kita masih mengambil contoh gambar email.gif di atas. Ukuran
gambar yang sebenarnya dari file GIF ini adalah 132x37 pixel (ukuran suatu
gambar bisa kita ketahui dengan menggunakan program penampil gambar
seperti ACDSee, IrfanView, dsb.). Kita akan mencoba menampilkan gambar itu
lebih kecil misalnya menjadi 99x25 pixel dan lebih besar misalnya menjadi
165x47 pixel. Untuk itu, editlah kode HTML-nya sebagai berikut:
Ingin tahu hasilnya setelah ditampilkan dalam browser?
Selain menggunakan satuan pixel, kita pun bisa mengatur ukuran
tampilan gambar dalam browser dengan satuan persen. Umumnya, satuan persen
ini digunakan untuk mengatur lebar (WIDTH) gambar, bukan tinggi gambar. Sebab
mengatur tinggi gambar dengan satuan persen akan menghasilkan tampilan yang
tidak konsisten karena akan bergantung pada lebar jendela browser serta
setting resolusi monitor. Oleh karena itu jika anda mengatur lebar gambar
dengan satuan persen, atribut HEIGHT tidak perlu diatur lagi karena ukuran
pixelnya secara otomatis diskala dengan ukuran yang benar. Misalnya:
<IMG SRC="file_gambar" WIDTH=50%>.
Ukuran gambar yang ditampilkan oleh browser akan mengikuti ukuran
jendela browser relatif terhadap setting resolusi monitor. Jika monitor diset
pada resolusi 800x600 pixel dan jendela browser dibuat maksimum, maka gambar
akan ditampilkan dengan pada ukuran sekitar 400x300 pixel, yakni 50% dari
ukuran jendela browser, bukan 50% dari ukuran gambar. Penggunaan satuan
persen untuk pengaturan ukuran tampilan gambar ini, sering digunakan untuk
gambar-gambar besar dan tampilannya ingin kita sesuaikan dengan ukuran
jendela browser dan resolusi monitor.
Apakah atribut WIDTH dan HEIGHT ini semata-mata digunakan untuk
pengubahan ukuran tampilan gambar? Ternyata tidak. Atribut ini juga berfungsi
untuk mempercepat tampilnya halaman web (loading). Karena dengan
adanya kedua atribut ini, secara teknis memerintahkan browser untuk
menyediakan tempat seukuran itu sebelum gambarnya sendiri selesai di-load.
Jadi bila kita ingin menampilkan sebuah gambar sama dengan ukuran aslinya,
alangkah baiknya bila atribut WIDTH dan HEIGHT ini tetap dituliskan dengan
angka yang sama dengan lebar dan tinggi yang sebenarnya dari gambar tersebut.
MENGGUNAKAN GAMBAR SEBAGAI BACKGROUND
Pada pelajaran-pelajaran yang terdahulu, kita sudah mempelajari cara
menggunakan warna sebagai latar belakang halaman web. Sekarang kita akan
mempelajari cara menggunakan gambar sebagai latar belakang. Untuk warna, kita
menggunakan atribut BGCOLOR="warna", sedangkan untuk gambar,
kita menggunakan atribut BACKGROUND="file_gambar". Kedua
atribut ini disisipkan dalam tag BODY. Sangat mudah, bukan? Misalnya kita
ingin memanfaatkan gambar email.gif tadi sebagai latarbelakang halaman
web maka cukup dengan menyisipkan atribut tersebut ke dalam tag BODY seperti
di bawah ini:
Bila dibuka dalam browser akan tampak seperti ini:
Bagaimana cara mendapatkan file-file image untuk dijadikan
background? Mudah saja. Misalnya anda tertarik dengan background halaman web
ini yang berlatarbelakang garis kotak-kotak abu-abu. Klik kanan pada sebarang
tempat yang tampak background kotak-kotak itu maka akan muncul pop-up menu.
Salah satu menu di dalamnya pasti bertuliskan Save Background As....
Pilih (klik) menu ini maka muncullah kotak dialog Save Picture. Di
situ anda bisa memilih tempat (folder) dimana file image itu ingin anda
simpan (misalnya di folder tempat halaman-halaman web anda). Anda pun bisa
mengubah nama dari file image itu. Setelah itu klik tombol Save.
MENGGUNAKAN GAMBAR SEBAGAI LINK
Masih ada satu lagi fungsi gambar. Gambar juga dapat digunakan
sebagai link. Pada prinsipnya untuk membuat link gambar sama saja dengan
membuat link teks. Kita tinggal mengganti teks yang bertindak sebagai link
itu dengan tag penyisipan gambar (IMG SRC). Misalnya kita punya link
seperti ini: email kami. Kode HTML dari link ini
adalah:
Untuk membuat link gambar, kita tinggal mengganti tulisan email
kami dengan tag penyisip gambar yaitu <IMG
SRC="email.gif">. Sehingga lengkapnya tertulis:
Inilah gambar yang sudah dijadikan link:
Cobalah klik gambar tersebut untuk mengetesnya!
MEMBUAT
TABEL
Setiap tabel minimal tersusun dari tiga tag dasar yaitu tag
<TABLE> yang menandai sebuah tabel, tag <TR> yang
membentuk baris dan tag <TD> yang membentuk kolom.
Masing-masing tag tersebut harus memiliki tag penutup.
Susunan tag-tag di atas memerintahkan kepada browser untuk
menampilkan sebuah tabel yang terdiri dari satu baris dan satu
kolom yang diisi dengan tulisan: kolom 1 dari baris 1.
Mana tabelnya? Sesungguhnya, tabelnya ada, hanya saja tanpa bingkai
(border). Ternyata, secara default, tabel menggunakan nilai border = 0
(nol) alias tanpa bingkai. Jadinya yang tampak hanya tulisan semata. Untuk
membuat bingkai dari tabel tersebut, kita harus menyertakan atribut
BORDER.
Sehingga tabelnya tampak sebagai berikut:
Silakan coba sendiri mengganti ukuran bingkai menjadi 2, 3 dan
seterusnya lalu bandingkan hasilnya. Sekarang mari kita membagi tabel sebaris
tersebut menjadi dua kolom. Artinya kita menambah sepasang tag TD lagi.
Beginilah hasilnya dalam browser:
Nah, bila anda ingin menambah sekian baris ke bawah, cukup menyalin
ulang dari tag <TR> sampai </TR>. Sorot (blok) dari tag
<TR> hingga </TR> lalu Copy (Ctrl+C). Tempatkan
kursor di bawah tag </TR> lalu Paste (Ctrl+V). Sekian
baris yang ingin anda buat, sekian kali pula anda harus menyalinnya
(melakukan perintah Paste). Setelah itu tinggal meng-edit tulisan
sesuai keinginan anda. Begini contohnya:
Tampilannya dalam browser menjadi:
Setelah atribut BORDER, atribut selanjutnya yang perlu kita ketahui adalah
atribut CELLSPACING yang mengatur jarak antar sel dan CELLPADDING yang
mengatur jarak antara sel dan tulisan di dalamnya. Misalnya:
Dengan penambahan atribut CELLSPACING=10 dalam tag TABLE berarti akan
dihasilkan sebuah tabel dengan jarak antar sel adalah 10 pixel. Beginilah
tampilannya dalam browser:
Sekarang mari kita coba bandingkan bila atribut CELLSPACING tersebut
diganti dengan CELLPADDING.
Beginilah hasilnya dalam browser:
Sedangkan kalau kedua tag tersebut dipakai bersama-sama seperti ini:
Akan menghasilkan tabel seperti ini:
Ternyata mudah, kan membuat tabel? Bila kita lihat tabel-tabel pada
contoh di atas, tampak bahwa secara default, lebar kolom dan tinggi baris
mengikuti lebar dan tinggi tulisan di dalamnya. Kita bisa mengatur sendiri
lebar dan tinggi tabel, kolom dan barisnya dengan menggunakan atribut WIDTH
(lebar) dan HEIGHT (tinggi). Misalnya:
Bagaimana jadinya tabel dengan lebar 100% ?
Kesimpulannya, lebar tabel 100% artinya tabel tersebut akan melebar
hingga memenuhi lebar tampilan halaman. Bila lebar setiap kolom tidak
ditentukan, maka lebar 100% itu akan terbagi sejumlah kolomnya. Seperti
dalam contoh di atas, karena terdiri dari dua kolom maka lebar masing-masing
kolom adalah 50%. Nah, bagaimana bila kita ingin membagi lebar kolom tidak
sama? Ya, caranya sama saja, yaitu dengan memasukkan atribut WIDTH dalam tag
kolom.
Bagaimana jadinya?
Bagaimana halnya dengan atribut HEIGHT (tinggi)? Atribut ini juga
bisa disisipkan dalam tag TABLE dan tag TR (baris). Selain menggunakan persen
untuk menentukan ukuran tabel, kita bisa pula menggunakan satuan pixel. Bila
angka sesudah WIDTH dan HEIGHT tidak menggunakan persen (%), berarti
satuannya adalah pixel. Contoh:
Ukuran border tabel kita ubah menjadi 7. Tinggi baris pertama adalah
40 pixel sedang baris kedua 80 pixel. Adapun lebar kolom pertama adalah 150
pixel sedang kolom kedua 250 pixel. Perhatikanlah bagaimana atribut-atribut
di atas, menghasilkan tampilan tabel dalam browser menjadi:
Sekarang kita akan berbicara lagi masalah perataan (alignment)
tulisan. Lihat contoh tabel di atas! Tampak bahwa secara default,
tabel menempatkan tulisan rata kiri (secara horisontal) dan di tengah (secara
vertikal). Namun demikian, kita bisa mengatur sendiri perataan ini dengan
menggunakan atribut ALIGN untuk perataan horisontal dan VALIGN untuk perataan
vertikal. Perhatikan penggunaannya:
Beginilah hasilnya bila ditampilkan dalam browser:
Pembicaraan tentang tabel ini, belum selesai. Akan
kita lanjutkan pada halaman berikutnya.
MEMBUAT
FRAME
Dengan menggunakan frame, kita bisa menampilkan beberapa halaman HTML
sekaligus dalam sebuah jendela browser. Apa artinya? Artinya dengan membuka sebuah
halaman HTML saja (yang mengandung frame), browser akan menampilkan beberapa
halaman sekaligus yang masing-masing termuat dalam sebuah frame. Apa gunanya?
Disamping untuk mempercantik tampilan, fungsi utama frame adalah untuk
memudahkan navigasi atau penelusuran isi website. Kok, bisa? Daripada
membahas panjang lebar, lebih baik kita langsung saja belajar membuat frame.
Perhatikan contoh layout halaman ber-frame berikut ini:
Anggaplah gambar di atas adalah tampilan dari sebuah halaman HTML
yang terdiri dari tiga frame. Halaman yang ber-frame ini kita namakan gabung.htm.
File gabung.htm ini menampilkan tiga halaman HTML sekaligus yaitu file
judul.htm, menu.htm dan isi.htm. Jadi untuk membuat
tampilan seperti di atas kita harus membuat empat buah file HTML, 3 file
berfungsi sebagai halaman yang ditampilkan sedang satu file berfungsi sebagai
halaman yang menampilkan. Halaman inilah yang merupakan halaman utama atau
halaman yang mengandung frame.
Untuk membuat halaman utama atau halaman yang ber-frame, kita hanya
membutuhkan dua buah tag yaitu <FRAMESET> untuk mengatur pembuatan
frame, dan <FRAME> untuk menentukan file target bagi setiap frame. Baiklah
kita mulai membuat file gabung.htm ini:
Di atas anda bisa melihat bahwa empat tag yang pertama hanyalah tag
pembukaan HTML yang sudah biasa. Sedangkan tag untuk membuat frame adalah tag
<FRAMESET> dengan tag penutupnya. Perhatikanlah bahwa halaman yang
berframe tidak membutuhkan tag BODY karena yang menjadi isi dari halaman
utama ini adalah isi dari halaman-halaman lain yang menjadi target dari
setiap frame.
Perhatikan kembali layout halaman berframe yang digambarkan di atas
tadi. Halaman tersebut terdiri dari atas dua baris dimana baris pertama
(atas) lebih kecil (anggaplah 20%) daripada baris kedua (80%). Dan baris
kedua terbagi atas dua kolom dimana kolom pertama (kiri) lebih kecil
(anggaplah 30%) daripada kolom kedua (70%). Bagaimana cara mengaturnya?
Pertama, kita membagi halaman menjadi dua baris, baris pertama
tingginya 20% dan baris kedua tingginya 80%. Agar lebih bersih dan jelas, tag
<HTML>, <HEAD> dan <TITLE> tidak dicantumkan lagi. Ingat,
anda harus tetap menuliskannya di dokumen anda.
Atribut ROWS dalam tag FRAMESET di atas memerintahkan browser untuk
membagi halaman menjadi dua baris, baris pertama tingginya 20% dan baris
kedua tingginya 80%. Sekarang kita akan mengisi baris pertama dengan frame
kosong terlebih dahulu menggunakan tag <FRAME>.
Sekarang kita akan mengisi baris kedua. Sebelumnya kita harus membagi
baris kedua ini dalam dua kolom. Untuk itu, kita harus menambahkan lagi
sepasang tag <FRAMESET> yang di dalamnya disisipkan atribut pembagi
kolom yaitu COLS.
Setelah terbagi dalam dua kolom kita harus mengisi setiap kolom
tersebut dengan frame. Jadinya seperti ini:
Kini selesailah sudah pembuatan file gabung.htm yang merupakan
halaman web yang terdiri dari tiga buah frame. Tugas kita tinggal mengisi
frame-frame yang masih kosong itu dengan file-file yang akan kita tampilkan
di dalamnya. Untuk mendefinisikan nama file target pada setiap frame, kita
tinggal menambahkan atribut SRC dalam setiap tag <FRAME>. Contoh:
Tentu saja sebelumnya anda harus sudah membuat ketiga file tersebut
dan menempatkan keempat file ini dalam folder yang sama. Bila foldernya tidak
sama, gunakanlah cara penulisan alamat file seperti cara penulisan alamat
file untuk link (lihat kembali pelajaran tentang link yang lalu).
Misalnya kita mempunyai file judul.htm seperti ini, file menu.htm
seperti ini dan file isi.htm seperti ini. Maka bila anda
membuka file gabung.htm, akan tampaklah sebuah halaman web yang
terdiri dari tiga frame seperti ini. (klik
masing-masing kata "seperti ini" untuk melihat tampilannya).
Seperti halnya dalam penentuan
ukuran tabel, selain menggunakan satuan persen, kita juga bisa menggunakan
satuan pixel. Misalnya atribut COLS="200,400" memerintahkan
browser untuk membagi halaman menjadi dua kolom dimana kolom pertama lebarnya
200 pixel sedang kolom kedua lebarnya 400 pixel. Bahkan anda pun dapat
membagi frame seperti ini COLS="200,*". Apa artinya? Artinya
anda membagi halaman menjadi dua kolom dimana kolom pertama lebarnya 200 pixel
sedang kolom kedua lebarnya adalah sisa dari ukuran layar monitor. Hal ini
berguna karena setting layar monitor yang dipakai oleh user bisa
berbeda-beda; pada umumnya adalah (lebar x tinggi dalam satuan pixel)
640x480, 800x600 atau 1024x768.
Atribut lainnya yang bisa
disisipkan dalam tag <FRAMESET> antara lain: BORDER untuk mengatur
ukuran border yang memisahkan antara dua frame dan BORDERCOLOR untuk
menentukan warna border. Contoh:
Bila dilihat dalam browser, tampak seperti ini. Ukuran
BORDER="2" adalah default sedang ukuran BORDER="0"
berarti frame tanpa border.
Sedangkan untuk tag <FRAME> biasanya dilengkapi dengan
atribut-atribut berikut:
1.
BORDERCOLOR, fungsinya sama dengan BORDERCOLOR pada tag FRAMESET.
Dalam hal ini, warna yang didefinisikan oleh tag yang lebih dalam menang atas
warna yang didefinisikan oleh tag yang luar.
2.
MARGINHEIGHT untuk menentukan jarak antara batas atas atau batas
bawah frame dengan isi frame.
3.
MARGINWIDTH untuk menentukan jarak antara batas kiri atau batas kanan
frame dengan isi frame.
4.
NORESIZE, dengan adanya atribut ini maka border dari frame yang
bersangkutan tidak bisa digeser. Dengan kata lain, ukuran frame tersebut
tidak bisa diubah (diperkecil atau diperbesar).
5.
SCROLLING, mengatur fasilitas scroll (penggulung layar) dari
frame. Nilainya bisa YES, NO atau AUTO. Nilai YES berarti penggulung
selalu ada, NO berarti penggulung selalu tidak ada, sedang AUTO berarti
penggulung ada bila diperlukan (isi frame melebihi ukuran layar) dan tidak
ada bila tidak diperlukan (isi frame dimuat oleh layar). Nilai AUTO merupakan
nilai default. Artinya, bila atribut SCROLLING tidak dituliskan, maka
penggulung layar otomatis akan muncul bila diperlukan.
6.
NAME, untuk memberi nama terhadap frame yang bersangkutan. Kegunaannya
akan dijelaskan kemudian.
Berikut sekelumit contoh penggunaan atribut-atribut di atas:
Adapun atribut NAME diperlukan dalam kaitannya dengan fungsi navigasi
dari halaman ber-frame. Misalnya kita ingin mengatur agar suatu link bila
di-klik akan memunculkan halaman targetnya dalam frame tertentu. Maka
terlebih dahulu kita harus memberi nama terhadap frame tersebut. Contoh:
Dalam contoh di atas, frame ketiga (frame pada kolom kedua dari baris
kedua halaman) kita berinama "utama". Dengan adanya nama tersebut,
kita bisa mengatur agar link yang terdapat pada halaman di frame lainnya bila
di-klik akan memunculkan halaman targetnya pada frame "utama"
tersebut. Bingung? Misalnya, pada halaman menu.htm terdapat link
dengan kode HTML seperti berikut:
<A HREF="bab2.htm">BAB II</A>
Bila kata BAB II di-klik maka akan membuka file bab2.htm.
Tapi halaman bab2.htm tersebut akan mengisi seluruh jendela browser.
Artinya halaman yang berframe akan hilang. Agar file bab2.htm itu
muncul pada frame "utama" saja, kita harus memberi atribut TARGET
seperti ini:
<A HREF="bab2.htm" TARGET="utama">BAB
II</A>
Masih ingat, kan tentang atribut TARGET pada pelajaran tentang LINK?
Seandainya semua link yang terdapat dalam file menu.htm akan kita
arahkan pada frame "utama" maka kita bisa menyisipkan tag <BASE
TARGET="utama"> diantara tag <HEAD> dan </HEAD>.
Dengan demikian, kita tidak perlu lagi menuliskan dalam setiap link atribut
TARGET tersebut satu-persatu. Karena dengan adanya tag BASE TARGET itu,
secara otomatis, semua link yang ada dalam halaman tersebut akan diarahkan ke
frame yang dicantumkan dalam BASET TARGET. Kecuali link yang mempunyai TARGET
tersendiri.
Berikut beberapa cara pengarahan link dengan atribut TARGET:
MEMASANG WEBSITE DI INTERNET
Bila anda telah membuat halaman-halaman web yang
tersimpan sebagai file-file HTML dalam hardisk komputer anda, berarti anda
telah mempunyai website sendiri secara offline. Website ini hanya bisa
dilihat oleh orang yang mengakses komputer anda. Bagaimana caranya agar
website itu bisa diakses oleh "semua orang" di seluruh dunia secara
online? Inilah yang akan kita pelajari di sini. Membuat halaman HTML adalah
proyek tahap pertama, sedang memasang halaman web di internet adalah proyek
tahap kedua dan senantiasa memperbaharui isi website kita adalah proyek tahap
ketiga. Ketiga tahapan ini harus dilalui dan dikerjakan oleh setiap webmaster
yang ingin menghasilkan website yang berkualitas.
Agar website anda dapat diakses lewat internet,
anda harus menyimpannya dalam web server yaitu komputer yang terhubung ke
internet secara terus-menerus selama 24 jam sehari, 7 hari sepekan. Untuk
dapat menyimpan file-file anda ke dalam web server, anda harus mendaftar
(memiliki account) terlebih dahulu kepada penyedia layanan web hosting
(jasa penyimpanan web). Bagi para pemula, jasa web server gratis (free web
hosting) adalah pilihan yang paling tepat untuk menyimpan website di internet.
Di internet, anda bisa menemukan banyak web server gratis yang menyediakan space
(ruang dalam hardisk mereka) untuk account anda.
MENDAFTAR DI WEB HOSTING GRATIS
Dalam kesempatan ini, kita mengambil contoh salah
satu web hosting gratis yang kami gunakan untuk menyimpan halaman web yang
sedang anda baca ini, yaitu Freewebs. Sepanjang yang kami temui, Freewebs
menyediakan layanan web hosting yang cukup baik dan bersahabat. Disamping
gratis dan bebas iklan (dua hal ini yang terpenting), Freewebs juga
menyediakan beberapa fasilitas lain seperti hit counter (penghitung
pengunjung) dan guest book (buku tamu) yang lumayan baik buat webmaster
pemula. Freewebs menyediakan space (ruang) gratis untuk website anda hingga
40 megabyte, sudah "terlalu banyak" untuk website gratis apalagi
bagi webmaster pemula.
Pertama-tama kita akan belajar bagaimana cara
mendaftar atau membuat account baru di Freewebs. Dengan mengikuti petunjuk di
bawah ini, diharap kita sudah bisa menerapkannya untuk mendaftar ke web
hosting gratis yang lain bila suatu waktu anda berminat. Buka situs Freewebs
dengan alamat http://www.freewebs.com. Kalau belum berubah,
tampilannya seperti di bawah ini.
Klik tombol elips yang bertuliskan SIGN ME UP!
maka akan tampil halaman berikut yang bisa dianggap sebagai formulir
pendaftaran untuk membuka "New Accounts" (keanggotaan baru).
Isilah kotak-kotak sesuai yang diminta.
Kotak pertama adalah "Account Name (One
Word)". Di kotak ini anda diminta mengisi satu kata yang akan
menjadi nama keanggotaan anda. Account ini sekaligus menjadi alamat website
(URL) resmi anda yang terdaftar di Freewebs. Oleh karena itu sedapat mungkin
anda menggunakan nama yang ada hubungannya dengan tema atau materi website
anda. Namun usahakan mencari nama yang tidak terlalu umum dipakai. Bila nanti
ternyata anda diminta untuk mengisi ulang formulir ini kemungkinan karena
Account Name yang anda isi sudah terpakai oleh orang lain.
Kotak kedua adalah "Password". Di
sini anda harus memasukkan password anda (minimal 4 karakter, boleh huruf
atau angka). Kemudian di kotak selanjutnya (Retype Password) anda
harus mengetikkan kembali password anda yang sama persis dengan yang di atas
(tapi jangan di-copy). Sedang di kotak ketiga (Email Address) anda
harus menuliskan alamat email anda.
Kotak terakhir menanyakan dari mana anda
mengetahui tentang Freewebs. Pilihlah salah satu dari item yang disediakan.
Item-item tersebut akan tampak bila anda meng-klik kotak kecil di tepi kanan
yang bertanda anak panah (segitiga).
Gulunglah layar ke bawah maka akan tampak
lanjutannya. Anda harus memberi tanda centang ( V ) di dalam kotak yang di
sampingnya bertuliskan: "I have read...." dan seterusnya.
Akhirnya, klik tombol bertuliskan Next Step di bawahnya.
Selanjutnya anda dibawa ke
halaman yang bertuliskan ANTI-ABUSE AGREEMENT dengan beberapa kalimat
di bawahnya. Kemudian ada dua buah tombol berwarna. Pilihlah tombol
bertuliskan "I Agree" sebagai tanda persetujuan anda
terhadap isi perjanjian kontrak gratis anda dengan Freewebs.
Halaman selanjutnya tampak seperti di bawah ini.
Halaman ini meminta anda memilih
salah satu diantara dua metode pembuatan website. Cara pertama adalah Beginner
User yang disediakan untuk orang yang tidak menguasai bahasa HTML dan
belum menyediakan file-file HTML buatan sendiri. Dalam paket ini, Freewebs
akan menyediakan banyak pilihan template halaman web. User tinggal memilih
template yang diinginkan kemudian memasukkan data-data yang ingin ditampilkan
dalam halaman web itu. Sedangkan bagi anda yang sudah mempunyai file-file
HTML buatan anda sendiri, hendaknya memilih Advanced User. Klik
(hitamkan) bulatan di depannya maka akan muncul daftar isian selanjutnya di
bagian bawah halaman itu juga seperti ini:
Di kotak Public E-mail Address bisa anda masukkan
alamat email anda yang sama dengan alamat email terdahulu atau boleh juga
alamat email yang lain dan boleh pula anda kosongkan. Alamat email ini akan
digunakan nantinya untuk kebutuhan pengiriman data-data bila situs anda
menggunakan Form Submission. Sedangkan di kotak Site Category? anda
harus memilih salah satu kategori yang sesuai dengan sifat atau tema dari
situs yang anda buat. Isian selanjutnya adalah bahasa utama yang dipakai oleh
situs anda. Bila anda menggunakan Bahasa Indonesia tentunya anda harus
memberi tanda bulatan Other. Setelah semua selesai terisi klik tombol Next
Step yang terdapat di bawahnya. Bila semua cara pengisian anda betul,
selesailah sudah dan anda dibawa pada halaman "selamat datang".
Sampai di sini proses pendaftaran anda sudah
selesai. Anda boleh langsung mengirimkan atau men-transfer (upload) file-file
HTML anda atau keluar dari ruang account anda dengan mengklik Log Out pada
baris paling bawah yang terdapat di menu sebelah kiri.
Sekarang anda telah mempunyai Account di Freewebs.
Artinya anda telah memiliki sebuah ruang atau tempat di server Freewebs
sebesar 40 megabytes untuk ditempati oleh website anda. Ruang inilah yang
akan anda isi dengan file-file HTML yang telah anda buat. Proses memindahkan
file-file HTML dari hardisk anda ke hardisk host server itulah yang dinamakan
upload (pengiriman) file. Bagaimana caranya? Baiklah kita mulai dari
awal.
Bukalah website Freewebs (www.freewebs.com) pada
browser anda. Tampilannya seperti gambar pertama di atas. Pada sisi kanan
atas tampilan website ini tampak dua kotak isian yaitu Login dan Password.
Pada kotak Login tuliskan nama account (Account Name) anda yang anda buat
ketika mendaftar dahulu. Pada kotak Password ketikkan password yang juga
pernah anda ketikkan ketika mendaftar. Setelah itu klik tombol Login.
Maka akan tampaklah tampilan seperti ini:
Di situ tercantum alamat (URL) website anda
seperti http://www.freewebs.com/account_name_anda. Alamat website gratisan
seperti ini memang cukup panjang namun tidak usah khawatir; temukancara
memendekkan alamat website anda di sini. Kemudian di sebelah kiri
terdapat kotak Member Tools dengan beberapa baris menu di dalamnya.
Menu-menu inilah yang harus anda pelajari satu-persatu agar anda dapat
menggunakan dan mengatur website anda dengan sebaik-baiknya. Adapun untuk
melakukan upload file, klik link (menu) Site Manager (kira-kira pada
baris kelima). Maka anda akan dibawa ke halaman Site Manager yang seperti
ini:
Di situ terlihat bahwa di bawah kolom Filename
sudah terdapat sebuah file yang bernama index.htm. Hal ini menandakan
bahwa file yang akan menjadi halaman pertama (homepage) yang dimunculkan bila
alamat website anda dibuka harus bernama index.htm. Jadi bila anda
sudah telanjur membuat file homepage (file HTML yang menjadi halaman pertama
sebuah website) dengan nama lain maka harus anda ganti dengan nama index.htm.
Tentunya harus anda ingat bahwa penulisan kode HTML dari setiap link yang
mengarah ke halaman homepage ini juga harus anda sesuaikan.
Ada beberapa pilihan dalam membangun website anda
yang disediakan dalam Site Manager ini. Namun yang akan kita pelajari di sini
adalah Upload file dari hardisk anda ke server Freewebs. Klik link Upload a
File yang berada pada deretan terakhir (paling kanan) dari kepala tabel Site
Manager. Setelah anda klik, akan muncul jendela pop-up baru berukuran kecil
seperti ini:
Klik tombol Browse maka muncul kotak dialog
tempat anda mencari letak file-file HTML yang anda simpan. Bukalah folder
tempat anda menyimpan file-file HTML anda. Kemudian pilihlah satu file yang
hendak anda upload. Maka akan tampak pada jendela Upload tadi alamat file
anda dalam hardisk. Bila sudah betul, klik tombol Submit maka mulailah
berlangsung proses upload. Satu file telah selesai di-upload bila jendela
Upload lenyap dan halaman Site Manager tampak kembali dengan menampilkan nama
file yang tadi anda upload sudah tercantum di bawah kolom Filename.
Lanjutkanlah lagi proses upload untuk file-file lainnya dengan cara yang sama
dengan tadi. Begitu seterusnya hingga semua file-file anda telah berhasil
di-upload.
Bila proses upload selesai, cobalah melihat
hasilnya dengan meng-klik tombol Preview My Site yang terdapat di sebelah
kanan pada kepala (logo nama) situs Freewebs. Bila semuanya benar, maka akan
terbukalah sebuah jendela baru browser yang menampilkan homepage atau halaman
pertama dari situs yang anda buat. Bila tidak, maka kemungkinan besar
kesalahan terletak pada pemberian nama file homepage tadi. Ingat namanya
harus index.htm bukan index.html, apalagi yang lainnya.
Bila anda anggap selesai,
anda boleh keluar dari login anda dengan mengklik menu log-out pada
baris paling bawah dari menu Member Tools. Selamat, kini anda telah
mempunyai website sendiri. Seterusnya, jangan bosan mencoba setiap menu dari Member
Tools untuk mendapatkan pengetahuan baru tentang cara mengelola website
anda. Demikian pula anda harus rajin mengunjungi situs-situs yang menyajikan
pelajaran tentang pembuatan website. Dan jangan sungkan-sungkan untuk
bertanya kepada webmaster yang lebih berpengalaman.
Teknik Menyingkat Alamat Website
Bila anda mendaftar atau menyimpan website anda di
webhost gratis (free webhosting), biasanya anda akan mendapatkan alamat
website (URL) yang rada-rada panjang. Misalnya, bila kita mendaftar di
Freewebs maka kita akan mendapatkan alamat seperti berikut: http://www.freewebs.com/situsku. Disamping panjang, yang
tentunya agak sulit diingat, juga terkesan kurang profesional (walaupun
kenyataannya memang belum profesional). Yang jelas, alamat website yang
singkat memang memudahkan untuk diingat oleh orang lain disamping lebih
mewakili situs itu sendiri, tanpa embel-embel situs tumpangannya. Nah,
sekarang bagaimana cara kita menyingkat alamat website bagi kita-kita yang
masih "setia" menggunakan webhosting gratis?
Untunglah di internet, berbagai macam fasilitas
bisa didapatkan. Diantaranya situs yang menyediakan fasilitas untuk
menyingkat alamat website. Fasilitas semacam ini disebut URL Redirection atau
pengarah URL. Sejumlah website menyediakan fasilitas ini. Dinamakan URL
Redirection karena dengan menggunakan alamat yang singkat yang kita dapatkan
dari website tersebut, ia akan membawa kita (atau tepatnya browser kita) ke
alamat website kita yang sebenarnya. Misalnya kita mempunyai alamat website
aslinya adalah http://www.freewebs.com/buatsite. Dengan menggunakan URL
redirection kita bisa menggunakan nama lain yang lebih singkat misalnya http://buatsite.cjb.net. Bila orang mengetikkan
alamat yang singkat itu akan membawa kita ke alamat website kita yang
sesungguhnya. Canggih, kan? Tidak juga...
Disamping fungsinya sebagai penyingkat alamat
website, ada lagi kegunaan lain dari URL Redirection ini. Misalnya jika suatu
waktu anda berpindah web hosting (tempat penyimpanan website) karena satu dan
lain hal, anda tidak perlu panik. Kenapa? Karena alamat yang anda pakai dan
perkenalkan kepada para netter selama ini adalah alamat dari URL Redirection
itu. Sehingga anda cukup mengganti arah yang dituju oleh alamat singkat
tersebut ke alamat (URL) website di web hosting anda yang baru. Bisa
dipahami? Kalau belum, marilah kita langsung praktek bagaimana cara
mendapatkan alamat yang singkat itu.
Di internet cukup banyak situs yang menyediakan
layanan URL Redirection ini. Kalau tidak percaya coba ketikkan kata kunci
"URL Redirection" dalam sebuah search engine dan lihatlah hasil
pencariannya. Salah satu website penyedia URL Redirection yang cukup klasik
dan terkenal adalah yang beralamat di http://www.cjb.net. Sesuai dengan namanya
website ini menyediakan alamat dengan akhiran cjb.net seperti http://situsku.cjb.net. Situs ini kita ambil
sebagai contoh, disamping sudah terkenal, juga memiliki prosedur pendaftaran
yang relatif singkat dan mudah. Paling tidak dengan memahami cara registrasi
di CJB.NET ini kita sudah memiliki pemahaman tentang apa dan bagaimana cara
menyingkat URL dengan URL Redirection.
Buka browser anda dan pergilah ke alamat http://www.cjb.net. Dalam halaman pertama
ini terdapat tampilan seperti ini:
Ketikkan nama yang anda pilih untuk menjadi alamat
website anda pada kotak yang diantarai dengan tulisan www dan cjb.net.
Setelah itu tekan tombol Register it!. Bila nama pilihan anda itu
belum pernah terpakai, maka anda akan dibawa ke halaman formulir registrasi.
Sedangkan bila nama itu sudah dipakai, anda akan diminta lagi memasukkan nama
yang lain. Di formulir registrasi, anda harus mengisi sejumlah kotak isian
sebagai berikut:
Di kotak paling atas sudah tercantum nama yang
anda pilih. Sedangkan kotak selanjutnya adalah: What is your web site
address? (tulis alamat website anda yang sebenarnya) dan What is your
e-mail address? (tulis alamat email yang anda punyai). Gulung lagi layar
ke bawah maka akan tampak kotak-kotak isian selanjutnya sebagai berikut:
Kotak-kotak berikutnya (Forward Mail, POP3/Web
Mail, Cloak URL, dan Forward Subdomains) merupakan
fitur-fitur tambahan yang diberikan oleh CJB.NET untuk anda. Anda bisa
memilih antara menggunakan fitur tersebut (Yes) atau tidak (No).
Dengan fasilitas
Forward Mail, anda bisa membuat sekian banyak nama-nama email yang diakhiri
dengan @situs_anda.cjb.net dimana seluruh nama-nama email itu mengarah
ke alamat email anda yang sesungguhnya. Misalnya: alamat situs saya adalah: http://buatsite.cjb.net dan alamat email saya adalah adifitrah@maktoob.com. Dengan fitur Forward Mail nantinya saya bisa membuat nama-nama email
seperti webmaster@buatsite.cjb.net, info@buatsite.cjb.net, tanya@buatsite.cjb.net, yusuf@buatsite.cjb.net dan seterusnya. Dimana semua nama-nama email tersebut mengarah ke adifitrah@maktoob.com. Artinya semua email yang ditujukan/dikirimkan ke salah satu dari
nama-nama itu akan terkirim atau sampai di adifitrah@maktoob.com.
Adapun POP3 atau
Web Mail adalah fasilitas account email biasa seperti yang anda buat
di situs penyedia layanan email gratis misalnya Yahoo!, Hotmail, Popmail, dan
lain-lain. Jadi anda pun bisa memiliki account email di CJB.NET.
Sedangkan Cloak
URL adalah fitur yang berguna untuk memanipulasi penulisan alamat website
anda pada browser, yakni pada address bar (kotak alamat website) agar tetap
menampilkan alamat CJB.NET, bukan alamat web page anda yang sesungguhnya.
Demikian pula fitur Forward Subdomains bisa memanipulasi penulisan alamat
website anda agar penulisan alamat web page anda sampai ke subdirektori bisa
diganti dengan penulisan subdomain di CJB.NET.
Misalnya: http://www.freewebs.com/buatsite/promosi
bisa diwakili dengan http://promosi.buatsite.cjb.net.
Kotak Title diisi
dengan nama nama (judul) website anda. Ingat ini bukan alamat URL. Misalnya
saya mempunyai website koran Republika memiliki website dengan nama Republika
Online dengan alamat http://www.republika.co.id. Situs yang sedang anda baca ini mempunyai alamat (URL) http://buatsite.co.nr atau http://buatsite.cjb.net dan mempunyai nama (title) Panduan Membangun Website. Nama inilah
yang biasanya dipopulerkan di direktori atau portal sebagai judul dari sebuah
website.
Kotak Keywords
diisi dengan kata-kata kunci yakni kata-kata yang merupakan tema-tema
atau materi-materi utama yang dibahas dalam sebuah website, biasanya
kata-kata ini paling sering diulang-ulang. Misalnya website ini mempunyai
keywords sebagai berikut: panduan, belajar, membangun, membuat, HTML,
website, homepage, situs, halaman, web, sendiri, pribadi, pemula.
Masukkanlah kata-kata kunci untuk website anda dengan tanda koma antara satu
kata dengan kata lain. Ingat, jangan ada kata yang berulang. Misalnya anda
mempunyai website berjudul Metode Penulisan Skripsi. Anda bisa memasukkan
kata-kata kunci seperti berikut: metode, panduan, pedoman, petunjuk,
teknik, penulisan, menulis, penyusunan, menyusun, pembuatan, membuat, karya
tulis, karya ilmiah, skripsi, tesis. Penulisan keywords ini penting
karena nantinya akan dimanfaatkan oleh search engine (seperti Google) untuk
mencari halaman-halaman web yang relevan dengan yang dicari oleh seorang
netter.
Sedangkan kotak
Description merupakan uraian ringkas tentang apa isi website anda. Misalnya
website ini mempunyai deskripsi sebagai berikut: Panduan membangun website
untuk pemula; mulai dari belajar HTML, cara mendaftar di webhosting gratis,
trik memendekkan alamat URL, cara upload file, dan cara promosi website.
Pokoknya mulai dari tidak tahu sama sekali sampai memiliki website pribadi
yang ramai dikunjungi! Jadi Description ini semacam kata-kata perkenalan
kepada para netter tentang apa isi website anda.
Guestbook dan Forum adalah dua buah fasilitas tambahan yang diberikan
oleh CJB.NET. Guestbook atau Buku Tamu adalah halaman web yang
disediakan bagi para pengunjung situs anda nantinya agar mereka dapat mengisi
nama, alamat email dan komentar mereka. Daftar isian para pengunjung (tamu)
ini selanjutnya akan ditampilkan dalam halaman web itu pula. Forum hampir
sama fungsinya dengan buku tamu karena di situ para netter leluasa untuk
menuliskan apa yang mereka ingin sampaikan dalam forum tertulis tersebut.
Anda boleh memilih antara menggunakan fasilitas tersebut (Yes) atau
tidak (No). Sampai di sini selesailah tugas pengisian formulir. Gulung
lagi halaman formulir isian kita maka akan tampak tulisan sebagai berikut:
Klik tombol
panjang bertuliskan I agree.... dan seterusnya. Bila cara pengisian
anda benar dan semuanya beres, selesailah sudah proses registrasi dan
tampaklah halaman "ucapan selamat".
Sejak itu, anda telah mempunyai alamat URL baru yang lebih singkat.
Dan anda juga akan dikirimi email pemberitahuan ke alamat email yang tadi
anda masukkan ketika registrasi tentang "peresmian" alamat baru
anda ini. Selamat memperkenalkan alamat website anda ke seluruh dunia! Untuk
itu ikuti panduan selanjutnya.
MEMANFAATKAN
SEARCH ENGINE UNTUK PROMOSI WEBSITE SECARA ONLINE
Promosi website
manjadi begitu penting, karena mendatangkan pengunjung sama susahnya (bahkan
lebih susah) daripada membuat website itu sendiri. Jika Anda baru saja
berhasil membangun sebuah website, itu hanya merupakan langkah awal dari
proses web development. Karena indikator utama sukses atau tidaknya sebuah
website dilihat dari banyaknya jumlah pengunjung potensial yang datang. Dalam
hal ini, meskipun Anda memiliki website dengan desain yang mewah dan
teknologi scripting yang canggih, belumlah bisa dikatakan sukses jika
memiliki jumlah visitor yang kecil.
Banyak
pengusaha-pengusaha yang merasa kecewa karena telah menghabiskan banyak biaya
untuk membuat website perusahaan, tetapi tidak mendatangkan hasil seperti
yang diharapkan. Penjualan produk dan jasa perusahaan tidak bisa meningkat
seperti yang diharapkan. Semua ini terjadi karena mereka kurang memperhatikan
sisi promosi website, yang sebenarnya merupakan bagian termahal dari proses
web development. Dalam hal ini banyak cara yang bisa Anda lakukan untuk
mempromosikan website. Namun tutorial ini akan memfokuskan pembahasan khusus
pada pemanfaatan search engine dan direktori dengan berbagai kelebihannya.
Search Engine vs
Directory
Sebelum melangkah
lebih lanjut ada baiknya kalau Anda mengetahui apa itu search engine,
bagaimana mereka bekerja, dan apa perbedaan antara search engine dan
directory. Kenali dulu musuh yang akan Anda hadapi di medan perang, jika
ingin selamat tentunya :)
Search engine
merupakan sebuah
sistem database yang dirancang untuk meng-index alamat-alamat internet (URL,
FTP, usenet, dll). Untuk melaksanakan tugasnya ini, search engine memiliki
program khusus yang biasanya disebut spider, bot, atau crawler. Pada saat
Anda mendaftarkan sebuah alamat web (URL), spider dari search engine akan
menerima dan menganalisa URL tersebut. Dengan proses dan prosedur yang serba
otomatis, spider ini akan memutuskan apakah web yang anda daftarkan layak
diterima atau tidak. Jika layak, spider akan menambahkan alamat URL tersebut
ke sistem database mereka. Rangking-pun segera ditetapkan dengan algoritma
dan caranya masing-masing. Jika tidak layak, terpaksa Anda harus bersabar dan
mengulangi pendaftaran dengan periode tertentu. Jadi semua yang namanya
search engine, pasti memiliki program yang disebut Spider. Dan program inilah
yang sebenarnya menentukan apakah web site Anda bisa diterima atau tidak.
Contoh beberapa search engine terkenal adalah : Altavista, Google, Lycos,
Northern Light, Hotbot, dan masih bayak lagi.
Berbeda dengan directory yang meng-index halaman
web secara manual. Manual yang dimaksud adalah mereka menggunakan orang biasa
untuk menganalisa setiap halaman web yang masuk. Tidak menggunakan spider
atau crawler seperti halnya search engine. Keunggulan directory dibanding
search engine adalah memberikan hasil pencarian yang lebih relevan dengan
kualitas yang relatif lebih baik. Tapi karena semua proses dilakukan secara
manual menggunakan editor manusia, jumlah database yang dimiliki biasanya
jauh lebih kecil dibandingkan dengan search engine. Itulah sebabnya sekarang
ini banyak perusahaan yang mengelola directory menerapkan sistem ganda, yaitu
menggunakan directory + search engine. Contoh nyata adalah Yahoo yang
menggandeng Google sebagai search engine default-nya. Contoh beberapa
directory terkenal selain Yahoo adalah Open Directory Project, Looksmart, dan
NBCi.
Ok, sekarang Anda sudah mengenal sekilas perbedaan
antara search engine dan direktori. Tutorial bagian selanjutnya akan
menjelaskan bagaimana mengoptimalkan halaman web Anda (dari segi HTML),
sebelum didaftarkan ke search engine. Akan sangat baik kalau Anda sebelumnya
sudah mengerti atau pernah belajar bahasa HTML, karena yang akan dibahas pada
tutorial ini banyak berhubungan dengan teknis penulisan HTML. Bagi yang sama
sekali belum pernah mempelajari HTML, saya sarankan untuk membaca tutorialnya
terlebih dahulu. Tidak perlu secara detail, cukup dasar-dasarnya saja.
Tutorial HTML yang lumayan lengkap dapat Anda temukan di HTMLCodeTutorial.com
atau di Davesite.com.
Search Engine
Rangking
Memiliki halaman web yang enak dipandang mata,
belum tentu memberikan hasil yang baik pada search engine. Bagian pertama
dari tutorial ini menjelaskan bagaimana cara mengoptimalkan halaman web
dengan tag-tag HTML khusus, dan hal-hal apa saja yang mempengaruhi rangking
pada Search Engine.
Setiap search engine memiliki cara dan algoritma
masing-masing untuk menentukan rangking sebuah website. Tetapi beberapa poin
dibawah ini sudah umum dipakai tolak ukur oleh sebagian besar search engine,
dan pastikan kalau web site Anda memakainya.
1.
Keyword pada domain name, jika Anda memiliki website yang berisi
koleksi lagu-lagu mp3 misalnya, akan sangat baik kalau Anda menggunakan
domain www.mp3.com. Ini adalah cara kuno, tetapi sampai saat ini masih tetap
dipakai oleh search engine.
2.
Keyword pada nama file, misalnya Anda memiliki halaman web yang berisi
informasi mengenai hotel di bali, sebaiknya disimpan dengan nama
bali-hotels.html, ini juga akan mempengaruhi rangking.
3.
Keyword pada page title, tag <title> pada halaman HTML sangat
penting untuk dioptimalkan. Usahakan agar title yang digunakan mengandung
keyword yang relevan dengan isi halaman web.
4.
Keyword pada headline, bagi Anda yang sudah menguasai HTML tentu
mengenal tag <H1>,<H2>, dst. Tag headline sangat baik dipakai
untuk judul sebuah paragraf, misalnya : <H1>Hotels in Bali</H1>.
Headline sangat diperhitungkan oleh Search Engine.
5.
Gunakan keyword yang relevan pada meta tag, janganlah menggunakan
keyword yang sama sekali tidak ada hubungannya dengan isi halaman web Anda.
Hal ini bisa dideteksi oleh search engine dan akan dianggap spamming.
6.
Keyword pada page content, keyword yang diharapkan harus terdapat
pada isi halaman web. Gunakan juga frase atau kata-kata lain yang berhubungan
dengan keyword utama.
Meta tags, adalah tag-tag HTML khusus yang digunakan untuk menggambarkan keseluruhan dari isi web Anda. Meta tag akan kita bahas secara khusus di bagian berikutnya.
7.
Link Popularity, adalah jumlah halaman web lain yang memasang link ke
web site Anda. Beberapa search engine utama sangat memperhatikan hal ini.
Semakin besar link popularity suatu web site, rangkingnya akan semakin
tinggi.
Itulah beberapa poin umum yang nantinya akan
dibahas lebih mendalam. Jika web site Anda sudah dioptimalkan sesuai dengan 8
poin tersebut, dijamin akan mendapat rangking yang baik pada search engine.
Penggunaan Meta Tag
Ada banyak meta
tag sesuai dengan standar HTML 4.0 dari World Wide Web Consortion, tapi
sebenarnya yang betul-betul dipakai oleh search engine hanya 3, description,
keyword, dan robots.
Meta Tag
Description
Meta tag
description digunakan untuk memberikan gambaran umum mengenai isi dari
halaman web Anda. Ukurannya disarankan tidak lebih dari 200 karakter. Dan
usahakan agar description ini bisa menjadi kalimat-kalimat yang letaknya di
awal halaman web page yang bersangkutan. Contoh penulisan meta tag
description adalah sebagai berikut :
<meta
name="description" content="Promosi-web.com is a search engine
tutorial that explain how to get top rangking in all major search engine and
get high traffic for your web site. Available in Bahasa Indonesia.">
Beberapa search
engine seperti Nothern Light dan Google tidak memakai meta tags sebagai
deskripsi hasil pencariannya. Yang mereka gunakan adalah kalimat-kalimat awal
yang ada pada halaman tersebut. Itulah sebabnya kenapa saya sarankan agar
Anda menggunakan isi dari meta tag description sebagai kalimat pembuka. Dan
jika bagian paling awal dari web Anda berupa sebuah menu, maka deskripsi yang
ditampilkan pada hasil pencarian Northern Light adalah seperti ini :
Home | Products
and Service | Contact Us | About Us ...welcome to our online store, the best
place on the web to...
Meta Tag Keyword
Meta tag keyword
sangat penting keberadaannya, karena menentukan kata kunci apa yang bisa
menemukan halaman web tersebut pada search engine. Sintak dasar dari meta tag
keyword adalah sebagai berikut :
<meta
name="keywords" content="keyword1 keyword2 keyword3
...">
atau ada juga
yang menulis dengan pemisah tanda koma :
<meta
name="keywords" content="keyword1, keyword2, keyword3, ...>
Keduanya
berfungsi sama dan tidak ada pengaruhnya pada search engine. Tujuan pemakaian
tanda koma agar keyword-keyword tersebut lebih mudah dibaca. Yang perlu
diperhatikan disini adalah jangan mengulang sebuah kata lebih dari 3 kali,
karena akan dianggap spamming. Contoh pemakaian meta tag keyword yang salah
adalah :
<meta
name="keywords" content="bali, bali hotels, travel in bali,
bali island, bali weather>
Disini terlihat
sekali bahwa kata "bali", diulang lebih dari 3 kali. Contoh berikut
ini tidak akan dianggap spamming oleh search engine :
<meta
name="keywords" content="bali hotels travel bali island bali
weather">
Yang tak kalah
pentingnya mengenai keyword adalah jangan membuat keyword yang tidak ada
hubungannya dengan isi halaman web Anda. Hal ini juga akan dianggap spamming.
Misalkan web Anda memuat informasi mengenai pariwisata di Bali, jangan
sekali-kali menambahkan "MP3" atau "Britney Spears"
sebagai keyword hanya karena keyword-keyword ini merupakan keyword favorit di
internet dan banyak dicari orang.
Meta Tag
Robots
Tujuan utama
penggunaan meta tag robots adalah untuk menentukan halaman web yang mana bisa
di-index oleh spider dan halaman web mana yang tidak. Tag ini sangat berguna
sekali terutama jika seuatu website memakai frame untuk navigasinya. Tentunya
kita tidak ingin menampilkan menu-menu dalam frame untuk dibaca oleh search
engine. Format dasar dari meta tag robots adalah sebagai berikut :
<meta
name="robots" content="index | noindex | follow |
nofollow">
Sebagai contoh,
jika Anda ingin agar spider membaca main page, dan menelusuri semua link yang
ada maka tambahkan perintah berikut ini :
<meta
name="robots" content="index follow">
Dengan perintah ini spider akan
meng-index main page Anda dan menjadwalkan untuk mengindex halaman-halaman
lain yang bisa dicari melalui hyperlink (<a href="">).
Perintah berikut ini akan menginstruksikan agar spider tidak meng-index maupun menelusuri link yang ada pada suatu halaman web.
<meta
name="robots" content="noindex nofollow">
Ok, setelah
mengetahui tentang meta tag, bagian selanjutnya akan membahas mengenai
penyusunan content/isi halaman web yang search engine friendly.
Pengoptimalan
website content
Content adalah
raja. Itulah kunci sukses untuk mendapatkan rangking yang tinggi pada search
engine. Bagian ini akan menjelaskan bagaimana merancang isi halaman web yang
search engine friendly. Namun tetap harus dijaga, agar visitor Anda betah
membacanya.
Satu hal yang
perlu diingat adalah website yang Anda miliki dirancang untuk visitor, bukan
untuk search engine. Janganlah terlalu berlebihan hanya karena ingin mendapat
rangking yang tinggi, tapi justru membuat isi halaman web tidak enak untuk
dibaca. Jika hal ini tidak Anda perhatikan, maka visitor hanya akan datang
sekali saja dan mereka akan enggan untuk berkunjung lagi. Langkah pertama,
susunlah isi web Anda secara biasa. Buat kalimat-kalimat yang menarik dan
enak untuk dibaca. Tetapi usahakan agar keyword-keyword pada meta tag,
terpakai pada kalimat-kalimat di awal paragraf. Jagalah agar topiknya tidak
terlalu meluas dan tetap spesifik. Sebuah halaman web yang baik hanya berisi
dua sampai tiga fokus bahasan. Kalau dalam pelajaran Bahasa Indonesia, ini
disebut pokok pikiran yang menjiwai sebuah karangan :) Ok, langkah
selanjutnya optimalkan halaman web Anda dengan tips-tips berikut ini.
1.
Perhatikan penggunaan gambar. Hindari penggunaan gambar/image yang terlalu berat pada web Anda.
Usahakan agar ukuran halaman web + gambar tetap dibawah 64 kb. Gunakan
software-software seperti Adobe Photoshop (menu file - save for web) untuk
mengoptimalkan gambar. Penggunaan Flash dan Java yang berlebihan sebaiknya
dihindari.
2.
Hindari pemakaian frame. Frame memang baik dipakai sebagai navigasi, tetapi bisa
membingungkan search engine. Halaman utama frameset biasanya tidak berisi
content apa-apa. Kalaupun Anda terpaksa menggunakan frame, ingatlah
mencantumkan tag <noframe></noframe> dan tuliskan rangkuman dari
isi halaman web Anda pada tag tersebut agar search engine yang tidak
mendukung frame masih bisa membacanya.
3.
Rancanglah agar web Anda bisa dibaca
oleh semua browser. Halaman web yang tampak cantik di
Internet Explorer kadang-kadang hanya tampak blank pada Netscape Navigator.
Hati-hatilah dengan hal ini karena bisa menurunkan rangking pada search
engine. Bukankah kecantikan itu juga relatif bagi setiap orang :)
4.
Gunakan keyword utama pada title
halaman web. Isi dari tag <title></title>
sangat berpengaruh pada rangking search engine. Rancanglah sebuah title yang
menarik untuk dibaca dan jaga agar ukurannya tidak melebihi 70
karakter.
5.
Usahakan agar halaman web Anda
memakai page headline (H1-6), dan gunakan keyword utama sebagai
<H1>healine</H1>.
6.
Hindari pemakaian font yang terlalu
kecil <font size="1"> dan susah dibaca.
7.
Jika Anda memasang image ingatlah
agar selalu melengkapinya dengan atribut alt. Beberapa search engine menggunakan alt tag sebagai pedoman relevansi
hasil pencarian. <IMG SRC="gambar.jpg" ALT="tambahkan
beberapa keyword utama disini">.
Meskipun tidak banyak, beberapa search engine juga membaca comment tag. Isilah comment tag Anda dengan beberapa keyword yang relevan.
8.
Beberapa search engine utama seperti
Altavista dan Google memberikan poin lebih banyak untuk paragraf-paragraf
yang letaknya di awal. Jadi seperti yang sudah disebutkan sebelumnya,
usahakan memakai keyword-keyword andalan Anda di awal halaman.
Doorway Page
Memang agak susah
untuk mengoptimalkan halaman web sesuai dengan ketujuh tips yang diberikan
sebelumnya. Terutama dari segi content. Apalagi jika Anda membuat web untuk
sebuah perusahaan. Semua content (kalimat/paragraf) sudah diberikan apa adanya.
Anda tidak mungkin merubahnya dengan begitu saja. Begitu juga untuk web-web
semacam portal yang isi beragam. Walaupun halam index-nya sudah Anda
bolak-balik, tetap saja susah mendapat posisi bagus untuk keyword tertentu.
Jika menghadapi situasi seperti ini, saatnya Anda menggunakan doorway
page.
Doorway page
adalah sebuah halaman web yang dibuat untuk menonjolkan satu sampai dua
keyword saja. Satu atau dua keyword tersebut akan menjadi inti pembicaraan
dari sebuah halaman, sehingga search engine akan menganggap isi halaman
tersebut lebih relevan. Dari doorway page ini, bisa dipasang link yang
mengarah ke halaman index yang sebenarnya. Sebut saja Anda memiliki website
www.promosi-web.com, tetapi halaman indexnya sudah tidak bisa dioptimalkan
lagi. Untuk itu Anda harus membuat sebuah doorway page bernama promosi.html,
karena "promosi" adalah keyword yang Anda harapkan. Halaman mana
yang harus Anda submit ke search engine ? Tentu saja
http://www.promosi-web.com/promosi.html. Tapi sekali lagi saya ingatkan,
pakailah doorway page hanya jika terpaksa. Alangkah baiknya kalau Anda bisa
mengoptimalkan halaman index yang asli.
Jika Anda sudah
memutuskan untuk membuat doorway page, perhatikanlah langkah-langkah berikut
ini.
1.
Putuskan untuk keyword apa doorway
page tersebut akan dibuat. Pilih satu sampai tiga kata yang Anda anggap
paling potensial dan berhubungan dengan web Anda.
Optimalkan title, meta description, dan meta keyword-nya, sesuai dengan keyword utama yang Anda pilih.
2.
Mulailah membuat content yang panjangnya
minimal 3 paragraf. Jangan membuat halaman yang terlalu pendek, karena
beberapa search engine seperti Altavista dan Northern Light akan
memprioritaskan halaman yang kaya akan content. Usahakan agar keyword-keyword
yang Anda pilih dipakai pada setiap paragraf.
3.
Jika menggunakan gambar, jagalah
agar ukurannya tidak terlalu besar dan isi bagian alt-nya dengan keyword yang
Anda pilih.
4.
Simpan halaman web Anda dengan nama
yang sebenarnya, contoh : promosi.html, jangan disimpan dengan nama
index1.htm atau index2.html.
Sekarang semuanya
sudah siap. Anda sudah bisa mulai mendaftarkan website Anda ke berbagai
search engine utama. Tapi sebelumnya baca dulu bagian selanjutnya dari
tutorial ini yang akan memberikan sedikit tips agar pendaftaran Anda berhasil
dengan baik.
Submit ke Search
Engine
Sekarang tibalah
saatnya mendaftarkan website Anda ke search engine. Bacalah baik-baik tips
pada halaman ini agar pendaftaran berhasil dengan baik.
Setiap search
engine mempunyai aturan tersendiri dalam menerima website. Saya sarankan agar
Anda membaca dengan seksama aturan yang mereka berikan. Jangan pernah berani
melanggar, karena hanya akan membuang-buang waktu Anda. Lihat juga berapa
jumlah maksimal halaman web yang bisa Anda daftarkan sekaligus dalam sekali
waktu. Search engine yang memiliki kemampuan deep crawler seperti Google,
akan mampu menelusuri setiap link yang ada pada sebuah halaman web. Jadi Anda
tidak perlu men-submit setiap halaman satu persatu, cukup indexnya saja.
Saat ini ada
lebih dari 1000 search engine yang bertebaran di internet. Tapi dari sekian
banyak tersebut hanya beberapa saja yang memiliki database besar dan lengkap.
Sebut saja 3 pemain utama, Google, Inktomi, dan AllTheWeb. Tiga search engine
ini memiliki database yang sangat besar dan banyak dipakai sebagai secondary
result pada search engine lainnya. Misalnya database Google dipakai oleh
Yahoo, Inktomi membackup MSN dan AOL search, dan AllTheWeb dipakai Lycos.
Saat ini banyak
situs yang menawarkan jasa submit ke search engine secara otomatis. Sekali
mengisi form, web site Anda bisa didaftarkan ke 30 search engine sekaligus
(bahkan lebih). Cara ini memang sangat menghemat waktu, tapi tidak bisa
terjamin keberhasilannya. Sekarang ini banyak search engine yang menonak
pendaftaran secara otomatis melalui program submitter. Contohnya adalah
altavista. Anda diwajibkan untuk memasukkan kode pendaftaran dengan benar
sebelum bisa men-submit halaman web ke database Altavista. Kode tersebut
dihasilkan secara otomatis dalam bentuk image acak, sehingga benar-benar
perlu ketelitian untuk membacanya. Meskipun banyak menghabiskan waktu, tetapi
submit secara manual masih jauh lebih aman. Atau sebagai alternatif, carilah
program submitter yang bisa menampilkan submission result secara langsung,
tidak hanya mengeluarkan output berhasil atau gagal, namun tanpa bukti. Saat
ini Promosi-web.com sudah menyediakan submitter semi otomatis yang bisa
mendaftarkan website Anda ke beberapa search engine secara cepat. Submission
result bisa dilihat secara langsung, sehingga Anda tidak perlu ragu tentang
keberhasilannya.
Keadaan koneksi
internet juga harus diperhatikan. Jangan men-submit pada saat koneksi
internet lambat. Persentase kegagalan bisa lebih besar. Submitlah website
Anda diluar jam-jam sibuk, yang bisa menjamin koneksi secara lancar.
Sekarang website
Anda sudah didaftarkan ke berbagai search engine utama. Apakah semuanya sudah
selesai...? Tentu saja belum. Anda harus mendaftarkannya lagi ke Yahoo, Open
Directory Project, dan beberapa directory besar lainnya. Jika sebelumnya Anda
berhadapan dengan search engine spider, sekarang Anda berhadapan dengan
editor manusia. Kalau ingin terdaftar, ikuti aturan mereka dan berikan yang
terbaik yang bisa disajikan website Anda. Bagian selanjutnya akan membahas
mengenai beberapa hal yang harus Anda perhatikan sebelum mendaftarkan website
ke berbagai directory utama.
Submit ke Directory
Yahoo! dan Open
Directory Project adalah dua direktori terbesar yang sangat potensial untuk
menaikkan traffic website Anda. Ingatlah bahwa direktori menggunakan editor
manusia untuk menerima website. Bagian ini akan menjelaskan apa saja yang
perlu diperhatikan sebelum mendaftarkan website ke beberapa directory utama.
Anda sekarang
mungkin sudah mempunyai doorway page yang sempurna dengan meta tag yang
terbaik di dunia. Tetapi berhati-hatilah, karena yang Anda hadapi bukanlah
sebuah spider, tetapi seorang editor manusia seperti Anda. Semua taktik dan
strategi jitu untuk search engine tidak akan berlaku disini. Apa yang bisa
Anda lakukan...? Bacalah tips-tips dibawah ini dan bandingkan dengan keadaan
website Anda yang sekarang.
1.
Usahakan agar website Anda mempunyai
domain name sendiri. Sebagian besar website yang diterima di Yahoo! memakai
top level domain, dan hanya sebagian kecil saja yang memakai sub domain yang
dapat diterima (kecuali website Anda memiliki content yang unik).
2.
Nama domain sebaiknya mencerminkan
isi dari website Anda.
3.
Pastikan tidak ada broken link,
gambar yang tak bisa tampil, atau javascript error pada halaman web Anda.
Jangan mensubmit website yang belum 100% siap.
4.
Setiap direktori memiliki aturannya
masing-masing. Bacalah aturan tersebut sebelumnya agar website Anda terhindar
dari diskualifikasi.
5.
Daftarkan website Anda pada kategori
yang tepat dan paling spesifik. Lihat juga berapa website yang sudah
terdaftar pada kategori tersebut. Usahakanlah mencari category dengan jumlah
pesaing yang paling sedikit.
6.
Daftarkan hanya halaman utama saja.
Jika Anda mendaftarkan halaman-halaman lain yang merupakan sub dari halaman
utama kemungkinan besar akan ditolak. Kecuali halaman tersebut benar-benar
memiliki content yang langka.
7.
Perhatikan berapa lama Anda bisa
men-submit ulang website Anda (misalnya 2 bulan). Jika belum terdaftar,
lakukan submit ulang dalam jangka waktu tersebut.
Disini kesabaran
Anda benar-benar diuji. Yahoo setiap harinya menerima pendaftaran lebih dari
10 juta situs. Sedangkan yang bisa ditangani oleh editornya sekitar 5 sampai
10 persennya saja. Jadi bersabarlah untuk melakukan submit ulang dalam jangka
waktu yang telah ditentukan. Kalau ingin cepat, Anda bisa memakai fasilitas
submission express. Dijamin website Anda akan direview dalam waktu 2-7 hari.
Tetapi Yahoo mengenakan biaya $US 299 per tahun, untuk fasilitas ini. Ini
hanya jaminan agar website Anda di-review lebih cepat, bukan jaminan untuk
diterima. Saat ini Yahoo melakukan review untuk sebuah website bisnis setahun
sekali, dan untuk sekali review dikenakan biaya $US 299. Memang bukan jumlah
yang sedikit, apalagi untuk perusahaan-perusahaan berskala kecil.
Perlu diingat disini bahwa tujuan Yahoo menerima website Anda bukan untuk membantu mengingkatkan visitor website Anda, melainkan untuk melengkapi koleksi link pada direktori yang mereka miliki. Jadi peluang Anda untuk terdaftar akan lebih besar, jika Anda bisa memberikan website dengan isi yang unik dan belum ada/sedikit jumlahnya pada direktori mereka. Adalah suatu anugrah yang sangat indah apabila website Anda bisa diterima di Yahoo secara gratis untuk saat ini. Bukan apa-apa, karena hal itu menjadi sangat sulit sejak Yahoo mengubah kebijakannya di akhir tahun 2001. Apalagi website Anda tergolong website bisnis, hanya submission express yang bisa menyelamatkan Anda.
Saat ini Yahoo!
masih merupakan directory yang paling ramai (mengusai 25,4% dari seluruh
pengguna internet) ditambah dengan Google sebagai search engine default-nya
(menguasai 5% dan terus meningkat). Tetapi ada hal yang menarik. AOL,
Altavista, Netscape, dan Lycos, jika digabung mengusai 40,5% dari pengguna
search engine di seluruh dunia. Keempat search engine ini memakai database
dari Open Directory Project (ODP). Jadi akan sangat menguntungkan jika
website Anda juga terdaftar di ODP (http://dmoz.org/). Direktori lainnya yang
juga harus diperhatikan adalah Looksmart. Database Looksmart dipakai sebagai
main result di MSN, Altavista, Excite, dan iWon. Tetapi Anda harus
mengeluarkan uang sebesar $US 149 untuk bisa terdaftar di LookSmart Network.
Tentang Link
Popularity
Setelah
men-submit website Anda ke berbagai search engine dan directory utama, apa yang
akan Anda lakukan ? Apakah semuanya sudah cukup dan Anda tinggal menunggu
hasil ? Tentu saja tidak. Sambil menunggu hasil pendaftaran yang berkisar
antara 2 minggu hingga 3 bulan, Anda bisa meningkatkan link popularity dari
website Anda. Link popularity adalah banyaknya website lain yang memasang
link mengarah ke website Anda. Semakin besar link popularity, maka rangking
website Anda di search engine akan semakin tinggi.
Google adalah
salah satu search engine yang sangat memperhatikan link popularity. Bahkan
faktor ini bisa menjadi yang paling penting. Menurut analisa Google, semakin
banyak suatu website di-link, tentu content-nya semakin baik juga. Dan yang
lebih istimewa lagi, Google bisa menganalisa darimana datangnya link
tersebut. Link dari Yahoo ataupun Open Directory akan lebih berarti daripada
link dari website lain. Jadi bukan hanya sekedar jumlah link yang
diperhitungkan, melainkan juga kualitasnya. Oleh Google, teknologi ini
disebut sebagai PageRank, yaitu suatu teknologi yang bisa memperhitungkan
seberapa baik kualitas dari sebuah halaman web.
Seorang teman
pernah bertanya kepada saya. Mengapa website saya yang desainya sudah
dioptimalkan untuk search engine, rangking-nya tetap berada dibawah website
pesaing saya yang desainnya biasa-biasa saja ? Jika Anda juga punya
pertanyaan seperti ini jawabannya adalah karena perbedaan link popularity.
Saya sendiri pernah menjumpai sebuah website yang desainnya hanya dipenuhi
gambar-gambar dan flash, tetapi bisa menduduki posisi 10 besar di Google.
Setelah diselidiki ternyata halaman ini banyak di-link oleh website lain yang
juga memiliki link popularity tinggi.
Bagaimana caranya
mengetahui besarnya link popularity sebuah website ? Mudah saja, untuk google
Anda tinggal memasukkan sintak "link:www.namadomain.com" pada kotak
search. Misalnya jika Anda ingin mengetahui link popularity dari
Promosi-web.com, Anda tinggal memasukkan
"link:www.promosi-web.com". Setelah itu Google akan menampilkan
seluruh website yang memasang link ke Promosi-web.com, sama seperti hasil
pencarian biasa. Tetapi ada cara yang jauh lebih mudah, yaitu dengan
menggunakan tools link popularity checker. Tools ini banyak tersedia di
internet, dan salah satu yang paling saya suka adalah Link Popularity Checker
dari MarketLeap. Disini Anda bisa mencari jumlah link popularity website
Anda, sekaligus membandingkannya dengan website pesaing. Bukan hanya google,
tetapi result dari berbagai search engine utama.
Untuk
meningkatkan link popularity Anda bisa mengadakan barter link dengan website
lain isinya berkaitan dengan website Anda. Dalam hal ini janganlah merasa
gengsi untuk bertukar link. Anda bisa menghubungi webmaster dari website yang
akan diajak barter link. Tawarkan kepadanya apa manfaat dari barter link, dan
katakan juga bahwa content dari website Anda berhubungan dengan website yang
dia miliki. Cara lainnya adalah rajin-rajinlah mengisi guestbook. Pada
guestbook tersebut, Anda bisa menambahkan URL website Anda yang tentunya juga
akan menambah link popularity. Tapi ingat, jangan pernah melakukan
spamming.
Fasilitas Gratis
untuk Promosi Web Site
Berita dan Isu Seputar Search Engine. Bagian ini memuat berbagai berita dan isu-isu terbaru di dunia
search engine. Beberapa pertanyaan yang paling sering dilontarkan pengunjung
Promosi-web.com juga akan dibahas pada bagian ini.
Barter link. Jika Anda sudah
membaca bagian link popularity, pastilah sudah mengerti apa manfaat dari
barter link. Selain untuk untuk meningkatkan jumlah pengunjung, juga untuk
menambah link popularity dari website Anda di berbagai search engine utama.
Jika Anda memiliki/mengelola website apa saja, baik itu personal web, bisnis,
maupun website organisasi, saya mengundang Anda untuk melakukan barter link
dengan Promosi-web.com.
Pendaftaran gratis ke 5 search engine sekaligus. Alat ini akan membantu Anda untuk melakukan pendaftaran ke 5 search
engine secara cepat. Dengan sekali mengisi form, data website Anda bisa
digunakan untuk melakukan pendaftaran ke AllTheWeb, Google, Hotbot UK,
2kCity, dan WhatYouSeek Network. Sebelum menggunakan submitter ini saya
sarankan agar Anda membaca halaman tips untuk pendaftaran ke search engine,
supaya hasilnya bisa lebih optimal.
IP Detector. IP (Internet
Protocol) bisa diibaratkan sebagai kode unik yang dimiliki setiap
server/komputer yang terhubung ke Internet. Kode ini berupa sederetan angka
dengan format tertentu, misalnya 202.154.2.25. Setiap server memiliki nomer
IP yang berbeda-beda. Sama halnya dengan setiap penduduk Indonesia yang
memiliki KTP dengan nomer berbeda-beda. Saat ini hampir semua script server
side (seperti PHP, Perl, ASP), bisa digunakan untuk mendeteksi IP dari
pengunjung. Namun IP tersebut hanyalah berupa sederetan angka, bagaimana kita
bisa mendapatkan informasi dari angka-angka ini ? Tools IP detector ini akan
membantu Anda untuk mendapatkan informasi kode dan nama negara dari sebuah
IP. Anda tinggal memasukkan nomer IP dengan format yang benar, kemudian code
dan nama negara akan ditampilkan sebagai outputnya. Tools ini sangat membantu
apabila Anda ingin mengetahui dari negara mana pengunjung website Anda
berasal, sedangkan website Anda hanya bisa mendeteksi nomer IP-nya saja.
Prosedur
Pendaftaran di Direktori (Portal) dan Search Engine
Dalam tulisan
berikut ini kita akan membahas tentang cara mendaftarkan website kita di dua
buah portal. Yang satu adalah portal internasional (tentunya berbahasa
Inggris) bernama DMOZ atau Open Directory Project (ODP) yang beralamat di http://dmoz.org. Sedang yang satunya adalah portal nasional atau portal Indonesia
bernama Search Indonesia yang beralamat di http://www.searchindonesia.com. Dengan mendaftar di Open Directory (DMOZ), bila pendaftaran anda
diterima, anda akan sekaligus dimasukkan ke dalam database sejumlah search engine
besar yang terkenal seperti: Google, Altavista, AOL Search, HotBot, Lycos dan
lain-lain. Search engine Yahoo! pun sudah termasuk karena Yahoo! juga
menggunakan database Google.
Mendaftar di Open
Directory (DMOZ)
Kita mulai dari
Open Directory. Pergilah ke situs Open Directory di http://dmoz.org. Tampilan awalnya tampak sebagai berikut:
Klik link suggest
URL yang terdapat di bagian atas yaitu di banner DMOZ. Anda akan dibawa
ke halaman yang berisi penjelasan tentang peraturan atau tata cara mengajukan
pendaftaran website (How to suggest a site to the open directory).
Bila anda sedikit (apalagi banyak) bisa berbahasa Inggris, ada baiknya anda
membaca peraturan ini dengan saksama. Diantara point-point peraturan yang
penting untuk kita ketahui adalah:
1.
Jangan mendaftar dengan nama URL
Redirection, gunakan URL asli dari webhosting anda.
2.
Kangan mendaftar website yang belum
selesai, ada halaman yang sedang dikerjakan atau ada link yang terputus.
3.
Bila website anda menggunakan bahasa
utama selain Bahasa Inggris, maka daftarkanlah dalam kategori World.
Setelah anda
setuju dengan semua peraturan yang dijelaskan di halaman ini kemudian anda
mengklik link Proceed to the Open Directory home at dmoz.org untuk
memulai proses pendaftaran, anda akan kembali dibawa ke halaman depan
(homepage) dari DMOZ yang tergambar di atas. Di situ anda harus mencari dan
menelusuri kategori dan sub kategori yang paling tepat (sesuai) untuk website
yang telah
anda buat. Mengingat point ketiga yang kami sebutkan di atas, bila situs anda
berbahasa Indonesia, maka kategori pertama yang harus anda masuki adalah link
World yang terdapat pada deretan link terbawah. Klik link World.
Anda akan dibawa ke daftar sejumlah link bahasa-bahasa
yang terdapat di seluruh dunia yang dirunut sesuai abjad. Angka-angka yang
terdapat dalam tanda kurung di belakang setiap link kategori merupakan jumlah
website yang telah terdaftar dalam Open Directory untuk kategori tersebut.
Carilah link Indonesia. Setelah ketemu, klik link tersebut. Anda akan
dibawa ke halaman selanjutnya yang merupakan hirarki pertama dari daftar
kategori dalam kelompok website Indonesia.
Di sini terdapat sejumlah kategori seperti Belanja,
Berita, Bisnis, Kesehatan dan seterusnya. Pilihlah
kategori yang paling sesuai untuk website anda. Dalam hal ini kami mengambil
website ini (BuatSite) sebagai contoh. Untuk website ini kami memilih
kategori Komputer. Setelah link Komputer diklik, kita akan dibawa ke
hirarki kategori selanjutnya yang di dalamnya terdapat sejumlah sub kategori
seperti Hacking, Internet, Konsultan, Linux dan
seterusnya. Di sini kami mengklik link Internet yang membawa kita ke
hirarki kategori selanjutnya. Sub kategori yang terdapat di halaman ini
antara lain Berita Online, Chat, Layanan Email, Layanan
Web dan lain-lain seperti tampak di bawah ini:
Andaikata saya ingin mendaftarkan website saya
sampai di kategori Internet saja, tidak memasuki sub kategori yang
lebih dalam, maka sampai di sini saya langsung mengklik link tambah URL
yang terdapat di bagian atas (banner). Bila anda ingin melihat situs-situs
mana saja yang telah terdaftar dalam kategori (kelompok) Internet,
gulunglah layar ke bawah maka di situ anda akan melihat daftar nama-nama
situs, lengkap dengan deskripsi (penjelasan ringkas) tentang isi
masing-masing situs. Bila anda ingin mendaftar dalam sub kategori yang lebih
dalam, klik link sub kategori yang dimaksud kemudian klik link tambah URL seperti
yang telah dijelaskan tadi. Setelah anda mengklik link tambah URL tersebut,
anda akan dibawa ke halaman Submit a site to the Open Directory. Di
halaman ini anda diminta untuk mengisi formulir registrasi (pendaftaran).
Hanya ada empat kotak yang harus anda isi dengan baik dan benar.
1.
Site URL. Masukkan alamat (URL) website anda. Ingat alamat yang dimaksud
adalah alamat asli dari webhosting tempat anda menyimpan file-file website
anda. Jadi jangan memasukkan alamat URL Redirection.
2.
Title of Site. Tuliskan nama (judul) dari website anda. Istilah "Title"
ini sudah dijelaskan pada pelajaran di halaman 10 yang lalu.
3.
Site Description. Ketikkan uraian ringkas tentang isi website anda. Inipun sudah
dijelaskan di halaman 10.
4.
Your E-Mail Address. Tuliskan alamat email yang anda miliki.
Setelah semua kotak-kotak isian telah anda isi
dengan benar, klik tombol Submit yang terdapat pada bagian paling
bawah. Bila semua isian anda benar, maka di halaman selanjutnya anda akan
mendapati tulisan Submission Received yang menyatakan bahwa pengajuan
pendaftaran website anda telah diterima. Hal ini bukan berarti website anda
telah diterima dan akan dimasukkan dalam direktori DMOZ. Kita masih harus
menunggu beberapa minggu atau bulan untuk proses verifikasi. Itupun bila
website yang anda ajukan dianggap memenuhi syarat dan layak dimasukkan dalam
direktori DMOZ. Website yang biasanya dianggap layak pajang adalah website
yang tidak memiliki cacat serius dari segi teknik pembuatan website serta
memiliki isi (content) yang cukup khas karena mengandung materi atau
informasi yang masih jarang ditemukan di internet.
Mendaftar di Portal SearchIndonesia
Portal SerchIndonesia memiliki konsep pendaftaran
website yang mirip dengan Open Direcotry. Buka situs SearchIndonesia di http://www.searchindonesia.com. Tampilan awalnya tampak
sebagai berikut:
Pada kolom menu sebelah kiri di bawah judul siTools
terdapat link untuk mengajukan pendaftaran situs yaitu Tambah URL.
Klik ini maka anda akan dibawa pada halaman berjudul Tambah URL, bagaimana
caranya? Hal ini berisi penjelasan tentang tata cara mendaftar di
SearchIndonesia. Bila sudah paham, klik link kembali ke halaman awal.
Karena di halaman awal tadi, anda disuruh memilih kategori atau kelompok yang
pas untuk situs anda. Persis seperti pendaftaran di DMOZ, kan? Telusurilah
link-link kategori yang tersedia (seperti di DMOZ) untuk mencari kategori
yang cocok untuk situs anda.
Setelah anda memasuki halaman kategori yang anda
pilih, klik link Tambah URL yang terdapat pada kolom menu sebelah kiri
seperti tampak pada gambar di atas. Barulah anda di bawah ke formulir
pendaftaran seperti yang tampak di bawah ini:
Ada empat kotak yang harus anda isi yaitu Judul
(Title), URL, Deskripsi (Description), Nama Kontak (isi
dengan nama anda) dan Email Kotak (isi dengan alamat email anda).
Keempat item yang harus diisi itu tentunya sudah sangat jelas bagi anda
karena telah pernah dijelaskan. Setelah anda mengisi semuanya dengan benar, klik
tombol Kirim. Selesailah sudah tugas anda. Tampak halaman selanjutnya
berisi ucapan terima kasih dan data-data yang telah anda masukkan tadi.
Sekarang anda tinggal menunggu berita dari SearchIndonesia yang akan
dikirimkan ke email anda bila website anda diterima untuk dimasukkan dalam
direktori.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Connect
via Meebo
0 comments:
Post a Comment