Pembuatan Website Sederhana Menggunakan
HTML (Hyper Text Markup Language)
Oleh :
Tri Wahyu Nugroho
t riwahyunugroho@yahoo. com maswahyu@st udent s. ee. it b. ac. id ht t p: / / s.ee. it b. ac. id/ ~maswahyu
ht t p: / / www. maswahyu. t k 08562065165
Lisensi Dokumen:
Right t o copy @ Sept ember 2006, Divkom HME ITB
Pembuatan Website Sederhana Menggunakan
HTML (Hyper Text Markup Language)
Websit e at au disi ngkat web at au di kenal j uga dengan nama homepage kini t elah menj adi t rend. Ribuan bahkan j ut aan websit e kini t elah meramaikan dunia maya seiring dengan per kembangan int ernet . Bila t elah t erhubung dengan int ernet , sebuah perusahaan dapat mempromosikan produknya ke segala penj uru dunia lewat websit e perusahaan. Dengan www.yahoomail. com kit a bisa berkirim email ke t eman kit a di luar negeri t anpa harus repot repot menuli s di kert as, memasukkan ke dalam amplop, dan mengirimnya lewat kant or pos. Dengan websit e pula kit a bisa menget ahui berit a mut akhir lewat www. det ik. com, dan dengan websit e pula kit a bisa menambah t eman dengan mendaf t ar ke www. f riendst er. com.
Kit a pun bisa membuat websit e sepert i it u sendiri dengan bant uan sof t ware web developer yang sudah ada sepert i Microsof t Front page at au Macromedia Dreamweaver. Kalaupun program t ersebut t idak t erinst al di komput er anda, asalkan ada program Not epad, Int ernet Explorer, at au web browser sej enis anda masih bi sa membuat web pribadi anda.
1. Klik St art > All Program > Accessories > Not epad unt uk membuka program Not epad.
3. Sebuah halaman web t erdi ri dari dua bagian, yait u bagian kepala dan badan. Bagian kepala memberi nama websit e kit a, sedangkan bagi an badan berisi halaman int i sebuah web. Bagian kepala dan bagian badan ini nant inya akan membent uk sebuah kesat uan halaman websit e yang akan kit a buat . Tuliskan t ag t ag berikut dalam Not epad unt uk membuat bagian kepala dan badan web.
<ht ml>
Selamat dat ang di websit e saya </ body>
</ ht ml >
<ht ml>, <head>, <t it le>, <body>, </ ht ml>, </ head>, </ t it le>, </ body> adalah beberapa cont oh t ag yang dipakai unt uk membangun sebuah halaman websit e. Pada cont oh di at as t erlihat bahwa set iap t ag mempunyai pasangan yang dit ambahi dengan t anda slash (/ ). Perlu diingat bahwa t idak semua t ag mempunyai pasangan sepert i cont oh di at as, dan t ag t ag yang t idak mempunyai pasangan akan kit a bahas di nomer selanj ut nya.
Terlihat bahwa di bagian at as halam websit e t erdapat kat a kat a yang anda t uliskan di ant ara t ag <t it le> </ t it le>, sedangkan dalam badan websit e t erdapat t ulisan yang anda t uliskan di ant ara t ag <body> </ body>.
4. Warna background websit e anda dapat anda ubah dengan menambahkan kat a “ bgcolor = warna” set el ah t ag body. Misalnya anda ingin memberi warna hit am websit e anda maka anda t inggal t ambahkan kode berikut :
<body bgcolor = black>
5. Anda bisa j uga menj adikan sebuah gambar sebagai background websit e anda dengan menambahkan kode : “ background = f ile gambar” set elah t ag body. Misalnya anda ingin menj adikan f ile gambar pemandangan. j pg sebagai background halaman websit e anda maka anda t inggal t ambahkan kode berikut :
<body background = pemandangan. j pg>
Perlu diingat bahwa menggunakan gambar sebagai background halaman websit e anda akan memperlambat loading halaman websit e anda, t erut ama bila ukuran f ile gambar i ni t erlalu besar. Karena it u usahakan sebisa mungkin agar background websit e anda t idak menggunakan f ile gambar.
6. Sepert i halnya background websit e, t ulisan dalam websit e pun bisa j uga di ubah ubah warnanya. Selain it u j enis dan ukuran t ulisan bisa j uga kit a ubah ubah. Unt uk it u kit a perlu menyisipkan t ag <f ont > </ f ont > dalam t ag <body> </ body>. Unt uk mengubah warna t ulisan kit a t ambahkan kode “ color” set elah f ont , unt uk mengubah j enis t ulisan kit a t ambahkan kode “ f ace” , dan unt uk mengubah ukuran t ulisan kit a t ambahkan kode “ size” . Khusus unt uk size kit a bisa mengubah ubah ukurannya dari -7 sampai +7, bila nilainya semakin besar maka semakin besar pula hur uf yang akan dit ampilkan dalam halaman web. Kit a bisa mengubah sat u, dua, at au t i ga pengaruh t ag t ag di at as secara bersamaan dengan dipisahkan spasi. Misal kode yang kit a t uliskan dalam Not epad :
<ht ml> Selamat dat ang di websit e saya
</ f ont > </ body> </ ht ml >
bia j uga menambahkan ef ek t ulisan bergerak dengan menyisipkan t ag <marquee> </ marquee> sebelum kode <font > </ f ont >
Unt uk mengat ur posisi t ulisan bi sa kit a sisipkan t ag <posisi> </ posisi> di ant ara t ulisan yang kit a t uliskan. Posisi kit a isi dengan “ lef t ” , “ cent er” , at au “ right ” . Misalkan kit a ingin membuat posisi t ulisan ke t engah, maka kit a ket ikkan :
7. Anda bisa menyisipkan f ot o at au gambar anda dalam websit e anda dengan menget ikkan t ag <img src = f ile f ot o anda>. Misalkan f ile yang ingin anda masukkan bernama baj aj . j pg, maka t ag yang perlu anda t uliskan adalah :
<img src = baj aj . j pg>
Unt uk memberi j arak ant ara t ulisan anda sebelumnya dengan f ot o ini maka perlu anda t ambahkan t ag <br>.
<f ont color = whit e f ace = verdana size = +3 align = cent er> Selamat dat ang di websit e saya <br>
<img src = baj aj . j pg> </ f ont >
8. Selanj ut nya t inggal anda t ambahkan menu menu dalam websit e anda. Menu st andar yang ada dalam w eb sederhana biasanya adalah prof il, galeri f ot o, dan link. Unt uk it u kit a perlu menambah halaman baru yang mempunyai nama f ile prof il. ht ml, galeri. ht ml, dan link. ht ml. Unt uk membuat halaman halaman ini anda bisa mengulangi langkah langkah yang t elah dij elaskan sebel umnya. Unt uk menghubungkan halaman ut ama websit e dengan halaman halaman t ambahan ini kit a perlu ket ikkan t ag <a href = prof il. ht ml> dan dit ut up dengan </ a> bila kit a ingin menghubungkan dengan halaman prof il, demikian pula unt uk halaman web lainnya. Kode berikut akan menampilkan hubungan ant ar halaman websit e yang berj ej er .
<a href = prof il. ht ml> Prof il </ a> <a href = galeri. ht ml > Galeri </ a> <a href = link.ht ml> Link </ a>
9. Unt uk halaman prof il, galeri, dan link bisa anda t ambahkan sesuka anda sepert i langkah langkah sebelumnya. Khusus unt uk halaman link, anda bisa mengisinya dengan link ke Friendst er , Yahoomail, Google, dan sebagainya. Link yang t elah dij elaskan di at as bila kit a klik maka halaman baru akan dibuka dalam sat u j endela browser yang sama. Bila kit a ingin t et ap menikmat i halaman websit e kit a sedangkan kit a j uga ingin membuka Friendst er misalnya, maka kit a perlu menambahkan t ag “ t arget = “ _blank” set elah alamat Friendst er. Misal :
<a href =ht t p: / / www. f riendst er . com t arget = “ _blank” > Friendst er </ a>
Bila anda ingin Fri endst er ini dibuka di hal aman web yang sama maka anda t inggal hilangkan saj a “ t arget = “ _blank” nya.
10. Bila anda ingin link ke hal aman prof il anda berupa gambar prof il. j pg misalnya, maka anda perlu menyisipkan f ile gambar di dalam t ag <a href = prof il. ht ml> </ a>. Sehi ngga dapat kit a t uliskan sebagai berikut :
<a href = prof il. ht ml > <img src = prof il. j pg> </ a>
Bila benar maka kursor mouse akan berubah menj adi t angan bila didekat kan ke gambar prof il. j pg. Demikian pula bila li nk ke Friendst er at au Yahoomail j uga dalam bent uk gambar, maka anda t inggal menambahkan t ag <img src = gambar> di ant ara t ag <a href = link > </ a>.
