Pembuatan Website Sederhana Menggunakan HTML (Hyper Text Markup Language)
Pembuatan Website Sederhana Menggunakan
HTML (Hyper Text Markup Language)
Oleh :
Tri Wahyu Nugroho
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 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 dan dengan websit e pula kit a bisa menambah t eman dengan mendaf t ar ke
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.
Selain PHP, bahasa yang umum dipakai unt uk membuat halaman websit e ini salah sat unya adalah Hyper Text Mark up Language (HTML). HTML ini sangat mudah unt uk kit a pelaj ari bila dibandingkan dengan PHP. Karena it u unt uk lat ihan kali ini saya t erangkan mengenai pembuat an web pribadi sederhana menggunakan HTML. Perint ah perint ah yang dipakai dalam HTML ini dinamakan t ag. Tag t ag yang dipakai unt uk membuat halaman sebuah web dapat kit a lihat dengan mengekli k t ab View > Source dalam web browser yang anda pakai, yang dalam t ut orial ini saya pakai web browser Int ernet Expl orer. Unt uk web browser lainnya sepert i Mozill a Firef ox, source halaman websit e bisa anda lihat dengan mengeklik t ab View > Page Source. Berikut ini
1. Klik St art > All Program > Accessories > Not epad unt uk membuka program Not epad.
2. Tampil an program Not epad sepert i gambar di bawah ini. Di Not epad ini nant i kit a akan menget ik t ag HTML unt uk membuat sebuah halaman web.
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> <head> <t it le> Websit e Saya </ t it le> </ head> <body> 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.
Kalimat at au kat a yang kit a t uliskan di ant ara t ag <t it le> </ t it le> merupakan j udul at au deskripsi dari websit e kit a. Sedangkan kalimat di ant ara <body> </ body> merupakan isi dari websit e kit a. Kalau sudah anda ket ik klik File > Save / Save As , dan simpan dengan nama f ile i ndex. ht ml. File ini akan mempunyai icon Int ernet Explorer at au icon web browser lain yang anda 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> Bila sudah anda t ambahkan ke ket ikan anda dal am Not epad kemudian disave, dan selanj ut nya t ekan t ombol refresh dal am web browser anda. Tampil an websit e anda akan berubah menj adi sepert i di bawah ini. Bila anda i ngin mengubahnya menj adi warna lainnya anda t inggal ubah warna yang diket ik
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> Save dan klik ref resh. Tampilan websit e anda akan sepert i gambar di bawah i ni.
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> <head> <t it le> Websit e Saya </ t it le> </ head> <body bgcolor = black> <f ont color = whit e f ace = verdana size = +3 align = cent er> 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 : <cent er> Selamat dat ang di websit e saya </ cent er>
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 >
Tampilan websit e anda akan sepert i ini . Ukuran gambar bisa anda at ur dengan menambahkan kode “ height = ukuran” , dan/ at au “ widt h = ukuran” . Misalkan anda ingin gambar anda mempunyai t inggi 100 pixel maka anda t inggal t ambahkan “ height = 100” set elah kode nama file gambar yang anda sisipkan.
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> Klik Save dan ref resh sehingga dit ampilkan halaman websit e sepert i berikut . Bila link yang anda buat benar maka kursor mouse akan berubah menj adi t angan bila anda dekat kan ke link yang anda buat .
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 = 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>.
11. Saya rasa t ut orial ini sudah cukup sebagai awal unt uk mulai membuat websit e pribadi anda. Pesan t erakhir, dosen saya pernah bercerit a yang kurang l ebih int inya adalah anda t idak akan bisa j ago silat bila anda cuma melihat orang silat saj a dan t idak berusaha unt uk berlat ih. Yang saya bahas di sini cuma HTML saj a,