Sebagai contoh, kita akan membuat web dengan tampilan sebagai berikut :
Langkah-Langkah pembuatannya adalah sebagai berikut :
- 1. Dalam pembuatan file HTML, kita harus mengawalinya dengan tag <HTML> dan diakhiri dengan tag </HTML>.
2. Setelah diawali dengan tag <HTML>, lalu kita tuliskan tag <HEAD> yang mana tag ini menandakan bahwa teks beserta tag-tag pengaturannya yang berada didalam tag <HEAD> ini akan menjadi bagian “kepala” dari file HTML yang akan kita buat. Dan jangan lupa tag <HEAD> ini diakhiri dengan tag </HEAD>.
3. Dalam pemecahan masalah yang saya buat disini, didalam tag <HEAD> saya letakkan tag <TITLE> yang berguna menampilkan nama homepage atau apapun teks yang kita letakkan didalam tag <TITLE> ini sehingga akan terlihat di bagian Titlebar browser sebagai berikut :
Dan jangan lupa mengakhiri tag ini dengan tag </TITLE>.
4. Berikutnya adalah membuat bagian “tubuh” file HTML yang akan kita buat. Dalam membuat bagian ini menggunakan tag <BODY> sebagai tag pembukanya dan diakhiri dengan tag </BODY> sebagai penutupnya.
5. Dalam pemecahan masalah yang saya buat disini, didalam tag <BODY> saya gunakan tag <P> yang berguna untuk pembuatan paragraph. Dalam container tag <P> ini saya letakkan komentar untuk pengaturan perataan paragraph yaitu tag ALIGN dan diikuti dengan “CENTER” sebagai pengaturannya untuk perataan tengah.
6. Kemudian di dalam tag <P> saya juga menambahkan tag <FONT> untuk pengaturan font dan saya menambahkan komentar yang berupa tag FACE untuk mengatur bentuk font yang diinginkan dan diikuti dengan “TAHOMA” sebagai bentuk huruf yang sesuai dengan masalah. Lalu ketik teks yang akan kita tampilkan dalam homepage kita setelah tag <FONT> dan diakhiri dengan tag </FONT> dan saya tambah tag <B> sebelum dan sesudah teks tadi saya tambah tag </B> agar teks tersebut tertampil dengan berhuruf tebal (bold). Tag <P> yang saya tulis diawal tadi harus juga diakhiri dengan tag </P>.
Hasil dari langkah 5 dan 6 akan terlihat sebagai berikut :
7. Setelah membuat pengaturan untuk paragraph pertama tadi, maka kita tulis lagi tag <P> lagi sebagai awalan untuk membuat pengaturan pada paragraph kedua. Dalam container tag <P> ini juga saya letakkan komentar untuk pengaturan perataan paragraph yaitu tag ALIGN dan diikuti dengan “LEFT” sebagai pengaturannya untuk perataan kiri. Dan di dalam container <P> juga kita letakkan komentar yang berupa tag STYLE yang memiliki fungsi seperti FONT FACE yaitu untuk mengatur bentuk huruf yang akan kita gunakan. Disini saya menggunakan jenis huruf TIMES NEW ROMAN sesuai dengan permasalahan yang akan diselesaikan.
8. Setelah pengaturan paragraph dan huruf, maka kita akan segera membuat koding untuk membuat daftar. Untuk membuat daftar teratur kita pakai tag <OL>. Tapi jangan lupa menutup daftar ini dengan tag </OL> diakhir daftar yaitu sebelum tag </P> pada paragraph kedua.
Selanjutnya kita gunakan tag <LH>. Tag ini berguna untuk membuat judul daftar. Lalu kita ketik judul daftar seperti berikut :
9. Setelah membuat judul daftar, kita gunakan tag <LI>. Tag ini berguna untuk meng-entri item. Karena sebelumnya kita sudah menggunakan tag <OL>, maka daftar entri item yang akan kita buat akan terurut sesuai penulisannya yang diawali dengan urutan angka tanpa harus menuliskan angka tersendiri karena stiap entri akan secara otomatis memiliki sitem penomoran seperti berikut :
Jangan lupa untuk menutup setiap entri item dengan tag </LI>.10. Lalu untuk membuat daftar entri penjelas, kita gunakan tag <DL> dan kita tutup dengan tag </DL>.
11. Lalu untuk mengisi daftar entri penjelas (dengan type= “a”) dengan teks perincian, kita gunakan tag <DT>. Tag ini memiliki fungsi membuat perincian satu tab kedalam paragraph. Lalu tulis perincian yang sesuai dengan permasalahan dan setiap perincian kita akhiri dengan tag </DT>. Namun sebelum penulisan tag <DT>, kita tuliskan dulu tag <OL> lagi agar hasil yang kita buat dapat sesuai dengan permasalahan. Tag <OL> ini kita ketik diantara tag <DL> dan tag <DT>.
Untuk hasil dari daftar definisi ini dapat kita lihat pada gambar berikut :
12. Dalam container <OL> tambahkan komentar TYPE untuk mengidentifikasi sitem pengurutan apa yang digunakan. Disini saya menggunakan TYPE=”a” sesuai dengan permasalahan yang akan diselesaikan.
Untuk membuat daftar penjelasan cukup kita gunakan daftar <DL> lalu <DT> saja tanpa menambah tag <OL> sebelum tag <DL>. Untuk membuat daftar Sehingga daftar penjelasan ini akan terlihat seperti daftar entri namun tanpa sitem penomoran seperti berikut :
13. Untuk menyesuaikan pemecahan dengan permasalahan yang akan diselesaikan, maka saya meletakkan tag <BR> setelah teks “flow chart” (seperti pada gambar diatas/ lingkaran biru putus-putus). Tag <BR> ini berguna untuk membuat teks yang panjang akan terpotong dan diletakkan di baris baru sesuai dimana tag <BR> ini diletakkan. Namun, tag ini tidak perlu diakhiri dengan tag </BR> karena tidak akan berfungsi.
14. Untuk mengisi daftar entri penjelas (dengan type= “i”) dengan teks perincian, kita gunakan tag <DD>. Tag ini memiliki fungsi membuat perincian dua tab kedalam paragraph. Lalu tulis perincian yang sesuai dengan permasalahan dan setiap perincian kita akhiri dengan tag </DD>. Namun sebelum penulisan tag <DD>, kita tuliskan dulu tag <OL> lagi agar hasil yang kita buat dapat sesuai dengan permasalahan. Tag <OL> ini kita ketik sebelum tag <DL> dan setelah tag <DD> ini kita letakkan lagi tag <LI> dan diakhiri tag </LI> yang fungsinya telah dijelaskan diatas (nomor 10). Tag <LI> ini kita tambahkan tidak lain dan tidak bukan agar pemecahan masalah dapat sesuai dengan permasalahan yang akan diselesaikan.
Hasil dari penggabungan beberapa tag diatas adalah :
Dalam container <OL> tambahkan komentar TYPE untuk mengidentifikasi sitem pengurutan apa yang digunakan. Disini saya menggunakan TYPE=”i” sesuai dengan permasalahan yang akan diselesaikan.
Lumayan juga lah…
Oh ya, tutorial ini sebenarnya adalah Tugas Kuliah saya di Semester 1 pada mata kuliah Pengantar Pemrograman dan Rekayasa Perangkat Lunak. Jadi, kalo ada pertanyaan, bisa bertanya di Facebook saya.
Selamat Mencoba…
Post a Comment