1. Membuka Program Noteped
Klik Start > All Program > Accessories > Notepad untuk membuka program Notepad.
2. Tampilan Program Notepad
Tampilan program Notepad seperti gambar di bawah ini. Di Notepad ini nanti kita akan mengetik tag HTML untuk membuat sebuah halaman web.
3. Membuat Bagian Kepala dan Badan Website
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>
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 komputeranda. 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 <title> </title>, sedangkan dalam badan website terdapat tulisan yang anda tuliskan di antara tag <body> </body>.
4. Menambah Warna Background website
Warna background website anda dapat anda ubah dengan menambahkan vkata “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. Menjadikan Gambar Sebagi Background Website
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>
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. Merubah Tulisan dalam Website
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. Menyisipkan Gambar atau Foto Dalam Website
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. Menambahkan Menu dalam Website
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 <a href = profil.html> dan ditutup dengan </a> 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. Link untuk Halaman profil, galeri
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.friendster.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. Link ke Halaman Profil Berupa Gambar
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 <img src = gambar> di antara tag <a href = link > </a>.
sumber :http://pujiee.wordpress.com/2009/12/20/pemrograman-website-sederhana-menggunakan-html-hyper-text-markup-language/
beeeeww, keren nyo....
BalasHapusmateri nyo sngt membantu...