menjadi trend. Ribuan bahkan jutaan website kini telah meramaikan dunia maya
seiring dengan perkembangan internet. Bila telah terhubung dengan internet, sebuah
perusahaan dapat mempromosikan produknya ke segala penjuru dunia lewat website
perusahaan.
Kita pun bisa membuat website seperti itu sendiri dengan bantuan software
web developer yang sudah ada seperti Microsoft Frontpage atau Macromedia
Dreamweaver. Kalaupun program tersebut tidak terinstal di komputer anda, asalkan
ada program Notepad, Internet Explorer, atau web browser sejenis anda masih bisa
membuat web pribadi anda.
Berikut ini
saya jelaskan langkah langkah untuk membuat website sederhana buatan anda sendiri.
Ikuti terus ya !
1. Klik Start > All Program > Accessories > Notepad untuk membuka program
Notepad.
2. Di Notepad ini nanti
kita akan mengetik tag HTML untuk membuat sebuah halaman web.
3. Sebuah halaman web terdiri dari dua bagian, yaitu bagian kepala dan badan.
Bagian kepala memberi nama website kita, sedangkan bagian badan berisi
halaman inti sebuah web. Bagian kepala dan bagian badan ini nantinya akan
membentuk sebuah kesatuan halaman website yang akan kita buat. Tuliskan tag
tag berikut dalam Notepad untuk membuat bagian kepala dan badan web.
#html
#head
#title
Website Saya
#/title
#/head
#body
Selamat datang di website saya
#/body
#/html
#html, head, title, body, /html, /head, /title, /body
@Dimana disetiap kata tersebut diapit oleh kurung lancip " < > ".
adalah beberapa contoh tag yang dipakai untuk membangun sebuah halaman
website. Pada contoh di atas terlihat bahwa setiap tag mempunyai pasangan
yang ditambahi dengan tanda slash (/). Perlu diingat bahwa tidak semua tag
mempunyai pasangan seperti contoh di atas, dan tag tag yang tidak mempunyai
pasangan akan kita bahas di nomer selanjutnya.
Kalimat atau kata yang kita tuliskan di antara tag title & /title
merupakan judul atau deskripsi dari website kita. Sedangkan kalimat di antara
body & /body merupakan isi dari website kita. Kalau sudah anda ketik klik
File > Save / Save As , dan simpan dengan nama file index.html. File ini akan
mempunyai icon Internet Explorer atau icon web browser lain yang anda
gunakan dalam komputer anda. Klik icon ini untuk melihat tampilan halaman
web yang telah anda buat.
4. Warna background website anda dapat anda ubah dengan menambahkan kata
“bgcolor = warna” setelah tag body. Misalnya anda ingin memberi warna hitam
website anda maka anda tinggal tambahkan kode berikut :
body bgcolor = black
Bila sudah anda tambahkan ke ketikan anda dalam Notepad kemudian disave,
dan selanjutnya tekan tombol refresh dalam web browser anda. Tampilan
website anda akan berubah menjadi seperti di bawah ini. Bila anda ingin
mengubahnya menjadi warna lainnya anda tinggal ubah warna yang diketik
setelah bgcolor, misalnya : red, green, blue, atau warna lainnya.
5. Anda bisa juga menjadikan sebuah gambar sebagai background website anda
dengan menambahkan kode : “background = file gambar” setelah tag body.
Misalnya anda ingin menjadikan file gambar pemandangan.jpg sebagai
background halaman website anda maka anda tinggal tambahkan kode berikut :
body background = pemandangan.jpg
Perlu diingat bahwa menggunakan gambar sebagai background halaman website
anda akan memperlambat loading halaman website anda, terutama bila ukuran
file gambar ini terlalu besar. Karena itu usahakan sebisa mungkin agar
background website anda tidak menggunakan file gambar.
6. Seperti halnya background website, tulisan dalam website pun bisa juga diubah
ubah warnanya. Selain itu jenis dan ukuran tulisan bisa juga kita ubah ubah.
Untuk itu kita perlu menyisipkan tag font & /font dalam tag body & /body.
Untuk mengubah warna tulisan kita tambahkan kode “color” setelah font, untuk
mengubah jenis tulisan kita tambahkan kode “face”, dan untuk mengubah
ukuran tulisan kita tambahkan kode “size”. Khusus untuk size kita bisa
mengubah ubah ukurannya dari -7 sampai +7, bila nilainya semakin besar maka
semakin besar pula huruf yang akan ditampilkan dalam halaman web. Kita bisa
mengubah satu, dua, atau tiga pengaruh tag tag di atas secara bersamaan
dengan dipisahkan spasi. Misal kode yang kita tuliskan dalam Notepad :
#html
#head
#title
Website Saya
#/title
#/head
#body bgcolor = black
#font color = white face = verdana size = +3 align = center
Selamat datang di website saya
#/font
#/body
#/html
Kode di atas berarti memberi pengaruh tulisan warna putih berjenis Verdana
dan berukuran +3. Save dan refresh browser untuk melihat pengaruhnya. Anda
bia juga menambahkan efek tulisan bergerak dengan menyisipkan tag
marquee & /marquee sebelum kode font & /font
Untuk mengatur posisi tulisan bisa kita sisipkan tag posisi & /posisi di antara
tulisan yang kita tuliskan. Posisi kita isi dengan “left”, “center”, atau “right”.
Misalkan kita ingin membuat posisi tulisan ke tengah, maka kita ketikkan :
center Selamat datang di website saya /center
7. Anda bisa menyisipkan foto atau gambar anda dalam website anda dengan
mengetikkan tag img src = file foto anda. Misalkan file yang ingin anda
masukkan bernama bajaj.jpg, maka tag yang perlu anda tuliskan adalah :
img src = bajaj.jpg
Untuk memberi jarak antara tulisan anda sebelumnya dengan foto ini maka
perlu anda tambahkan tag br.
font color = white face = verdana size = +3 align = center>
Selamat datang di website saya br
img src = bajaj.jpg
/font
Tampilan website anda akan seperti ini. Ukuran gambar bisa anda atur dengan
menambahkan kode “height = ukuran”, dan/atau “width = ukuran”. Misalkan
anda ingin gambar anda mempunyai tinggi 100 pixel maka anda tinggal
tambahkan “height = 100” setelah kode nama file gambar yang anda sisipkan.
8. Selanjutnya tinggal anda tambahkan menu menu dalam website anda. Menu
standar yang ada dalam web sederhana biasanya adalah profil, galeri foto, dan
link. Untuk itu kita perlu menambah halaman baru yang mempunyai nama file
profil.html, galeri.html, dan link.html. Untuk membuat halaman halaman ini
anda bisa mengulangi langkah langkah yang telah dijelaskan sebelumnya. Untuk
menghubungkan halaman utama website dengan halaman halaman tambahan ini
kita perlu ketikkan tag dan ditutup dengan bila kita
ingin menghubungkan dengan halaman profil, demikian pula untuk halaman web
lainnya. Kode berikut akan menampilkan hubungan antar halaman website yang
berjejer.
a href = profil.html Profil /a a href = galeri.html Galeri /a a href =
link.html Link /a
Klik Save dan refresh sehingga ditampilkan halaman website seperti berikut.
Bila link yang anda buat benar maka kursor mouse akan berubah menjadi
tangan bila anda dekatkan ke link yang anda buat.
9. Untuk halaman profil, galeri, dan link bisa anda tambahkan sesuka anda seperti
langkah langkah sebelumnya. Khusus untuk halaman link, anda bisa mengisinya
dengan link ke Friendster, Yahoomail, Google, dan sebagainya. Link yang telah
dijelaskan di atas bila kita klik maka halaman baru akan dibuka dalam satu
jendela browser yang sama. Bila kita ingin tetap menikmati halaman website
kita sedangkan kita juga ingin membuka Friendster misalnya, maka kita perlu
menambahkan tag “target = “_blank” setelah alamat Friendster. Misal :
a href = http://www.facebook.com target = “_blank” Friendster /a
Bila anda ingin Friendster ini dibuka di halaman web yang sama maka anda
tinggal hilangkan saja “target = “_blank” nya.
10. Bila anda ingin link ke halaman profil anda berupa gambar profil.jpg misalnya,
maka anda perlu menyisipkan file gambar di dalam tag a href = profil.html
/a. Sehingga dapat kita tuliskan sebagai berikut :
a href = profil.html img src = profil.jpg /a
Bila benar maka kursor mouse akan berubah menjadi tangan bila didekatkan ke
gambar profil.jpg. Demikian pula bila link ke Friendster atau Yahoomail juga
dalam bentuk gambar, maka anda tinggal menambahkan tag
di antara tag a href = link /a.
11. Saya rasa tutorial ini sudah cukup sebagai awal untuk mulai membuat website
pribadi anda. Pesan terakhir, Seseorang pernah bercerita kepada saya yang kurang lebih
intinya adalah anda tidak akan bisa jago silat bila anda cuma melihat orang silat
saja dan tidak berusaha untuk berlatih. Yang saya bahas di sini cuma HTML saja,
dan bahasa HTML ini masih jauh lebih mudah dari bahasa PHP. Karena itu,
sering seringlah berlatih dan jangan cepat merasa puas bila anda sudah
mempunyai website pribadi. Selamat berkarya ! :)
Tidak ada komentar:
Posting Komentar