Kali ini kita akan membuat desain
web yang terdiri dari 4 bagian, yaitu: HEADER, BODY, SIDEBAR, dan FOOTER.
Untuk penamaan bagian-bagian didalam layout disarankan agar nama lebih
spesifik dan agar sesuai dengan fungsinya, supaya kita tidak kebingungan
dalam memasukkan script css.
Buatlah sebuah file dengan nama
style.css dan isi dengan kode CSS berikut ini untuk mendesain layout yang telah
dibuat:
#wrapper {
width: 800px;
margin: 0 auto;
}
#header {
float: left;
width: 100%;
height: 150px;
background-color: red;
}
#body {
float: left;
width: 70%;
height: 300px;
background-color:
blue;
}
#sidebar {
float: left;
width: 30%;
height: 300px;
background-color:
green;
}
#footer {
float: left;
width: 100%;
height: 100px;
background-color:
yellow;
}
Untuk penggunaan CSS sendiri, ada
dua cara yang bisa dipakai, yaitu dengan cara memaasukan langsung script CSS di
dalam tag <head>…</head>, atau bisa juga dengan memasukkan link
yang menghubungkan antara file HTML dengan file CSS.
Berikut ini adalah contoh script
yang memakai cara pertama, yaitu memasukan langsung script CSS di dalam tag
<head>…</head>:
<head>
<title>Test
123</title>
<style>
//script CSS yang
ingin dimasukkan
</style>
</head>
Lalu cara kedua yaitu menyisipkan
link yang menghubungkan file HTML ke file CSS yaitu sebagai berikut:
<head>
<title>Test
123</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
jika anda menyimpan file didalam
folder CSS, maka link yang ditulis harus href=”css/style.css”, namun jika file
CSS yang dibuat ada didalam satu folder dengan file HTML, maka cukup dengan
href=”style.css” saja.
Berikut ini adalah script file HTML
yang di integrasikan dengan file CSS diatas.
<html>
<head>
<title>Membuat
Layout Website Dengan CSS</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>#header</h1>
<p>Ini adalah
bagian HEADER. Biasanya terdapat LOGO, MENU, dan sebagainya.</p>
</div>
<div id="body">
<h1>#body</h1>
<p>Ini adalah
bagian BODY yang merupakan bagian inti dari website.</p>
</div>
<div id="sidebar">
<h1>#sidebar</h1>
<p>Ini adalah
bagian SIDEBAR. Biasanya terdapat MENU, DAFTAR KONTEN, dan
sebagainya.</p>
</div>
<div id="footer">
<h1>#footer</h1>
<p>Ini adalah
bagian FOOTER. Biasanya terdapat HAK CIPTA, MENU, dan sebagainya.</p>
</div>
</div>
</body>
</html>
Demikian cara untuk membuat layout
website dengan menggunakan CSS. Semoga tutorial ini bisa bermanfa'at.. Aamiin....!!
Tidak ada komentar:
Posting Komentar