About Me

Foto Saya
muh.ridwan
makassar city, sul sel, Indonesia
Lihat profil lengkapku

Daftar Blog Saya

my fhoto

my fhoto
fhoto

terserah

terserah
good

multimedia

masalah sekarang dalam dunia kumputer banyak menggunakan multimedia
Diberdayakan oleh Blogger.

Followers

Selasa, 24 Agustus 2010
Pembuatan Website Sederhana Menggunakan HTML


Website atau disingkat web atau dikenal juga dengan nama homepage kini telah
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. Dengan www.yahoomail.com kita bisa berkirim email ke teman kita di
luar negeri tanpa harus repot repot menulis di kertas, memasukkan ke dalam amplop,
dan mengirimnya lewat kantor pos. Dengan website pula kita bisa mengetahui berita
mutakhir lewat www.detik.com, dan dengan website pula kita bisa menambah teman
dengan mendaftar ke www.friendster.com.
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.
Selain PHP, bahasa yang umum dipakai untuk membuat halaman website ini
salah satunya adalah Hyper Text Mark up Language (HTML). HTML ini sangat mudah
untuk kita pelajari bila dibandingkan dengan PHP. Karena itu untuk latihan kali ini
saya terangkan mengenai pembuatan web pribadi sederhana menggunakan HTML.
Perintah perintah yang dipakai dalam HTML ini dinamakan tag. Tag tag yang dipakai
untuk membuat halaman sebuah web dapat kita lihat dengan mengeklik tab View >
Source dalam web browser yang anda pakai, yang dalam tutorial ini saya pakai web
browser Internet Explorer. Untuk web browser lainnya seperti Mozilla Firefox, source
halaman website bisa anda lihat dengan mengeklik tab View > Page Source. 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. Tampilan program Notepad seperti gambar di bawah ini. 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.


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
merupakan judul atau deskripsi dari website kita. Sedangkan kalimat di antara
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.


Terlihat bahwa di bagian atas halam website terdapat kata kata yang anda
tuliskan di antara tag , sedangkan dalam badan website terdapat
tulisan yang anda tuliskan di antara tag .

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 :



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 :



Save dan klik refresh. Tampilan website anda akan seperti gambar di bawah ini.

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 dalam tag .
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 :



<br />Website <span class="blsp-spelling-error" id="SPELLING_ERROR_268">Saya</span><b
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




yach itulah tutorial singkat dari blogkoe
Selamat berkarya ! :)