Lutfi Budi Ilmawan Univ. Muslim Indonesia

Presentasi berjudul: "Lutfi Budi Ilmawan Univ. Muslim Indonesia"— Transcript presentasi:

1 Lutfi Budi Ilmawan Univ. Muslim Indonesia
Pemrograman Web CSS Lutfi Budi Ilmawan Univ. Muslim Indonesia

2 Cascading Style Sheet (CSS)
Merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML, seperti menentukan posisi, merubah warna teks atau background dan lain sebagainya. Terkadang element yang terpasang di html memiliki atribut dan nilai yang sama, maka dengan bantuan CSS setiap element di dalam html bisa dimodifikasi dengan mudah. Maka setiap element yang dibuat dengan CSS bisa mempunyai sifat inheritance (turunan). Dalam sebuah website biasanya terdapat satu atau lebih form, seperti form pencarian, registrasi dan lain sebagainya. Form ini biasa digunakan untuk mengumpulkan data dari pengunjung website. Sebuah form, boleh jadi memiliki beragam kontrol, mulai dari text input, Combo box, Button dan lain sebagainya. Kita akan mempelajari sebagian control tersebut karena kontrol ini adalah yang paling sering digunakan dalam halaman web.

3 Selector Selector adalah elemen/tag HTML yang ingin diberi style.
Dengan cara menuliskan langsung nama tag yang ingin diberi style tanpa perlu menambahkan tanda <>. Jika tag HTML yang ingin diberi style memiliki ID, anda dapat menuliskan nama ID tersebut dengan diawali tanda kress (#). Dan jika tag yang diberi style memiliki Class, maka penulisan selector bisa dilakukan dengan tanda titik (.) diikuti dengan nama class.

4 Property dan Value Property adalah sifat-sifat yang ingin diterapkan pada selector, seperti warna text, warna background, jarak antar elemen, garis pinggir dan lain sebagainya. Untuk memberikan nilai/value pada property kita gunakan tanda titik dua ( : ). Setiap property diakhiri dengan titik koma (;).

5 Penulisan CSS Inline Internal External

6 Inline Penulisan kode CSS dengan metode inline ini bisa dilakukan langsung pada tag yang ingin diberi style dengan menggunakan atribut style. Pada metode ini, tidak perlu menuliskan selector. Karena CSS langsung dituliskan pada tag yang ingin diberi style.

7 Internal Metode CSS internal ditulis di dalam tag style yang ditempatkan pada tag head.

8 External Metode yang terakhir adalah dengan membuat file CSS dan dipanggil di dalam tag head. File CSS memiliki ekstensi (akhiran) .css misanya namafile.css. Pemanggilan file CSS dilakukan dengan menggunakan tag link: Atribut rel adalah informasi hubungan (relationship) dari tag link tersebut, yaitu sebagai stylesheet. Href diisi dengan lokasi file CSS yang ingin dimuat. Pemanggilannya sama dengan pemanggilan gambar atau link.

9 Box Model Semua elemen HTML dapat dianggap sebagai kotak. Pada CSS, istilah box model digunakan ketika kita berbicara tentang desain dan tata letak. Box model pada dasarnya sebuah kotak yang membungkus elemen html. Yang terdiri dari: Margin Padding Border

10 Box Model (cont.) Box model dapat memungkinkan kita untuk menambahkan border pada sekitar elemen dan menentukan space (ruang) antar elemen.

11 Box Model Margin Property margin digunakan untuk memberikan jarak antar elemen/tag HTML. Misalnya jarak antar <div> dan tag-tag HTML lainnya. margin-top, memberikan jarak dari atas antar elemen margin-bottom, memberikan jarak dari bawah antar elemen margin-left, memberikan jarak dari kiri antar elemen margin-right, memberikan jarak dari kanan antar elemen

12 Box Model Padding Property padding untuk memberikan jarak antara konten elemen dengan elemen. padding-top, memberikan jarak dari atas antar konten elemen dan elemen padding-bottom, memberikan jarak dari bawah antar konten elemen dan elemen padding-left, memberikan jarak dari kiri antar konten elemen dan elemen padding-right, memberikan jarak dari kanan antar konten elemen dan elemen

13 CSS-Shorthand Box Model
Karena setiap property dapat memiliki lebih dari satu jenis, misalnya margin dapat memiliki 4 jenis. margin- top, margin-right, margin-bottom, dan margin-left. CSS-Shorthand dapat digunakan untuk menggabungkan seluruh value (top, right, bottom, dan left) ke dalam satu property. Contoh untuk Property margin menjadi seperti berikut : margin = [top_value] [right_value] [bottom_value] [left_value]

14 CSS-Shorthand (cont.) Box Model
Ketika diberikan satu nilai pada property margin, ini artinya nilai tersebut diberikan pada seluruh sisi. margin: 20px; Dengan penulisan seperti di atas, maka nilai dari margin-top, right, bottom dan left adalah 20px. Ketika diberikan dua nilai pada property margin, berarti nilai selanjutnya mengikuti nilai sebelumnya. Dan ketika dinuliskan tiga nilai, maka nilai yang tidak diisi akan mengikuti nilai yang diisi, sama halnya ketika kita memberi 2 nilai.

15 Box Model Border Property border digunakan untuk memberikan garis pinggir pada elemen, setidaknya ada tiga property yang harus di set, yaitu color, style dan width. Jika diubah contoh kode di atas menjadi CSS- shorthand, kodenya menjadi seperti berikut :

16 Typography Secara default (bawaan), halaman web yang dibuat akan menggunakan font standar yaitu Times New Roman. Font dapat diubah dengan property font-family. Font tidak dapat diubah jika font yang ditentukan tidak terdapat pada pc. Maka, dapat diberikan lebih dari satu jenis font, font-font yang disebutkan selanjutnya akan menjadi pengganti ketika font sebelumnya tidak ditemukan.

17 Sans-serif dan Serif Typography
Dalam typography jenis font dibagi menjadi dua yakni serif dan sans-serif.

18 Typography Serif Kata Serif bisa diartikan sebagai kait, jadi jenis huruf serif memiliki kait disetiap ujung hurufnya. Font jenis serif yang paling terkenal adalah Times New Roman. Font jenis ini bisa kita gunakan untuk teks dengan konteks formal atau gaya klasik.

19 Typography San-serif Arti dari sans, adalah “tanpa”. Jadi sans-serif bias diartikan sebagai jenis font tanpa kait. Yang paling umum digunakan untuk jenis sans-serif adalah arial. Jenis ini memberikan kesan dinamis dan luwes.

20 Property lainnya Typography font-size  menentukan ukuran font
font-weight  menentukan ketebalan font (normal, bold, dan bolder) letter-spacing  mengatur jarak antar huruf line-height  mengatur jarak antar baris text-align  menyelaraskan teks (right, left, justify, dan center)

21 Floating Property float (melayang) digunakan untuk mengatur letak posisi elemen HTML. Elemen dapat diposisikan di sebelahkiri atau kanan, sehingga memungkinkan elemen lain untuk membungkus di sekitarnya. Pada CSS Floating, elemen melayang horizontal, ini berarti bahwa elemen hanya dapat melayang pada sebelah kiri atau kanan. Sehingga value yang digunakan hanya left dan right. Float berarti melayang. Ketika kita memberikan float pada elemen maka elemen tersebut seolah-olah melayang dan elemen di atasnya (parent) menganggap tidak ada elemen didalamnya (child).