Salam NewGen, sebelum-sebelumnya kita sudah belajar
tentang PHP/MySQL agar tampilan web kita lebih menarik dan indah dilihat kali
ini saya akan share tentang membuat Layout web sederhana dengan css.
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="style.css" rel="stylesheet" type="text/css">
</head>
jika kalian 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. Disini saya akan membuat Layout web
sederhananya seperti cara kedua.
Caranya mudah, pertama kita buat file cssnya
terlebih dahulu, disini saya menggunakan Dreamweaver. Open kemudian
New>>CSS, ketikkan Script seperti dibawah ini.
contohcss.css
#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;
}
Kemudian simpan dengan nama contohcss.css
Setelah disimpan kita buat file htmlnya, scriptnya
seperti dibawah ini.
Tampilancontohcss.html
<html>
<head>
<title>Membuat Layout Website Dengan CSS</title>
<link href="contohcss.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>
<p><marquee>
<span
class="style1">www.sopianmuhamad10.blogspot.com</span>
</marquee>
</p>
</div>
</div>
</body>
</html>
Simpan dengan nama tampilancontohcss.html
Selesai deh, sekarang tinggal kita jalankan file
htmlnya dan alhasil....
Semoga bermanfaat, tetap semangat untuk belajar...
silahkan buat para NewGen yang ingin Source Code Lengkapnya Download DISINI
Salam NewGen.....
No comments:
Post a Comment