Percobaan 1 : Mengatur Width Dan Height Hasil :

Ukuran: px

Mulai penontonan dengan halaman:

Download "Percobaan 1 : Mengatur Width Dan Height Hasil :"

Susanti Kartawijaya
7 tahun lalu
Tontonan:

1 Percobaan 1 : Mengatur Width Dan Height

2 Analisa : Terlihat di atas kalau width dan height dari tag <p></p> dan <div></div> berbeda sesuai value yang telah diinputkan yang bias dibedakan dengan background-color yang berbeda seperti di atas

3 Percobaan 2 : Membatasi Lebar Minimal dan Maksimal Dengan Min-Width dan Max-Width

5 Analisa : Min-Width dan Max-Width berguna untuk membatasi ukuran minimum dan maksimum lebar setiap bagian dari kode HTML sesuai dengan value yang diinputkan. Berguna apabila web diakses di bidang yang memiliki resolusi layar atau luas layar yang berbeda. Misalnya, kalo ditampilkan di desktop maka lebarnya akan berbeda (akan mencapai max-width) saat ketika web dibuka di mobile device (mencapai min-width.

6 Percobaan 3 : Membatasi Tinggi Minimal dan Maksimal Dengan Min-Width dan Max-Width

8 Analisa : Min-Height dan Max-Height berguna untuk membatasi ukuran minimum dan maksimum tinggi setiap bagian dari kode HTML sesuai dengan value yang diinputkan. Berguna apabila web diakses di bidang yang memiliki resolusi layar atau luas layar yang berbeda. Misalnya, kalo ditampilkan di desktop maka lebarnya akan berbeda (akan mencapai max-height) saat ketika web dibuka di mobile device (mencapai min-height)

9 Percobaan 4 : Menerapkan Overflow

10 Analisa : Bisa dilihat di atas di bagian artikel pertama bacaannya tidak tampil penuh karena lebar bidang yang sudah ditentukan baginya tidak cukup untuk menampung sisa bacaannya sehingga kalimat sisanya disembunyikan karena value hidden dari property overflow yang diberikan. Sementara di artikel yang kedua kita melihat ada navigasi scroll untuk melihat kalimat bacaan yang tidak terlihat karena tidak cukupnya bidang yang menampungnya. Terjadi karena peran dari value scroll dari property overflow.

11 Percobaan 5 : Ukuran Lebar Garis Tepi Analisa : Value dari property border-width bisa diisi dengan berbagai cara seperti dengan nilai dalam satuan pixel, dengan pernyataan thick (tebal) setara dengan sekitar 3-4px atau thin (tipis) setara dengan 1-2px. Atau dengan memasukkan nilai dalam satuan pixel dengan 4 nilai dengan cara membaca searah dengan arah jarum jam secara berurutan (atas, kanan, bawah, kiri.

12 Percobaan 6 : Menerapkan Border Style

13 Analisa : Contoh di atas merupakan berbagai value dari property border-style dengan berbagai value dalam bentuk pernyataan (solid, dashed, dotted, dll)

14 Percobaan 7 : Menerapkan Warna Pada Garis Tepi Analisa : Berbagai cara penerapan value dari property border-style bisa dilihat contoh kode di atas

15 Percobaan 8 : Padding Analisa : Padding berarti memberi jarak konten dari garis atau batas tepi penampungnya (Memberi jarak dari dalam bidang penampung). Bisa dimasukkan dalam nilai satuan pixel (px) atau persen (%).

16 Percobaan 9 : Margin

17 Analisa : Margin berarti memberi jarak antara bidang satu dengan bidang lainnya. Seperti contoh di atas.

18 Percobaan 10 : Mengatur Posisi Konten

19 Analisa : Value auto dari margin yang diberikan diatas berguna untuk mengatur secara otomatis (seimbang) antara arah yang berlawanan.

20 Percobaan 11 : Mengatur Display Analisa : Bisa dilihat kalau kata LAYANAN tampil dalam browser. Ini dikarenakan property display yang diberi value none (display: none;) yang berarti tidak akan ditampilkan di browser. Sedangkan value inline membuat tampilan list dari tag <li></li> yang biasanya akan berjajar ke bawah pun akan menjadi sejajar (inline).

21 Percobaan 12 : Garis Tepi Berupa Gambar Analisa : Border-image mampu membuat garis tepi dari gambar dengan contoh penulisan di atas. Value setelah url link dari gambar merupakan value tambahan jadi meskipun tidak dituliskan juga tidak apa-apa. Terlihat juga di atas border-image ini menggunakan metode adaptasi browser yag diawali dengan moz (Mozilla) webkit (Chrome).

22 Percobaan 13 : Mengatur Box-Shadow

23 Analisa : Contoh di atas merupakan property untuk memberikan bingkai sebuah bidang (box-shadow) yang bisa berupa bayangan atau sebuah pancaran cahaya sesuai dengan value yang diberikan. Jarak bias, kepadatan warna dll juga bisa diatur seperti contoh di atas.

24 Percobaan 14 : Mengatur Border Radius Analisa : Value biasanya dalam satuan pixel (px) atau em untuk menentukan lengkung dari sudut suatu bidang (kode HTML) yang merupakan fungsi dari border-radius.

25 Percobaan 15 : Bentuk Elips

26 Analisa : Berbagai contoh penerapan dari border-radius seperti di atas kita lihat kalau semakin besar value yang diberikan bidang tersebut bisa menjadi sebuah bentuk lingkaran. Tugas 1 :

29 Tugas 2 :

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