Tuesday, 2 April 2013

Mengedit web yang sudah ada

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 :

  1. Ubahlah teks dalam list (Kandungan susu) sehingga property font (warna, jenis font, ukurannya sama dengan paragraph pertama)
  2. Ubahlah teks dalam panel menu atas menjadi link dan ketika disorot dengan kursor, warna teks dan backgroundnya berubah
  3. 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)
  4. Tambahkan teks/tulisan yang proporsional dibagian header halaman
Seperti ini nich desain websitenya :


Untuk mendownload source code desain yang belum diapa-apakan atau masih original, Klik disini

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&copy;</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 disini


Jika kamu masih bingung penempatan source code yang telah dijelaskan diatas lihat gambar dibawah ini :

Dan ini code - code yang sudah selesai ditambahkan :

Ditunggu comentnya ya

No comments:

Post a Comment

Google+ Followers