BELAJAR MEMBUAT WEBSITE
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:
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. |
Bila anda sudah menyimpannya, bukalah dan lihatlah hasilnya dalam program
browser.
