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:
Seperti itulah dasar pembuatan web dengan menggunakan HTML dan CSS. Sekarang tinggal membuatnya lebih kompleks sesuai dengan kebutuhan kita.
.bmp)
<body>
SELAMAT DATANG
</body>
<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>
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.
<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:
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\".
<style>
#tulisanku {
color:#FF0000;
text-decoration:underline;
}
</style>
<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".
Selamat mencoba, dan jangan lupa komentar yach :D
..::Fantasi::..
Mengenai Saya
"Welcome"
Share
"Welcome"
Entri Populer
-
Hal seperti ini sering membuat jengkel para user ketika memasukkan atau menambahkan gambar baik berupa sebuah loggo, scan tanda tangan, g... -
Tik tok tik tok, sambil menunggu waktu berbuka puasa lebih baik kita belajar animasi dengan Flash. Pada Tutorial Flash kali ini kita akan m...
-
Untuk Resep Kue Kering yang keempat atau yang terakhir ini yakni membuat Resep Kue Kering Coklat . Resep Kue Kering Coklat Bahan-bahann... -
Semua aplikasi image editor / grafis dari freeware hingga yang berlisensi punya fitur ini. Yang mudah pakai aplikasi bawaan windows saja, k...
-
prakasasion.blogspot.com ,Di hari yang cerah ini saya mencoba nemenin sobat nih yang emang lagi ga keluar rumah atau lagi ga kerja, semoga...
0 komentar:
Posting Komentar