CSS : Mengedit Footer

Mengedit Footer

Setelah anda membuat layout , menu, content serta colom kanan, kini anda perlu mengedit footer. Buat dulu folder dengan nama BAB V Mengedit Footer , lalu didalam folder tersebut buat juga folder images, karena anda perlu images untuk footer.

Membuat File HTML Footer

Ketikkan kode HTML dibawah ini pada notepad ++

<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="#">PRODUK</a>
                <a href="#">ARTIKEL</a>
                <a href="#">MEMBER</a>
                <a href="#">TESTIMONIAL</a>
                <a href="#">ABOUT US</a>
            </p>
            <p id="copy">
            Copyright © 2011 <a href="http://fajaryusuf.com">Fajar Yusuf.com</a>
            </p>
        </div>
</div>
</body>
</html>

Penjelasan untuk kode diatas:

File HTML diatas sudah saya buat tulisan HOME-PRODUK-ARTIKELMEMBER-TESTIMONIAL-ABOUT US dengan masing masing sudah saya beri link ” #”
Saya juga memberi tulisan Copyright dan kode &copy merupakan kode untuk membuat symbol © dan nama webnya dengan link ke fajaryusuf.com.
Masing-masing sudah saya beri selector .

Simpan file tersebut kedalam folder BAB V Mengedit Footer , beri nama footer.html.

Membuat file CSS Footer

Kini saatnya anda membuat file CSS supaya footer lebih bagus untuk disajikan kepada user.

Ketikkan code CSS dibawah ini pada software yang anda pakai

#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;

Penjelasan dari kode CSS yang sudah anda buat :

#container {…} membuat page dengan lebar 100 px margin 0 dengan penempatan ditengah (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 12px, kita beri margin dari atas 25 px dan selebihnya 0, font dibuat tebal (bold) dengan jarak antar huruf 1 px, dan jarak antar kata 8 px.
#bottom a {…} untuk mengatur tulisan yang diberi 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 diletakkan 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 ditengah.
#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 diarahkan pada tulisan dengan memberi efek underline (textdecoration:underline)

Kemudian anda simpan file ini ke folder BABV Mengedit Footer dengan nama style.css

Jika anda benar maka tampilan folder seperti diatas.

Kemudian anda jalankan file footer.html dengan klik 2 kali, demikian hasilnya:

Sangat menarik bukan jika anda menguasai CSS…?

Kesimpulan :
File HTML hanya digunakan untuk pengaturan membuat konten dan untuk pengaturan tampilan menggunakan CSS.

Anda bisa melanjutkan ke materi akhir CSS yaitu : Menggabungkan Seluruh Materi CSS.

Jika ada pertanyaan silakan berkomentar.

Jangan Lupa like dan share.

Belajar Pemrograman di fajaryusuf.com aja. :)