Mengenal Dasar Pembuatan Halaman Website

LOPO CENDANA - 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:

• 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:
  
  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.

Perhatikan bahwa kode-kode tersebut terdiri atas tag pembuka dan tag penutup. Jika pembaca kurang mengerti atau lupa mengenai penulisan tag tersebut, silahkan klik disini untuk mempelajarinya.
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 :

Masih ingatkan dengan postingan yang membahas tentang dasar pembuatan website bagian pertama? Kalau sudah lupa boleh dibuka lagi kok disini. Blog ini akan memberikan lanjutan tutorial mengenai hal yang serupa, yaitu mengenal dasar-dasar pembuatan web. Saya akan menjelaskan secara umum bagaimana cara menambahkan elemen-elemen yang akan dimasukkan ke dalam halaman web yang kita desain. Tentu penambahan ini akan diterangkan dengan bekerja secara langsung pada bagian kode-kode yang melibatkan bagian head dan body yang telah kita kenal pada postingan yang lalu. Sebagai cacatan, saya akan memberikan contoh dengan menggunakan Dreamweaver. Namun, bagi pembaca yang tidak menginstal sorftware web design misalnya Macromedia Dreamweaver atau yang lainnya, bisa menggunakan notepad atau wordpad sebagai alat praktek. Hanya saja software web design seperti Dreamweaver tersebut bisa menampilkan tag-tag HTML yang bisa kita pakai sehingga kita menjadi lebih terbantu. Pembaca bisa membaca tutorial Dreamweaver tersebut pada blog ini. Mari kita bahas satu persatu:

1. Bagi pembaca yang sudah menginstal Dreamweaver, silahkan buka program tersebut, dan buat dokumen baru dengan memilih File --> New. Pilih dokumen HTML, kemudian pilih layar Code atau Split. Sekali lagi, bagi pembaca yang belum menginstal Dreamweaver tersebut, silahkan buka Notepad atau Wordpad, kemudian tulis kode berikut:(jika menggunakan Dreamweaver, kode-kode ini akan langsung muncul)
   
   
2. Pertama-tama kita akan menambahkan elemen pada halaman web tersebut misalnya sebuah tulisan dan mengatur tampilannya secara langsung alias tanpa memakai CSS. Elemen-elemen yang akan kita tambahkan tersebut diletakkan pada bagian body (diantara tag dan ) agar elemen-elemen tersebut muncul dan terlihat pada browser internet. Misalkan kita ingin menampilkan tulisan "SELAMAT DATANG" pada web kita ketika orang lain membukanya, maka ketikkan tulisan "SELAMAT DATANG" tersebut pada body seperti dibawah ini:
   
   SELAMAT DATANG
   
3. Simpan dokumen HTML tersebut dengan nama index.html. Setelah tersimpan, silahkan buka file tersebut pada browser (cukup double click), maka akan tampak seperti gambar berikut:
   
4. Sekarang kita akan memberi atribut pada tulisan tersebut untuk mengatur tampilannya. Misalkan kita ingin membuat tulisan tersebut berwarna merah, maka tulisan kode seperti berikut ini:
   
   SELAMAT DATANG
   
   Tag tersebut berfungsi untuk membuat tulisan SEMALAT DATANG sebagai huruf (font) yang berwarna merah (FF0000). Kita tentu ingat bahwa setiap jenis warna mempunyai kode-kode tertentu. Hal ini sudah kita bahas pada tutorial membuat CSS. Kita bisa mendapatkan kode-kode tersebut dari software-software grafis atau web design, atau jika ingin mendapatkan secara onlibe, pembaca juga bisa membuka situs yang menyediakan kode warna CSS untuk web tersebut. Klik disini untuk melihat kembali posting yang membahasnya dan mengetahui situs penyedia kode warna CSS untuk web. Misalkan kita ingin pula membuat tulisan tersebut bergaris bawah, maka strukturnya menjadi:
   
   SELAMAT DATANG
   
5. Simpan hasil editing Anda, kemudian buka file index.html tersebut, maka hasilnya akan seperti gambar berikut:
   
