| web sederhana |
hehehe.. gausah gundah gulana, mari kita lanjutkan perjuangan kita. hehehe .... setelah kita mengenal css, mari kita terapkan dalam web kita. nah untuk sekarang kita belajar menggunakan css internal dulu yah, biar tidak susah nantinya. untuk format penulisannya css internal terbilang sangat mudah, caranya tambahkan kode "<style type="text/css"></style>" di anatara kode "<head></head>" kurang lebih seperti ini.
nah seperti itulah, kira-kira untuk penulisannaya. nah sekarang bagimana cara untuk menyambungkan kode html tadi dengan css. sangat mudah kok, kita tambahkan tag "class" pada div. lebih jelasnya lihat gambar di bawah ini.
| tag class |
nah setelah seperti itu, mari kita mulai menata web kita agar lebih rapi. kita mulai dari mengatur header. masukkan kode berikut di style css.
| kode css |
nah untuk penampakannya seperti itu kira-kira. dan untuk hasilnya pastikan seperti ini
nah mulai ada gambarannya mungkin di benak sahabat, kita lanjut koding lagi,tambahkan koding berikut agar web terlihat full screen.
letakkan koding itu di bawah "<style type="text/css">" nah setelah itu lihat hasilnya.
setelah mengetahui.itu cobalah untuk div class yang lain beri warna berbeda.
| pewarrnaan web |
nah kurang lebihnya seperti itu, sekarang kita akan belajar menata web kita dengan model seperti ini.
![]() |
| template web sederhana |
nah mari kita lakukan sahabat. untuk membentuk seperti ini kita hanya merubah css saja dan terbilang sangat mudah. kita fokus pada width dan penambahan float pada css kita. nah daripada kita berteori. mari kita praktekkan sekarang.
nah cocokkan kode css sahabat dengan yang di atas, penambahan float ada di side-bar, dan pada header kita tambahkan "clear: both;". maka hasilnya akan seperti ini.
| web sederhana |
nah sekarang sudah mulai ada perkembangan nih, hasil dari web kita. itulah cara sederhana untuk membuat template web. terus kembangkan mungkin anda kurang suka dengan warna backgound web sahabat bisa cek disini sekarang kita akan belajar membuat menu navigasi dan submenu.

No comments:
Post a Comment