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 ++
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 © 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;
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.
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. 🙂
MATERI CSS
Jika kalian baru mengenal CSS silakan belajar dari materi pertama :
Materi ke-1 : Fungsi HTML dan CSS pada WEB
Materi ke-2 : Aturan penulisan CSS
Materi ke-3 : Cara menggabungkan HTML dan CSS
Materi ke-4 : Property pada CSS
Materi ke-5 : Tips Mahir Menguasai CSS
Materi ke-6 : Membuat Desaign Layout
Materi ke-7 : Membuat Menu Navigasi
Materi ke-8 : Mengedit Konten
Materi ke-9 : Mengedit Kolom Right
Materi ke-10 : Mengedit Footer
Materi ke-11 : Menggabungkan Seluruh Materi
Materi ke-1 : Fungsi HTML dan CSS pada WEB
Materi ke-2 : Aturan penulisan CSS
Materi ke-3 : Cara menggabungkan HTML dan CSS
Materi ke-4 : Property pada CSS
Materi ke-5 : Tips Mahir Menguasai CSS
Materi ke-6 : Membuat Desaign Layout
Materi ke-7 : Membuat Menu Navigasi
Materi ke-8 : Mengedit Konten
Materi ke-9 : Mengedit Kolom Right
Materi ke-10 : Mengedit Footer
Materi ke-11 : Menggabungkan Seluruh Materi
Spread the love