6. Pengaturan tampilan elemen misalnya tulisan pada langkah 4 & 5 merupakan fungsi HTML untuk Presentational. Fungsi HTML ini sudah tergantingan oleh peranan Cascading Stylesheet (CSS). Nah, langkah selanjutnya dalam mempelajari dasar pembuatan halaman website adalah bagaimana penggunaan CSS itu sendiri didalam mendesain website. Bagaimana bentuk dan cara penulisan CSS mungkin sudah kita pelajari pada postingan yang ini. Sekarang saatnya melihat bagaimana peletakannya.
7. Ada 2 cara dalam penggunaan CSS. Yang pertama menuliskan secara langsung pada halaman-halaman website, dan yang kedua membuat file yang khusus berisi struktur CSS yang kemudian diinjectkan/ disisipkan/ ditanamkan/ dilinkkan pada halaman-halaman website.
8. Untuk cara yang pertama (menulis secara langsung pada halaman website):
   Strutur CSS dituliskan pada bagian karena pada bagian tersebutlah deklarasi/informasi yang digunakan untuk mengatur website kita termasuk salah satunya CSS. Nah, karena kita menuliskan secara langsung pada halaman web yang ingin diatur, maka kita perlu mendefenisikan tersebih dahulu struktur-struktur tersebut sebagai sebuah bahasa/struktur CSS. Bagaimana cara mendeklarasikannya? Misalkan kita buat sebuah struktur CSS seperti dibawah ini:
   #tulisanku {
   color:#FF0000;
   text-decoration:underline;
   }
   Pembaca pasti mengertikan maksud struktur tersebut? Artinya kita mendefenisikan sebuah atribut yang kita beri nama "tulisanku" kemudian memberi pengaturan terhadap atribut itu antara lain warna dengan nilai FF0000 (color:#FF0000), kemudian memberi garis bawah pada teks (text-decoration:underline). Sekarang pindahkan struktur tersebut diantara dan sehingga menjadi:
   
   
   #tulisanku {
   color:#FF0000;
   text-decoration:underline;
   }
   
   
   
   Seperti yang telah saya paparkan tadi bahwa kita perlu mendeklarasikan struktur tersebut sebagai struktur/bahasa CSS. Maka bentuk penulisannya menjadi:
   
   
   
   
   
   Tag yang membungkus struktur tersebutlah yang akan mendeklarasikan bahwa struktur tersebut adalah bahasa/struktur CSS.
9. Sekarang pada bagian , ganti strukturnya menjadi:
   
   SELAMAT DATANG
   
   Artinya bahwa kita memberikan ID "tulisanku" pada kalimat SELAMAT DATANG sehingga tampilan kalimat tersebut akan seperti "tulisanku", yaitu warnanya menjadi FF0000 dan bergaris bawah.
   Struktur lengkap halamannya akan seperti gambar dibawah ini:
   
10. Simpan hasil editing file index.html tersebut, kemudian buka pada browser Anda.
11. Untuk cara yang kedua (membuat file khusus CSS kemudian melinkkan ke halaman web):
    Buka program Dreamweaver pembaca. Pilih menu File --> New, kemudian pilih category basic page, dan pilih jenis CSS. Pembaca juga bisa menggunakan notapad atau wordpad. Karena kita akan membuat file khusus CSS, maka kita tidak perlu mendeklarasikan strukturnya terlebih dahulu, tetapi langsung menulis struktur CSS yang kita inginkan. Silahkan tulis struktur berikut pada file tersebut:
    
    #tulisanku {
    color:#FF0000;
    text-decoration:underline;
    }
    Setelah itu simpan file tersebut dengan nama misalnya "tampilan.css". Usahakan menyimpannya pada folder yang sama dengan file index.html yang ingin kita desain, misalkan pembaca menyimpan di "D:\webku\".
12. Hapus struktur dibawah ini dari bagian yang telah kita tambahkan pada langkah 8 (atau pembaca boleh membuat file HTML baru sebagai bahan latihan untuk cara kedua ini).
    
13. Tambahkan pula struktur berikut pada diantara :
    
    
    Struktur tersebutlah yang berfungsi untuk melinkkan file CSS (sebagai CSS Linker) yang kita simpan pada D:\webku dengan nama "tampilan.css" sehingga bisa digunakan untuk mengatur tampilan elemen pada halaman website kita. "D:\webku\tampilan.css" merupakan URL dari file CSS kita. Karena kita menyimpan pada komputer, maka bentuknya seperti itu. Jika kita menyimpan secara online, maka bentuknya menjadi misalnya "http://www.webku.com/tampilan.css".
14. Bagian biarkan seperti pada langkah 9, karena kita sama-sama mendeklarasikan atribut dengan nama "tulisanku".
15. Tampilan struktur lengkapnya seperti gambar berikut:
    
16. Simpan hasil editing file index.html tersebut,kemudian buka pada browser.

Seperti itulah dasar pembuatan web dengan menggunakan HTML dan CSS. Sekarang tinggal membuatnya lebih kompleks sesuai dengan kebutuhan kita.
Selamat mencoba,