Pada bab-bab sebelumnya, kita telah berkenalan sekilas dengan dunia web dan belajar tentang struktur html. Sekarang kita akan langsung masuk dan mencoba membuat dokumen HTML sederhana yang di kombinasikan dengan CSS, agar konsep-konsep yang telah dijelaskan sebelumnya menjadi lebih jelas.
CSS adalah bahasa yang digunakan untuk memberikan konten gaya penampilan yang bagus.
Jadi jika pada penjelasan sebelum nya kita membuat file HTML masih tidak beraturan, dengan di tambah CSS kita bisa memodifikasi atau mendesain tata letak sesuai dengan yang kita ingin kan
ok sebagai contoh untu melakukan saya membuatkan file HTML terlebih dahulu
simpan dengan file nama index.html
maka ketika di run atau di jalankan akan tampil seperti gambar di bawah ini
}
CSS adalah bahasa yang digunakan untuk memberikan konten gaya penampilan yang bagus.
Jadi jika pada penjelasan sebelum nya kita membuat file HTML masih tidak beraturan, dengan di tambah CSS kita bisa memodifikasi atau mendesain tata letak sesuai dengan yang kita ingin kan
ok sebagai contoh untu melakukan saya membuatkan file HTML terlebih dahulu
simpan dengan file nama index.html
maka ketika di run atau di jalankan akan tampil seperti gambar di bawah ini
Gbr. Hasil Run File index,html
Nah tulisan masih belum teratur masih blank putih dan tulisan warna hitam, agar tampilan bagus kita bisa tambahkan css di html tersebut. seperti contoh pada gambar di bawah ini
untuk menambahkan css atau menyisipkan css di file html ini kita perlu tag dengan nama <style> dan di tutup dengan </style>.
ikuti kodingan yang saya contoh kan di atas,.
di atas di dalam tag <style> ada tulisan body{ backgroud : cyan ; } itu kita berarrti manandakan bahwa kita ingin memberi background dasar pada body website kita berwarna cyan atau biru muda
dan ada tanda
#content{
margin : auto ;
width : 800px;
padding : 10px ;
background : yellow ;
}
# di atas itu bisa di bilang id,.
jadi kita memanggil di sisipan tag html dengan kata ID seperti contoh di gambar atas ada <div id=content> itu berrti kita memanggil css dengan nama content (#content) dan akan menjalankan aksi yang ada di tag content itu sendiri di dalam div
selain "#" atau ID ada juga tag "." atau CLASS.
contoh :
.content{
margin : auto ;
width : 800px;
padding : 10px ;
background : yellow ;
}
maka untuk pemanggil css di atas kita bisa memanggil dengan class seperti <div class=content> jadi dalam file css cara pemanggilan nya pun seperti itu,.
ok untuk result css dan html di atas seperti gambar di bawah ini.
hasil perpaduan html dan css
ok untuk file css juga bisa di pisah dengan html,.
yaitu kita memuat file dengan format .css seperti contoh style.css nah di dalam file itu kita tidak perlu mengetik <style> dan di tutup </style> kita hanya mengetik aksi" CSS saja seperti #content{ margin: .....; dll } atau .content{ margin:....; dll} atau kita bisa membuat tag tanpa # atau . tapi harus ada tag yang dalam html contoh
table{
color : red;
}
atau
body{
background : green ;}
jadi jika kita betik di html <body> maka otomatis warna nya jadi hijau
atau kita bikin <table> maka tulisan nya akan berubah jadi merah
ok untuk aksi-aksi css nanti akan saya coba bikin tutorial nya di halaman berikut nya,.
Tidak ada komentar:
Posting Komentar