Percobaan 1 : Mengatur Width Dan Height Hasil :

Choirul anam /D3 PJJ 2103167012

Percobaan 1 : Mengatur Width Dan Height Hasil :


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


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



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.


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



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)


Percobaan 4 : Menerapkan Overflow

Hasil :

Choirul anam /D3 PJJ 2103167012 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.


Percobaan 5 : Ukuran Lebar Garis Tepi Hasil :

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.


Percobaan 6 : Menerapkan Border Style Hasil :


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


Percobaan 7 : Menerapkan Warna Pada Garis Tepi Hasil :

Analisa : Berbagai cara penerapan value dari property border-style bisa dilihat contoh kode di atas


Percobaan 8 : Padding Hasil :

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 (%).


Percobaan 9 : Margin Hasil :


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


Percobaan 10 : Mengatur Posisi Konten Hasil :


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


Percobaan 11 : Mengatur Display Hasil :

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
yang biasanya akan berjajar ke bawah pun akan menjadi sejajar (inline).


Percobaan 12 : Garis Tepi Berupa Gambar Hasil :

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).


Percobaan 13 : Mengatur Box-Shadow Hasil :


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.


Percobaan 14 : Mengatur Border Radius Hasil :

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


Percobaan 15 : Bentuk Elips Hasil :


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 :

Hasil :




Tugas 2 :

Hasil :


Percobaan 1 : Mengatur Width Dan Height Hasil :

Recommend Documents