Sekarang
kita belajar menambahkan atau mengedit web yang sudah ada agar tampilannnya
lebih bagus dari yang sebelumnya. Misalkan ada harus mengedit/menambahkan
hal-hal seperti berikut :
- Ubahlah teks dalam list (Kandungan susu) sehingga property font (warna, jenis font, ukurannya sama dengan paragraph pertama)
- Ubahlah teks dalam panel menu atas menjadi link dan ketika disorot dengan kursor, warna teks dan backgroundnya berubah
- Isilah bagian sebelah kanan halaman (bagian berwarna biru) dengan suatu konten (misalnya daftar artikel, dsb). Dan percantiklah dengan kreasi CSS anda (tidak ada CSS berarti juga tidak ada nilai)
- Tambahkan teks/tulisan yang proporsional dibagian header halaman
Seperti ini nich desain websitenya :
Pada gambar diatas dengan keterangan 1. List kandungan susu terlihat jelas kalau
property font (warna, jenis font, dan
ukurannya) tidak sama dengan property font paragraph pertama, untuk itu diperlukan
source code tambahan agar propertynya sama semua.
Ketikkan source code dibawah ini diantara <style
type="text/css">…….</style>
:
#isi
p merupkan
keterangan property font pada paragraph pertama, sedangkan #isi ul
merupkan keterangan pada property font list kandungan susu yang dimana warna, jenis
font, ukurannya disamakan.
Pada
gambar dengan keterangan 2. Panel menu
yaitu Depan, Profil, Produk, Kontak, dan Forum merupakan tulisan/teks biasa
yang belum terhubung dengan link manapun. Untuk memberikan suatu link, ketikkan
source code berikut :
Pada
gambar dengan keterangan 3. Bagian sebelah kanan halaman yang
berwarna biru tidak terdapat tulisan/teks apapun (kosong). Untuk menambahkan
teks seperti artikel atau yang lain. Diantara <style
type="text/css">…….</style> dibawah class footer tambahkan :
Tambahkan
source code ini tepat dibawah list kandungan susu :
<p
style="color:red; font:bold 14px candara, arial, tahoma;
text-align:center;">….</p> untuk membuat
paragraph dengan style warna teks merah; font : tebal, 14px candana, arial,
tohama; rata tengah.
Pada
gambar dengan keterangan 4. Bagian header halaman
tidak terdapat tulisan/teks apapun seperti welcome to my web, dsb. Untuk
memberikan suatu tulisan sebelumnya buat class baru diantara <style
type="text/css">…….</style> sebagai CSS-nya.
Lalu
tambahkan source code dibawah ini tepat dibawah tag <body>
Agar
lebih oke, tambahkan pada Bagian bawah halaman yang berwarna
kuning source
code ini tepat dibawah source code halaman yang berwarna
biru
:
<a
href="#Top">Kembali Ke Atas</a> untuk
membuat link yang menuju kebagian atas halaman web.
<font
color="#808080" size="2">copyright Erfan
Bahtiar©</font> untuk membuat copy right Erfan
Bahtiar© dengan property font yang sudah ditentukan.
Untuk mendownload source code desain yang sudah diedit Klik disini
Kurang lebih seperti ini nich website yang tadi setelah diedit dan ditambahkan beberapa source code :
Untuk mendownload penjelasan berbentuk laporan klik disiniJika kamu masih bingung penempatan source code yang telah dijelaskan diatas lihat gambar dibawah ini :
No comments:
Post a Comment