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 &copy; 2011 <a
href="http://rudydevianto.com">Rudy Devianto.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 rudydevianto.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 12 px, 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 Footer dengan nama style.css

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


Hasil setelah diberi pengaturan CSS

Ketika mouse diatas menu

Ketika mouse berada pada link copyright

Sangat menarik bukan jika anda menguasai CSS…?
Kesimpulan :
File HTML hanya digunakan untuk pengaturan membuat konten dan untuk pengaturan tampilan menggunakan CSS.
Anda bisa menggabungkan semua materi mulai BAB 1 sampai BAB V menjadi satu kesatuan dan ini hitung-hitung untuk anda melatih kemampuan dalam mempelajari CSS.