Magic Adakabrada!

Mainan Web Design 2015 : Basic CSS

Pekan ini kita akan hidupkan hari-hari indah dengan mainan script CSS (#eaa..#eaa..).

Basic CSS untuk membuat design dan style pada tampilan HTML yang Anda buat. Sebelum bermain lebih lanjut, disarankan untuk Anda memiliki buku acuan tentang CSS,

Buku acuan Basic CSS

Selain itu Anda juga bisa mendapatkan referensi secara online dari beberapa link situs berikut ini,

Permainan Basic CSS ?

Setiap mahasiswa diminta untuk mengerjakan mainan dibawah ini. Setiap permain tergantung dari kategori NIM untuk Genap dan Ganjil. Perhatikan code HTML berikut ini,

<html>
<head>
 <title>All About Me</title>
 <link rel="stylesheet" type="text/css" href="gaya.css"> 
</head>
<body>
<div id="header"> 
 <h1>My Profile</h1> 
 <span id="tagline">
 "selalu memberikan yang terbaik"
 </span> 
 <div class="menutop">
 <ul>
 <li><a href="#" class="menu">Home</a></li>
 <li><a href="#" class="menu">Gallery</a></li>
 <li><a href="#" class="menu">Profile</a></li>
 <li><a href="#" class="menu">Link</a></li>
 </ul>
 </div>
 
</div> 
 
<div id="main-content">
 <p class="konten"> 
 Hari ini begitu indah untuk belajar HTML. Saya sangat mencintai HTML sepenuh hati.
 </p>
 <p class="konten">Hobby Saya:
 <ul class="listkonten"> 
 <li>Mancing</li>
 <li>Futsal</li>
 <li>Makan Banyak</li>
 <li>Mandi</li>
 </ul>
 </p>
 
 <div class="konten">
 <h3>Menu Makanan Hari ini</h3>
 <p>
 <table border="1">
 <tr>
 <th>No Menu item</th>
 <th>Calories</th>
 <th colspan="2">Size (g)</th>
 </tr>
 <tr>
 <td>1</td>
 <td>Chicken noodle soup</td>
 <td>120</td>
 <td rowspan="2" >2</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Caesar salad</td>
 <td>400</td> 
 </tr>
 <tr>
 <td>3</td>
 <td>Chicken noodle soup</td>
 <td>120</td>
 <td>2</td>
 </tr>
 <tr>
 <td>4</td>
 <td>Caesar salad</td>
 <td>400</td>
 <td>26</td>
 </tr>
 </table>
 </p>
 </div>
 <hr />
 
 <h2>Ceritaku Hari ini</h2>
 <p class="konten">
 Hari ini begitu indah untuk &nbsp; &laquo; belajar HTML. Saya sangat mencintai HTML sepenuh hati.Hari <i>ini begitu indah untuk belajar</i> HTML. Saya sangat <b>mencintai</b> HTML sepenuh hati.Hari ini begitu indah untuk belajar HTML. <pre>Saya sangat mencintai HTML sepenuh hati.</pre> Hari ini begitu indah untuk belajar HTML. Saya sangat mencintai HTML sepenuh hati.Hari ini begitu indah untuk belajar HTML. Saya sangat mencintai HTML sepenuh hati.Hari ini begitu indah untuk belajar HTML. Saya sangat mencintai HTML sepenuh hati.
 </p>
</div>
<div id="footer">
 bagian bawah dari tampilan website Anda &copy 2015
</div> 
 
</body>
</html>

Anda diminta untuk melakukan modifikas pada tampilan style dan design dari layout HTML diatas dengan menggunakan CSS. Lakukan beberapa perintah berikut ini.

  1. Modifikasi warna huruf pada class Judul mirip seperti “Merah Tel-U”
  2. Modifikasi warna huruf pada class Judul dengan warna biru
  3. Ubah ukuran Font class Judul menjadi lebih Besar
  4. Ubah ukuran Font bagian tagline menjadi lebih kecil dan italic
  5. Buatlah agar tampilan menutop pada class menu menjadi horizontal (menyamping)
  6. Buatlah agar tampilan menutop pada class menu menjadi horizontal (menyamping)
  7. Ubah warna background setiap bagian menu menjadi Hijau
  8. Ubah warna background pada bagian menutop menadi Biru
  9. Modifikasi bentuk/jenis dan ukuran huruf pada bagian main-konten
  10.  Modifikasi bentuk/jenis dan ukuran huruf pada bagian konten
  11. Ubah bentuk “bullet” pada listkonten menjadi kotak
  12. Ubah bentuk “bullet” pada listkonten menjadi bentuk selain kotak/bulat
  13. Buatlah tampilan untuk semua tabel tanpa garis pinggir
  14. Buatlah tampilan tabel dengan garis pinggir warna pink dan lebih tebal
  15. Ubah warna background bagian header dari tabel menjadi Merah, dan sesuaikan warna hurufnya
  16. Ubah warna background bagian header dari tabel menjadi Coklat, dan sesuaikan warna hurufnya
  17. Lakukan modifikasi pada bagian konten, ubah jenis dan warna font
  18. Lakukan modifikasi pada bagian backround konten
  19. Buatlah background body menjadi gambar hello kitty
  20. Buatlah background body menjadi gambar Marsha & Bears
  21. Ubah posisi footer menjadi center, dan tambahkan garis pinggir
  22. Ubah posisi footer menjadi right, dan tambahkan garis pinggi putus-putus

Lakukan mainan ini secara individu, kerjakan nomor ganjil-genap sesuai dengan Nim Anda.

Hasil pengerjaan harus Anda bawa ketika kuliah Web Design Berikutnya. Dan silahkan bertanya jika mengalami kesulitan dan pengerjaan mainan ini.

 

 

 

 

 

tambunan

,

One response to “Mainan Web Design 2015 : Basic CSS”

Leave a Reply

Your email address will not be published. Required fields are marked *