Appsiinfo

Tutorial Cara membuat website sederhana sendiri || Part 2 CSS

Appsiinfo ~ nah sahabat, kita kembali lagi nih, belajar bagaimana sih membuat web yang keren, nah setelah, sebelumnya kita membuat web. sepert ini

web sederhana
web sederhana

mungkin, itu belum bisa di sebut halaman web, tapi percayalah itu adalah bagian dari web juga
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.

 
cssinternal
kode css


 
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
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
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.

web sederhana
pewarrnaan web

nah kurang lebihnya seperti itu, sekarang  kita akan belajar menata web kita dengan model seperti ini.

template web sederhana
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
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