Selamat Sore kawan
gudangsoft, kali ini ane akan berbagi pengetahuan tentang cara membuat Layout Website mengunakan
CSS.
semoga tulisan ini bisa membatu temen GS semua, dalam mendesain Layout website dalam pembuatan Skripsi nanti.
Sebelum saya membahas Lebih jauh lagi tentang
CSS tentunya kita harus tahu apa yang dimaksud dengan
CSS. berikut sedikit uraian tentang CSS
SS (Cascading Style Sheet) adalah salah satu bahasa desain web (
style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda(
markup laguage.
Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML,
tetapi sekarang CSS bisa diaplikasikan untuk segala dokumenXML, termasuk
SVG dan XUL bahkan ANDROID.
Selanjutnya
dalam membuat layout website dari awal, mungkin cara ini dapat membantu
kita , karena dengan mencari referensi dari web lain, kita tinggal
menterjemahkannya ke dalam media kertas.
Berikut ini adalah salah satu
website yang saya buat yang akan kita jadikan contoh untuk membuat
sebuah layout website.
Gambar tampilan website diatas 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.
Gambar dibawah ini merupakan layout yang ingin kita terjemahkan
dengan menggunakan CSS. Dilayout tersebut terdapat 4 kerangka website,
yaitu bagian HEADER, BODY, SIDEBAR, dan FOOTER.
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;
}
Atau bisa langsung dunlud filenya
DISINI
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>
<p>By : <a href="gudangsoft.web.id">Gudang Software</a></p>
</body>
</html>
Atau langsung bisa dunlud File HTML nya DISINI |
|
Demikian cara untuk membuat layout website dengan
menggunakan CSS. Semoga bermanfaat dan Selamat berkreasi dengan website
yang akan anda buat, semoga hasilnya memuaskan.
Sumber : dari beberapa sumber
Selamat pagi, salam sehat selalu
