Tutorial ini sebenarnya sudah disinggung pada postingan-postingan yang terdahulu. Namun, rasanya kurang lengkap jika tidak memaparkan lebih detail lagi. Jika di postingan yang lalu kita sudah membahas filosifi sebuah halaman website, kemudian belajar tentang hosting dan domain, mengenali bahasa pemrograman yang digunakan untuk membuat website serta perbedaan-perbedaannya, sampai pada "praktek" untuk membuat sebuah blog di blogspot. Dan sekarang saya akan mencoba mengulas lebih dasar dan detail mengenai dasar pembuatan sebuah halaman website. Karena merupakan dasar, maka kita akan memulai dengan mempelajari cara mendesain halaman website dengan HTML.
Secara umum, sebuah halaman website terdiri dari 2 bagian besar, yaitu head dan body. Kedua bagian ini bisa diibaratkan seperti tubuh manusia yang dibagi atas 2 bagian besar yaitu kepala dan tubuh.
Bagian head pada halaman website berfungsi sebagai tempat meletakkan informasi-informasi yang digunakan untuk mendesain atau mengatur halaman website yang kita buat. Sama halnya seperti kepala manusia dimana kepala dijadikan tempat menyimpan informasi yang membuat kita tahu dan membuat kita mengatur tubuh kita. Misalnya informasi bahwa bugil di depan umum adalah hal yang memalukan. Informasi tersebut tentu ada di kepala kita. Dengan kita mempunyai informasi itu, kita harus membalut tubuh kita dengan pakaian agar tidak terlihat bugil di depan umum. Yach, kecuali kepalanya sudah rusak atau informasi yang diberikan salah, tentu penampilan tubuh kita menjadi sebaliknya.
Sedangkan bagian body pada halaman website merupakan bagian yang tampak secara langsung di internet. Di bagian inilah kita menyusun elemen-elemen yang akan kita tampilkan di internet, misalnya tulisan, gambar, tabel, video, dan lain-lain. Body pada website bisa diibaratkan seperti tubuh manusia dimana bagian tersebut menunjukkan penampilan kita, misalnya warna baju, pakai gelang atau tidak, lengan panjang atau tidak, dan lain-lain. Supaya lebih jelas bagaimana bentuk head dan body itu, mari kita perhatikan screenshot coding (bagian yang berisi kode-kode untuk mendesain halaman website, bukan yang tampak ketika dibuka pada browser) sebuah halaman website yang paling dasar :
Berikut penjelasannya:
Lantas, apakah cukup sampai disitu? Bagaimana tampilannya dan cara menampilkannya? Elemen-elemen apa yang harus saya letakkan di head dan di body? Bagaimana pula cara meletakkannya? Apa yang harus kita perbuat terhadap head dan body ketika mendesain halaman website?
Yach, sebenarnya baris-baris kode pada gambar diatas sudah bisa menjadi sebuah halaman website. Namun, halaman website tersebut masih kosong alias belum terisi elemen apapun karena kita belum menampilkan data atau elemen pada bagian body. Halaman website tersebut hanya bisa tampil dan menunjukkan di title bar judul halamannya yaitu "Judul Halaman Website" sesuai baris ke 7. Nah, pertanyaan-pertanyaan selanjutnya yang saya sebutkan tadi akan kita jawab secara tuntas memalui blog ini pada postingan selanjutnya. Namun, supaya kita lebih mudah belajarnya, ada baiknya kita sedikit belajar menggunakan software web design yang sangat terkenal? Apa itu? Tunggu postingan selanjutnya dan jangan kemana-mana ya :D
Secara umum, sebuah halaman website terdiri dari 2 bagian besar, yaitu head dan body. Kedua bagian ini bisa diibaratkan seperti tubuh manusia yang dibagi atas 2 bagian besar yaitu kepala dan tubuh.
Bagian head pada halaman website berfungsi sebagai tempat meletakkan informasi-informasi yang digunakan untuk mendesain atau mengatur halaman website yang kita buat. Sama halnya seperti kepala manusia dimana kepala dijadikan tempat menyimpan informasi yang membuat kita tahu dan membuat kita mengatur tubuh kita. Misalnya informasi bahwa bugil di depan umum adalah hal yang memalukan. Informasi tersebut tentu ada di kepala kita. Dengan kita mempunyai informasi itu, kita harus membalut tubuh kita dengan pakaian agar tidak terlihat bugil di depan umum. Yach, kecuali kepalanya sudah rusak atau informasi yang diberikan salah, tentu penampilan tubuh kita menjadi sebaliknya.
Sedangkan bagian body pada halaman website merupakan bagian yang tampak secara langsung di internet. Di bagian inilah kita menyusun elemen-elemen yang akan kita tampilkan di internet, misalnya tulisan, gambar, tabel, video, dan lain-lain. Body pada website bisa diibaratkan seperti tubuh manusia dimana bagian tersebut menunjukkan penampilan kita, misalnya warna baju, pakai gelang atau tidak, lengan panjang atau tidak, dan lain-lain. Supaya lebih jelas bagaimana bentuk head dan body itu, mari kita perhatikan screenshot coding (bagian yang berisi kode-kode untuk mendesain halaman website, bukan yang tampak ketika dibuka pada browser) sebuah halaman website yang paling dasar :
Berikut penjelasannya:- Baris 1, 2, dan 3 merupakan pendefenisian standardisasi HTML yang digunakan untuk mendasain halaman website tersebut
- Baris 5 s.d 9 merupakan bagian head. Dibagian inilah informasi untuk mengatur website diletakkan. Misalnya yang terlihat pada baris ke 7 dimana tertulis:
<title>Judul Halaman Website</title>
tag tersebut mendefenisikan bahwa title halaman website tersebut adalah "Judul Halaman Website". Title tersebut akan muncul pada title bar browser internet. - Baris 11 s.d 13 merupakan bagian body. Dibagian inilah kita memasukkan data atau elemen-elemen yang akan kita tampilkan pada browser internet.
- Baris ke 3 dan ke 14 merupakan tag penutup yang mendefenisikan bahwa kode-kode yang ditulis merupakan kode HTML.
Lantas, apakah cukup sampai disitu? Bagaimana tampilannya dan cara menampilkannya? Elemen-elemen apa yang harus saya letakkan di head dan di body? Bagaimana pula cara meletakkannya? Apa yang harus kita perbuat terhadap head dan body ketika mendesain halaman website?
Yach, sebenarnya baris-baris kode pada gambar diatas sudah bisa menjadi sebuah halaman website. Namun, halaman website tersebut masih kosong alias belum terisi elemen apapun karena kita belum menampilkan data atau elemen pada bagian body. Halaman website tersebut hanya bisa tampil dan menunjukkan di title bar judul halamannya yaitu "Judul Halaman Website" sesuai baris ke 7. Nah, pertanyaan-pertanyaan selanjutnya yang saya sebutkan tadi akan kita jawab secara tuntas memalui blog ini pada postingan selanjutnya. Namun, supaya kita lebih mudah belajarnya, ada baiknya kita sedikit belajar menggunakan software web design yang sangat terkenal? Apa itu? Tunggu postingan selanjutnya dan jangan kemana-mana ya :D
huaaa udah komen panjang2 eh ilang.
untuk preview, pake software apa ya?
makasih udah mampir ya... saya link balik nich...
banyak yang bisa dipelajari dari blog ini, apalagi bagi blogger pemula seperti sayah... (Quin, mhn izin pake istilah "sayah"-mu ya hi..hi..)
tutor yang bermanfaat sekali mas...
@Quinie : sabar ya mbak :D , pasti saya ulas dipostingan selanjutnya...
@btari sekartaji: sayah kn bisa saya bisa ayah..hehehehe..
mari kita sama-sama belajar ya..
@suryaden : semoga bermanfaat untuk kita semua :)