Mengatur Halaman Website dengan CSS

source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>
CSS adalah singkatan dari Cascading Style Sheet. Digunakan untuk mengatur halaman serta memperindah tampilan interface sebuah website seperti mengatur warna, tata letak serta font. pada saat postingan ini ditulis, CSS sudah merilis versi ketiganya (CSS 3).

Penulisan Code CSS dapat dilakukan dengan 3 cara :

1. Eksternal (ditulis dalam file terpisah)
2. Internal (ditulis diantara tag head)
3. Inline (ditulis langsung di dalam tag html)   

dari ketiga cara penulisan tersebut, saya lebih suka menggunakan cara pertama yaitu dengan menulis code css pada file terpisah sehingga code programpun akan terlihat lebih rapi. Pada Postingan ini saya akan berbagi sedikit pengetahuan tentang cara mengatur halaman website dengan CSS. 

Mengetik Code CSS 

- Buka Editor Teks anda (Recomended Notepad++)

- Ketik Code Berikut
#kepala{ /* Ini adalah Selector ID */
margin:auto;
width:900px;
height:100px;
border:1px solid #000;
background-color:#ccc;
}

.menu{ /* Ini adalah Selector Class */
margin:auto;
width:900px;
height:30px;
border:1px solid #000;
margin-top:5px;
margin-bottom:5px;
background-color:#666;
}

#badan{
margin:auto;
width:900px;
height:500px;
margin-bottom:7px;
}

#isi{
background-color:#999;
float:left;
width:690px;
height:500px;
border:1px solid #000;
}

#samping{
background-color:#ccc;
float:right;
width:200px;
height:500px;
border:1px solid #000;

}

#footer{
background-color:#333;
text-align:center;
margin:auto;
width:900px;
height:20px;
border:1px solid #000;
}


Saya menyarankan agar anda membuat sebuah folder untuk menyimpan code css tersebut. Simpanlah code tersebut dalam folder yang anda buat dengan nama style.css

Mengetik Code HTML

1. Buka Editor Teks Anda (Notepad atau Sejenisnya)

2. Ketik atau Copy Code Berikut
<html>
<head>
<title>Mengatur Halaman</title>
<!--Ini Code untuk Memanggil File CSS-->
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<!--Ini Code untuk Memanggil Selector yang ada di File CSS-->
<div id="kepala">Ini Kepala Websitenya</div>
<div class="menu">Ini Menu Websitenya</div>

<div id="badan">
<div id="isi">Ini Isi Websitenya</div>
<div id="samping">Ini Bagian Samping Websitenya</div>
</div>

<div id="footer">Ini Footer Websitenya</div>

</body>
</html>
Simpan Code HTML tersebut didalam folder css tadi dengan nama index.html. Sampai disini coba jalankan File index.html tersebut (klik dua kali). jika tidak ada kesalahan maka kurang lebih hasilnya akan seperti berikut ini

Mengatur Halaman Website dengan CSS

Baca Postingan Selanjutnya Tentang Membuat Menu dengan CSS disini.  Happy Coding !
source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>

Share this

Related Posts

Previous
Next Post »

bantu kami untuk lebih baik; jika ada hal yang kurang jelas atau broken link silahkan masukan komentar anda kami akan segera menanggapi dan memperbaikinya. login ke akun gmail anda untuk menampilkan form komentar.