Tutorial ini lanjutan dari tutorial :
Cara buat file html layout
Cara buat menu navigasi
Cara buat file html dari content
Cara buat file html colom right
Dan ini merupakan tutorial yang terakhir.
Kalau gitu kita langsung saja.
Seperti biasa copy paste kode HTML di bawah ini di 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="footer">
<p id="bottom">
<a href="#">HOME</a>
<a href="#">CONTACT</a>
<a href="#">PRIPACY POLICY</a>
<a href="#">ABOUT US</a> </p>
<p id="copy"> Copyright © 2013-2017 <a href="http://caragery.blogspot.com">caragery.blogspot.com</a> </p>
</div>
</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="footer">
<p id="bottom">
<a href="#">HOME</a>
<a href="#">CONTACT</a>
<a href="#">PRIPACY POLICY</a>
<a href="#">ABOUT US</a> </p>
<p id="copy"> Copyright © 2013-2017 <a href="http://caragery.blogspot.com">caragery.blogspot.com</a> </p>
</div>
</div>
</body>
</html>
Keterangan : File HTML di atas sudah saya buat tulisan HOME CONTACT PRIPACY ABOUT US dengan masing masing sudah saya beri link/tanda ”#” yang nanti nya anda ganti dengan link anda sendiri.
Saya juga memberi tulisan Copyright dan kode © merupakan kode untuk membuat symbol © dan nama web nya dengan link ke caragery.blogspot.com
Masing-masing sudah saya beri selector.
Sekarang kita membuat file CSS nya ,di bawah ini adalah file CSS nya :
#container { width:1000px; margin:0 auto;
}
#footer { background-image:url(images/footer.gif); width:1000px; height:128px; float:left;
}
#bottom { text-align:center; font-family:Geneva; font-size:12px; margin:25px 0 0 0; font-weight:bold; letter-spacing:1px; word-spacing:8px;
}
#bottom a { color:#FFFFFF; }
#bottom a:link{ text-decoration:none; }
#bottom a:hover { text-decoration:underline; color:#FFFF00; }
#copy { margin:25px 0 0 0; font-family:verdana; color:#FFFFCC; font-size:10px; text-align:center;
}
#copy a { color:#FFFFCC; }
#footer #copy a:link{ text-decoration:none; }
#footer #copy a:hover{ text-decoration:underline;
}
}
#footer { background-image:url(images/footer.gif); width:1000px; height:128px; float:left;
}
#bottom { text-align:center; font-family:Geneva; font-size:12px; margin:25px 0 0 0; font-weight:bold; letter-spacing:1px; word-spacing:8px;
}
#bottom a { color:#FFFFFF; }
#bottom a:link{ text-decoration:none; }
#bottom a:hover { text-decoration:underline; color:#FFFF00; }
#copy { margin:25px 0 0 0; font-family:verdana; color:#FFFFCC; font-size:10px; text-align:center;
}
#copy a { color:#FFFFCC; }
#footer #copy a:link{ text-decoration:none; }
#footer #copy a:hover{ text-decoration:underline;
}
Keterangan :
#container {…} membuat page dengan lebar 100 px margin 0 dengan penempatan di tengah (auto).
#footer{…} ini untuk mengatur footer dengan lebar 1000px dan tinggi 128 penempatan float:left
#bottom{…} untuk pengaturan test menu bottom penempatan tulisan ditengan (text-align:center) font menggunakan Geneva,besar font 12 px, kita beri margin dari atas 25 px dan selebihnya 0 font di buat tebal (bold) dengan jarak antar huruf 1 px, dan jarak antar kata 8 px.
#bottom a {…} untuk mengatur tulisan yang di beri link berwarna putih #FFFFFF.
#bottom a:link{…} untuk pengaturan efek dari text menu bottom tanpa underline (text decoration:none).
#bottom a:hover{…} untuk memberi efek jika mouse di letakkan diatas tulisan dengan menambahkan underline (textdecoration:underline) dan warna text berganti warna kuning #FFFF00.
#copy {…} untuk pengaturan tulisan copyright, kita beri margin 25 0 0 0 ,font menggunakan verdana, kuning muda #FFFFCC ukuran font 10 px, penempatan font di tengah.
#copy a {…} memberi pengaturan warna font yang diberi link dengan warna yang sama dengan tulisan copyright yaitu kuning muda #FFFFCC.
#footer #copy a:link{…} memberi efek pada link tanpa underline dengan memberi nilai none (text-decoration:none)
#footer #copy a:hover{…} memberi efek pada link jika mouse di arahkan pada tulisan dengan memberi efek underline (textdecoration:underline)
Dan sekarang coba anda satukan dari :
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
Dan lihat hasil nya…
Baca juga :
» Cara membuat template bawaan blogger menjadi responsive