Tugas Materi Nama
: Percobaan Praktikum 8 : CSS Boxes : Dwi Setiya Ningsih
NRP
: 2103157025
CSS BOXES Langkah Kerja Berikut ini langkah kerja yang perlu anda lakukan selama menyelesaikan semua percobaan yang ada pada praktikum ini 1. Buatlah folder baru bernama “Praktikum8” dan pastikan anda menyimpan semua file percobaan di praktikum ini pada folder tersebut 2. Buat folder css dan images 3. Simpan semua file gambar yang diperlukan pada file images 4. Buka teks editor pilihan anda 5. Ketikkan semua kode yang ada pada tiap percobaan 6. Setiap kali anda menyelesaikan satu percobaan, simpan dengan nama file sesuai nomor percobaan dengan ekstensi .html 7. Apabila anda menggunakan notepad, pastikan anda merubah pilihan tipe file pada “Save as Type” menjadi “All Files” 8. Apabila anda menggunakan notepad++, pada pilihan tipe file, pilih yang bertipe HTML.
Percobaan Percobaan 1: Mengatur Width dan Height
Analisis: Mengatur wadah
sebesar 75% x 75% dari wadah
dengan jarak margin yang sama
Percobaan 2: Membatasi Ukuran Minimal Dengan Min-width dan
Max-width
Analisis: Mengatur ukuran suatu wadah dalam batasan min-max width, sehingga objek tidak melewati batas yang ditentukan
Percobaan 3: Membatasi Ukuran Minimal Dengan Min-height dan Max-height
Analisis: Jarak sesuai dengan nilai max-min height, tidak peduli tumpang tindih
Percobaan 4: Menerapkan Overflow
Analisis: Overflow:hidden --> menyembunyikan sisa dari isi syntax (ms
) yang tidak tertampung pada suatu wadah (ms. Box) Overflow:scroll --> fungsi untuk men-scrool isi suatu syntax (ms.
) yang tidak tertampung pada wadah sehingga masih dapat dilihat dengan men-scroll-nya keatas-bawah
Percobaan 5: Ukuran Lebar Garis Tepi
Analisis: Border-width, membuat ketebalan dari border
Percobaan 6: Menerapkan Border Style
Analisis: Solid, untuk bingkai utuh/solid Dotted, untuk bingkai berupa titik-titik Dashed, untuk bingkai berupa garis putus-putus Double, untuk bingkai ganda Groove, untuk bingkai kesan 3D dengan warna cenderung kuat pada sisi kiri & atas, sedang sisi lain cenderung lemah (kurang cahaya) Ridge, untuk bingkai kesan 3D dengan warna cenderung kuat pada sisi kanan & bawah, sedang sisi lain cenderung lemah (kurang cahaya) Inset, untuk bingkai dengan warna kuat pada sisi kiri & atas, sedang sisi lain cenderung lemah Outset, untuk bingkai dengan warna cenderung kuat pada sisi kanan & bawah, sedang sisi lain cenderung lemah
Percobaan 7: Menerapkan Warna Pada Garis Tepi
Analisis: Solid, untuk membentuk suatu bingkai menjadi bentuk solid/utuh Dotted membuat bentuk bingkai berupa titik-titik Hex code diatas ditulis untuk pewarnaan border atas yang kemudian berputar searah jarum jam (abu-abu --- hitam --- pink --- cyan)
Percobaan 8: Padding
Analisis: Padding digunakan untuk mengatur jarak antara objek 1 denagan yang lain
Percobaan 9: Margin
Analisis: Margin digunakan untuk mengatur jarak antara objek dengan tepian ‘ground’, titik margin opx berada di pojok kiri layar Padding digunakan untuk mengatur jarak antara objek 1 denagan yang lain
Percobaan 10: Mengatur Posisi Content
Analisis: Text-align : untuk mengatur perataan text
tidak diberi perintah khusus maka mengikuti
yaitu Center
diberi perintah khusus berupa Left maka perataannya menjadi rata kiri
Percobaan 11: Mengatur Display
Analisis: Display:Inline --> menata display sejajar secara horizontal Display:none --> untuk menyembunyikan/tidak menampakkan objek pada saat run
Percobaan 12: Garis Tepi Berupa Gambar
Analisis: Border-image : membuat suatu gambar menjadi sebuah border
Percobaan 13: Mengatur Border Radius
Analisis: Border-radius, mengatur jarak anatara border dan isi body atau syntax tertentu
Percobaan 14: Box Shadow
Analisis: Box-shadow memberikan efek bayangan bayangan pada objek Perputaran sudut bayangan dari pojok kiri atas lalu berputar searah jarum jam
Percobaan 15: Bentuk Elips
Analisis: Top-left-radius : untuk memberikan jarak pada titik temu box ujung kiri atas Border-radius : memberikan jarak antar titik pada box sesuai nilai inputan Border-radius 100% : membuat box memiliki radius 100% antar titik sehingga menjadi bentuk lingkaran
