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:
Selamat mencoba, dan jangan lupa komentar yach :D
- 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)
.bmp)
- 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 <body> dan </body>) 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:
<body>
SELAMAT DATANG
</body> - 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:
- 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:
<body>
<font color="#FF0000">SELAMAT DATANG</font>
</body>
Tag <font color="#FF0000"></font> 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:<body>
<u><font color="#FF0000">SELAMAT DATANG</font></u>
</body> - Simpan hasil editing Anda, kemudian buka file index.html tersebut, maka hasilnya akan seperti gambar berikut:
- 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.
- 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.
- Untuk cara yang pertama (menulis secara langsung pada halaman website):
Strutur CSS dituliskan pada bagian <head> 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 <head> dan </head> sehingga menjadi:<head>
#tulisanku {
color:#FF0000;
text-decoration:underline;
}
</head>
<body>
Seperti yang telah saya paparkan tadi bahwa kita perlu mendeklarasikan struktur tersebut sebagai struktur/bahasa CSS. Maka bentuk penulisannya menjadi:
<head>
<style>
#tulisanku {
color:#FF0000;
text-decoration:underline;
}
</style>
</head>
<body>
Tag <style></style> yang membungkus struktur tersebutlah yang akan mendeklarasikan bahwa struktur tersebut adalah bahasa/struktur CSS. - Sekarang pada bagian <body>, ganti strukturnya menjadi:
<body>
<span id="tulisanku">SELAMAT DATANG</span>
</body>
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:
- Simpan hasil editing file index.html tersebut, kemudian buka pada browser Anda.
- 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\". - Hapus struktur dibawah ini dari bagian <head> yang telah kita tambahkan pada langkah 8 (atau pembaca boleh membuat file HTML baru sebagai bahan latihan untuk cara kedua ini).
<style>
#tulisanku {
color:#FF0000;
text-decoration:underline;
}
</style> - Tambahkan pula struktur berikut pada diantara <head></head>:
<link rel="stylesheet" type="text/css" href="D:\webku\tampilan.css" />
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". - Bagian <body> biarkan seperti pada langkah 9, karena kita sama-sama mendeklarasikan atribut dengan nama "tulisanku".
- Tampilan struktur lengkapnya seperti gambar berikut:
- Simpan hasil editing file index.html tersebut,kemudian buka pada browser.
Selamat mencoba, dan jangan lupa komentar yach :D
ckckckc... lengkap kali lae... lae, yang jadi guru web develompmentnya kau disana?
@lae manurung:
web development dari mana lae? kyknya lae yg pantas jadi guru...pgnnya sih lae yg jadi guruku...:D