CSS ( Cascade Style Sheet ) berfungsi untuk mengatur tampilan dari
website, mulai dari format text, sampai bentuk layout. Dengan menggunakan CSS
akan mudah mengatur style elemen dalam suatu website.
Pada pembahasan kali ini, saya akan
membuat tampilan website kurang lebih seperti gambar dibawah ini :
Untuk
pembehasan kali ini software yang dibutuhkan
Notpad, bisa Notpad bawaan windows, atau Notpad ++ (saran saya mending pake
Notpad++ lebih enak), dan tentunya Web Browser (Mozilla, Google Chrome, dll).
Kemudian buka Notpad dan masukkan source code dibawah ini lalu simpan dengan
nama style.css
#bingkai{
padding:2px;
width:1024px;
height:900px;
margin:auto;
background-color:#70747d;
}
#header{
margin-top:10px;
margin:auto;
width:1000px;
height:200px;
padding:10px;
background-color:#c8e1fb;
padding:10px;
}
#menu{
margin:auto;
padding:0px;
width:1000px;
height:50px;
padding:10px;
background-color:#4598ee;
}
#kiri{
margin-left:5px;
margin-top:5px;
padding:10px;
width:220px;
height:500px;
float:left;
background-color:#6aa096;
}
#kanan{
margin-right:5px;
margin-top:5px;
padding:10px;
width:750px;
height:500px;
float:right;
background-color:#a3e673;
}
#footer{
padding:2px;
margin:auto;
width:1024px;
height:30px;
background-color:#6a6372;
}
|
Setelah
itu buat file baru dan masukkan source code dibawah ini dan simpan dengan nama
belajar_css.html (untuk nama file terserah, :D)
<html>
<title>Belajar CSS</title>
<head>
<link
href="style.css" rel="stylesheet"
type="text/css">
</head>
<body>
<div
id="bingkai">
<div
id="header"><h1 align="center"> HEADER
</h1></div>
<div
id="menu"><h1 align="center"> MENU
</h1></div>
<div
id="kiri">
<form
action="login.php" method="post">
<table
border="0" align="center">
<tr><td>USERNAME
: <input type="text" name="username"
></td></tr>
<tr><td>PASSWORD
: <input type="password" name="pass"
></td></tr>
<tr>
<td>
<input
type="submit" value="LOGIN">
<input
type="reset" value="RESET">
</td>
</tr>
</table><hr>
</form>
</div>
<div
id="kanan"><h1 align="center"> KONTENT
</h1></div>
</div>
<div
id="footer" align="center">Copyright © Ouznul
2014</div>
</body></html>
|
Dan langkah terakhir adalah
melihat tampilan dengan menjalankan file belajar_css.html di Web Browser, jika
berhasil maka tampilannya akan seperti berikut ini :
Jangan pernah malas untuk mencoba
Untuk tutorial-tutorial berikutnya di tunggu
aja ya…
Komentar ini telah dihapus oleh pengarang.
BalasHapusoke gan mesti belajar ni ma agan ini
BalasHapusSitus Judi Slot Online Indonesia: Live Casino & Poker Tournaments
BalasHapusSLOT ONLINE TERPERCAYA, TANPA JUDI SLOT ONLINE, RESMI, SLOT luckyclub ONLINE TERPERCAYA. TENTANG KONUS. Situs Slot Online. Game Slot Online.