Dalam hal ini saya akan coba menjelaskan tentang cara pembuatan halaman website dengan dekorasi menggunakan Cascading Style Sheet atau yang disebut dengan CSS. Mungkin di antara rekan-rekan sekalian pernah melihat serangkaian program html
yang disertai dengan External Style, maksudnya adalah Stylesheet yang
di ambil dari file lain atau CSS yang terpisah, ini biasanya diterapkan
pada bagian header, tepatnya di antara <head>...</head><head>
<link rel="stylesheet" href="http://www.domain.com/style.css" />
</head>
Sedangkan fungsi dari CSS ini adalah untuk menyesuaikan tampilan sebuah halaman website tersebut, seperti misalnya warna latar belakang, warna garis pinggir, lebar halaman, dekorasi teks, dan sebagainya. Sedangkan untuk penerapanya bisa di masing-masing tag pada bagian <body> untuk di tampilkan, seperti misalnya tag <p>, <div>, <span>, dan lain-lain.
Contoh:
<p style="color:#339900;">ini adalah paragraf</p>
Hasilnya adalah:
ini adalah paragraf
Sedangkan untuk mempermudah pembuatanya, butlah inline style pada bagian yang ingin menggunakan stylesheet tersebut, seperti pada contoh di atas, kemudian setelah selesai mendekorasinya anda bisa memindahkan nya menjadi satu bagian dengan memberikannya masing-masing nama class atau id, seperti contoh dibawah ini:
<style type="text/css">
.span_satu{color:#339900;}
#id_satu{color:#339900;}
</style>
Kemudian tambahkan style class atau id tersebut pada bagian <div> atau yang lainya yang ingin menggunakan dekorasi stylesheet tersebut.
Contoh:
<div class="span_satu">ini adalah paragraf</div>
Hasilnya adalah:
ini adalah paragraf
Apakah anda sudah paham dengan yang saya maksud...?
Baiklah, dibawah ini adalah contoh sebuah halaman website dengan dekorasi CSS Style, silahkan Copy dan Paste pada form dibawah kemudian berikan sedikit perubahan pada teks atau dekorasi CSS nya dan tekan tombol Preview untuk melihat hasilnya.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Halaman Website</title>
<style type="text/css">
#header{
background-color:#00CCFF;
color:#999999;
margin-left:20%;
margin-right:20%;
padding:10px 10px 10px 10px;
font-family: "Comic Sans MS";
font-size:18px;
}
</style>
</head>
<body>
<div id="header">Selamat Datang...!</div>
</body>
</html>
Ko perasaan lumayan susah ya, masalahnya saya kan belum hapal tentang kode warna, tag-tag html, dan lain-lain...!!
Masalahnya bukan ada pada anda, melainkan penjelasan saya yang mungkin kurang dimengerti, tapi Anda tidak perlu khawatir dengan masalah ini, silahlan gunakan software DreamWeaver8 untuk membuat atau mengedit kode tersebut, disana nanti anda akan di pandu dalam pembuatannya, silahkan perhatikan Video berikut untuk penggunaan DreamWeaver8, tapi sebelumnya ganti ke kwalitas HD untuk
0 komentar:
Post a Comment
Terimakasih telah berkunjung ke blog kami dan kami harapkan partisipasi komentar dari anda ! Semoga artikel kami bermanfaat "