Tutorial ini lanjutan dari tutorial :
Cara buat file html layout
Cara buat menu navigasi
Seperti biasa copy pastekan html di bawah ini ke notepad anda :
<html>
<head>
<title>Membuat Layout Web</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="container"> <div id="content"> <p> </p>
</div>
<div id="right">
<h2 class="member">Member Login</h2> <form name="memberLogin" action="#" method="post"> <input type="text" name="name" class="txtBox" value="nama-anda-" /> <input type="password" name="name2" class="txtBox" value="-password-" /> <a href="#">Register here</a> <input type="submit" name="login" value="" class="login" /> <br class="spacer" /> </form> <p class="bottom"></p>
<h2 class="categories">Categories</h2>
<ul>
<li><a href="#">Panduan blog</a></li>
<li><a href="#">Belajar HTML</a></li>
<li><a href="#">Belajar CSS </a></li>
<li><a href="#">Blogger </a></li>
<li><a href="#">Wordpress </a></li>
<li><a href="#">Template</a></li>
<li class="noImg"><a href="#">Menu</a><br class="spacer" /> </li>
</ul>
</div>
</body>
</html>
<head>
<title>Membuat Layout Web</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="container"> <div id="content"> <p> </p>
</div>
<div id="right">
<h2 class="member">Member Login</h2> <form name="memberLogin" action="#" method="post"> <input type="text" name="name" class="txtBox" value="nama-anda-" /> <input type="password" name="name2" class="txtBox" value="-password-" /> <a href="#">Register here</a> <input type="submit" name="login" value="" class="login" /> <br class="spacer" /> </form> <p class="bottom"></p>
<h2 class="categories">Categories</h2>
<ul>
<li><a href="#">Panduan blog</a></li>
<li><a href="#">Belajar HTML</a></li>
<li><a href="#">Belajar CSS </a></li>
<li><a href="#">Blogger </a></li>
<li><a href="#">Wordpress </a></li>
<li><a href="#">Template</a></li>
<li class="noImg"><a href="#">Menu</a><br class="spacer" /> </li>
</ul>
</div>
</body>
</html>
Keterangan : Untuk colom right saya membuat form login di bagian atas dengan mengambil gambar yang sudah saya siapkan, karena kalau hanya mengandalkan warna tampak kurang menarik dan ini akan membuat anda bertambah wawasan juga.
Dan di bawah form login saya buat untuk menaruh Categories dengan beberapa Categori dan jarak antar kata Categori akan saya buat titik-titik.
Saya sudah membuat tulisan H1 Member Login lalu form untuk input dengan 2 field text dan 1 tombol submit tanpa value.
Di bawah form login sudah saya buat text Categories dengan menggunakan H2 dengan 8 text Categories masing-masing dengan link “#“.Masing-masing saya sudah beri selector, baik ID maupun class.
Sekarang kita buat file CSS nya, di bawah ini adalah file CSS nya :
body { font-family: Arial, Helvetica, sans-serif;
}
#container { width:1000px; margin:0 auto;
}
#content { background-color:#EBEBEB; width:700px; height:521px; float:left;
}
#right { dth:300px; background-color:#EBEBEB; float:left;
}
.member { width:264px; height:67px; background:url(images/member_login.gif) 0 10px no- repeat;margin: 0 auto; font-size:20px; color:#FFCC00; text-indent:50px; line-height:50px;
}
form{ background:url(images/memberlogin_bg.gif) repeat-y; width:228px; padding:0 18px 0 18px; margin:0 auto;
}
form input.txtBox{ width:206px; height:25px; border-left:#808080 solid 1px; border-top:#808080 solid 1px; border-right:#D4D0C8 solid 1px; border-bottom:#D4D0C8 solid 1px; color:#000000; background-color:#FFFFCC; margin:5 0 17px 0; padding:0 0 0 20px;
}
form a{ font-size:12px; font-weight:bold; color:#FF6600; text-decoration:underline; padding:0 0 0 14px; float:left;
background:url(images/register_here_bg.gif) 0 5px no-repeat;
}
form a:hover{ text-decoration:none; } form input.login{ background:url(images/btn_login.gif) no-repeat; width:53px; height:13px; border:none; cursor:pointer; float:right;
}
.bottom{ background:url(images/memberlogin_bot.gif) no-repeat; width:264px; height:25px; margin:0 0 5px 0; margin:auto;
}
.categories{ font:bold; line-height:40px; font-size:24px; color:#FFFFCC; background-color:#FF9900; padding:0 0 0 17px; margin-top:30px;
}
ul { width:238px; padding:0 0 0 17px;
}
ul li { display:block; background:url(images/dot.gif) bottom repeat-x; height:25px; width:238px;
}
ul li a { background:url(images/arrow.gif) 0 7px no-repeat; font-size:14px; color:#000000; background-color:#EBEBEB; text-decoration:none; margin:0; padding:3 0 3 14px; display:block;
}
#right ul li a: hover{ color:#FFFFFF; background-color:#FF9900;
}
}
#container { width:1000px; margin:0 auto;
}
#content { background-color:#EBEBEB; width:700px; height:521px; float:left;
}
#right { dth:300px; background-color:#EBEBEB; float:left;
}
.member { width:264px; height:67px; background:url(images/member_login.gif) 0 10px no- repeat;margin: 0 auto; font-size:20px; color:#FFCC00; text-indent:50px; line-height:50px;
}
form{ background:url(images/memberlogin_bg.gif) repeat-y; width:228px; padding:0 18px 0 18px; margin:0 auto;
}
form input.txtBox{ width:206px; height:25px; border-left:#808080 solid 1px; border-top:#808080 solid 1px; border-right:#D4D0C8 solid 1px; border-bottom:#D4D0C8 solid 1px; color:#000000; background-color:#FFFFCC; margin:5 0 17px 0; padding:0 0 0 20px;
}
form a{ font-size:12px; font-weight:bold; color:#FF6600; text-decoration:underline; padding:0 0 0 14px; float:left;
background:url(images/register_here_bg.gif) 0 5px no-repeat;
}
form a:hover{ text-decoration:none; } form input.login{ background:url(images/btn_login.gif) no-repeat; width:53px; height:13px; border:none; cursor:pointer; float:right;
}
.bottom{ background:url(images/memberlogin_bot.gif) no-repeat; width:264px; height:25px; margin:0 0 5px 0; margin:auto;
}
.categories{ font:bold; line-height:40px; font-size:24px; color:#FFFFCC; background-color:#FF9900; padding:0 0 0 17px; margin-top:30px;
}
ul { width:238px; padding:0 0 0 17px;
}
ul li { display:block; background:url(images/dot.gif) bottom repeat-x; height:25px; width:238px;
}
ul li a { background:url(images/arrow.gif) 0 7px no-repeat; font-size:14px; color:#000000; background-color:#EBEBEB; text-decoration:none; margin:0; padding:3 0 3 14px; display:block;
}
#right ul li a: hover{ color:#FFFFFF; background-color:#FF9900;
}
Keterangan :
Body {…} jika anda tidak mengatur secara khusus untuk jenis font maka pengaturan font akan diatur dari sini secara keseluruhan.
#container {…} seperti penjelasan sebelumnya yaitu anda buat lebar dari halaman web dengan lebar 1000px terletak ditengah tetapi kali ini saya mencoba mengatur font default bukan dari sini melainkan dari body.
#content {…} tempat untuk meletakkan content ,sebelum nya saya sudah menjelaskan nya seperti di :
Cara buat file html dari content
#right {…} pengaturan dari kolom right itu sendiri dengan nilai lebar 300 px, background color abu-abu #EBEBEB dan float:left.
.member {…} adalah selector class dari H2 text Member Login dengan pengaturan lebar 264 px dan tinggi 67 px, anda mengambil background gambar dari member_login.gif jarak dari kiri 0 dari atas 10px tanpa perulangan gambar (background:url(images/member_login.gif 0 10px no-repeat) dan margin 0 penempatan center (auto) lalu untuk ukuran font sebasar 20 px dengan warna kuning #FFCC00 dengan jarak tulisan dari member login dari tepi sebesar 50 px (text-indent: 50px) dan jarak antar tulisan atas 50 px (line-height:50px).
#form {…} untuk form dibuat background dengan menggunakan images yaitu : memberlogin_bg.gif dengan perulangan hanya dari atas kebawah (background:url(images/memberlogin_bg.gif) repeat-y) lebar 228 px , padding atas 0 , padding kanan 18 px padding bawah 0 padding kiri 18 px, lalu margin 0 auto.
form input.txtBox {…} ini untuk mengatur form input username dan password, anda buat lebar dari ukuran text field lebar : 206 px dan tinggi 25 px, anda buat border supaya lebih cantik dengan border kiri dan atas berwarna #808080 border kanan dan bawah warna #D4D0C8 type border solid lebar border 1 px lalu warna tulisan berwarna hitam #000000 warna text input kuning muda #FFFFCC dengan margin 5 0 17px 0 dan padding 0 0 0 20 px. form a {…} untuk mengatur tulisan Register Here dengan pengaturan sebagai berikut ukuran tulisan 12 px, dengan tulisan tebal (bold) warna tulisan orange #FF6600 menggunakan underline, float left, padding 0 0 0 14 px dan disebelah kiri tulisan akan kita letakkan gambar centang tepat disebelah kiri tulisan (background:url(images/register_here_bg.gif) 0 5px no-repeat ).
form a:hover {…} untuk memberikan efek pada tulisan Register Here ketika mouse diarahkan ke tulisan dengan menghilangkan underline (text-decoration: none).
form input.login {…} selector ini untuk mengatur dan memberi gambar pada submit login yang mana pada kode HTML kita tidak memberikan tulisan login pengaturannya sebagai berikut : Anda beri background image btn_login.gif tanpa perulangan gambar (background:url(images/btn_login.gif) no-repeat ), lebar 53 px, tinggi 13 px, tanpa border,float right, lalu tampilan cursor kita buat symbol tangan (cursor:pointer).
.bottom {…} ini untuk menampilkan gambar bagian bawah form, yaitu dengan memberi background gambar memberlogin_bot.gif tanpa perulangan (background:url(images/memberlogin_bot.gif) norepeat) lebar 264 px , tinggi 25 px, dan kita memberi margin bawah 5 px yang lain margin 0 (margin:0 0 5px 0) dan untuk menampilkan ditengah margin juga kita beri nilai auto (margin : auto). Untuk pengaturan form login sudah selesai dan ini mulai kita mengatur bagian Categories
.categories {…} bagian ini untuk mengatur tulisan Categories dengan pengaturan font tebal (bold) jarak tulisan atas-bawah 40 px (line-height:40px) ukuran besar font 24 px, warna tulisan kuning muda #FFFF00 background warna orange #FF9900 padding anda beri nilai 0 0 0 17px, lalu kita beri jarak dari atas 30px.
ul {…} ini untuk mengatur tempat untuk membuat tulisan bullet yaitu lebar 238 px dengan padding anda beri nilai 0 0 017px.
ul li {…} untuk mengatur tulisan dari categories dengan arah atas kebawah dengan melakukan pengaturan (display:block) lalu anda perlu membuat titik-titik di antara tulisan yaitu dengan memberikan gambar dot.gif posisi hanya di bawah dengan pengulangan gambar horizontal (background:url(images/dot.gif) bottom repeat-x) dengan tinggi 25 px dan lebar 238 px.
ul li a {…} selanjutnya anda melakukan pengaturan dari text dan kita perlu menaruh logo panah di depan text dengan images arrow.gif (background:url(images/arrow.gif) 0 7px no-repeat), ukuran font 14 px, warna font hitam #000000 background color abu-abu #EBEBEB di samakan dengan yang lain,lalu kita hilangkan dulu underline (text-decoration:none) margin 0, padding 3 0 3 14px, lalu anda buat display:block (arah tulisan menurun).
#right ul li a:hover {…} ini untuk memberi efek ketika mouse di arahkan kepada tulisan dengan memberikan warna background orange #FF9900 dan warna tulisan berubah menjadi putih #FFFFFF.
1. Cara buat file html layout
2. Cara buat menu navigasi
3. Cara buat file html dari content
4. Cara buat file html colom right
5. Cara buat file html footer
Baca juga :
» Cara membuat template bawaan blogger menjadi responsive