TUGAS BOXES. 1. Percobaan 1

Ukuran: px

Mulai penontonan dengan halaman:

Download "TUGAS BOXES. 1. Percobaan 1"

Agus Tanudjaja
7 tahun lalu
Tontonan:

1 TUGAS BOXES 1. Percobaan 1 Analisa : Pada percobaan 1, style pada elemen div ditetapkan width dan heightnya 400px dan 300px dengan background color pink, dan pada elemen p, width dan height ditetapkan 75% dari width dan height yg ada dengan background abu abu, perbedaan width dan height ini menjadi terlihat seperti gambar disamping. 2. percobaan 2 Analisa : style pada elemen td min width dan min height diatur 150px dan 200px, isi elemen ini adalah gambar, sedangkan pada elemen td dengan class description min width 450px dan max width 650px. Fungsi min width dan max width adalah menentukan besar minimal dan maksimal sebuah elemen jika ukuran yang tampil di browser diperkecil atau diperbesar, maka jika melewati min width atau max width, dia tidak akan berubah ke ukuran browser, tapi tetap di ukuran min dan max dari elemen tersebut.

3. percobaan3 Analisa :, style pada elemen p diatur min height dan max height, fungsi ini sama dengan percobaan sebelumnya, tetapi disini digunakan untuk tinggi bukan lebar. 4.

2 3. percobaan3 Analisa :, style pada elemen p diatur min height dan max height, fungsi ini sama dengan percobaan sebelumnya, tetapi disini digunakan untuk tinggi bukan lebar. 4. Percobaan4 Analisa : elemen p.one style overflow di hidden, sedangkan elemen p.two style overflow adalah scroll, style ini digunakan sepaket dengan penggunaan max height, jadi jika tinggi melebihi batasan maximal, jika menggunakan menu overflow:scroll maka akan tampil scroll untuk menggulir isi dari elemen ke atas/bawah, jika tidak menggunakan style ini, maka setelah melewati batasan max dari tinggi yang ditetapkan, isi tidak bisa digulir ke atas/bawah.

3 5. Percobaan5 Analisa : elemen p.one menggunakan style border-width:2px; yang berarti ukuran dari border pada elemen p.one adalah 2px. Elemen p.two menggunakan style border-width:thick; fungsinya sama tetapi ukurannya adalah tebal, sedangkan elemen p.three menggunakan style border-width:1px 4px 12px 4px; yang berarti besar border pada atas 1px, kanan 4px, bawah 12px, dan kiri 4px. 6. Percobaan6 Analisa : setiap elemen p dengan class yang berbeda, style yang digunakan juga berbeda, style tsb adalah sbg berikut-solid = seperti pada paragraf pertama, dotted = seperti pada paragraf kedua, dashed = seperti pada paragraf ketiga, double = seperti pada paragraf ke empat, groove = seperti pada paragraf ke lima, ridge = seperti pada paragraf ke enam, inset = seperti pada paragraf ke tujuh, outset = seperti pada paragraf ke delapan.

7. Percobaan7 Analisa : setiap elemen p yang berbeda class akan diterapkan warna dan jenis style border yang berbeda, p.one keseluruhan warna sama, p.

4 7. Percobaan7 Analisa : setiap elemen p yang berbeda class akan diterapkan warna dan jenis style border yang berbeda, p.one keseluruhan warna sama, p.two warna ditetapkan atas kanan bawah dan kiri berbeda, dan p.three menggunakan style dotted dengan 1 warna yg sama. 8. Percobaan8 Analisa : style yg digunakan tiap elemen dengan class yang berbeda adalah beda, untuk elemen p, padding tidak diatur, elemen p.contoh padding diatur untuk semua posisi 10px, p.contoh2 padding diatur atas bawah 10px dan kanan kiri 25px, sedangkan elemen p.contoh3 padding ditetapkan berbedabeda tiap posisi, atas 10px kanan 15px bawah 2px dan kiri 25px. Padding sendiri adalah batasan antara isi atau konten terhadap wadah atau container nya.

5 9. Percobaan9 Analisa : style margin ditetapkan berbeda beda untuk setiap elemen yang berbeda class, sama seperti percobaan 8,tetapi yang di ubah di percobaan 9 adalah margin, margin sendiri adalah batasan luar dengan wadah atau kontainer sebuah elemen. 10. Percobaan10 Analisa :, setiap elemen p yg ada ditetapkan width, padding dan border yg sama, tetapi elemen p dengan class example margin ditetapkan 10px auto 10px auto.

11. Percobaan11 Analisa : elemen li menggunakan style display:inline yang berarti setiap list akan berjajar dibaris yang sama bukan di kolom yg sama tetapi baris yg berbeda beda.

6 11. Percobaan11 Analisa : elemen li menggunakan style display:inline yang berarti setiap list akan berjajar dibaris yang sama bukan di kolom yg sama tetapi baris yg berbeda beda. Sedangkan elemen li dengan class coming-soon style menggunakan display:none yang berfungsi untuk menghilangkan elemen tsb didalam list. 12. Percobaan12 Analisa :, style yang digunakan untuk tiap elemen p dengan class yang berbeda walaupun sama sama menggunakan garis tepi berupa gambar. Pada elemen p.one, gambar akan melebar dngan sendirinya sesuai wadah elemen. Sedangkan pada elemen p.two, gambar akan membulat.

7 13. Percobaan13 Analisa : setiap elemen p dengan class yang berbeda menggunakan style box-shadow yang berbeda, p.one mengatur shadow akan berada pada atas kiri, karena ditetapkan -5px untuk top dan -5px untuk right. P.two shadow berada pada kanan 5px dan bawah 5px dan 5px sebagai blurnya. P.three juga sama, p.four tidak ditetapkan kiri dan kanan tetapi hanya blur yg ditetapkan, dan p.five menggunakan style inset yang berarti box-shadow akan berada di dalam elemen p.five. 14. Percobaan14 Analisa : style yang digunakan untuk elemen p adalah border-radius, ini berfungsi untuk mengubah setiap corner menjadi round sesuai dengan ukuran yang ditetapkan.

8 15. Percobaan15 Analisa : style tiap elemen p dengan class yang berbeda akan di ubah border radiusnya, untuk-p.one, menggunakan style border-top-left-radius: 80px 50px yg berarti radius dari kiri atas ke kanan adalah 80px dan 50px untuk kiri atas ke bawah.-p.two, menggunakan style border-radius : 1em 4em 1em 4em / 2em 1em 2em 1em; yang berarti pengaturan disebelah kiri tanda / adalah untuk mengatur round atas dan bawah sedangkan di sebelah kanan tanda / adalah untuk mengatur kanan dan kiri round border tersebut.-p.three ukuran border radius disamakan dengan width dan height menimbulkan efek bulat pada border tersebut.

dokumen-dokumen yang mirip

CSS BOXES. Langkah Kerja. Percobaan

CSS BOXES. Langkah Kerja. Percobaan Tugas : Percobaan Praktikum 8 Materi : CSS Boxes Nama : Dwi Setiya Ningsih NRP : 2103157025 Langkah Kerja CSS BOXES Berikut ini langkah kerja yang perlu anda lakukan selama menyelesaikan semua percobaan