LAPORAN RESMI. Boxes

Ukuran: px

Mulai penontonan dengan halaman:

Download "LAPORAN RESMI. Boxes"

Siska Gunardi
7 tahun lalu
Tontonan:

LAPORAN RESMI Boxes Dosen Pembimbing : Dwi Susanto,ST, MT Oleh Hamidah Nur Hidayati 4103131038 PROGRAM

1 LAPORAN RESMI Boxes Dosen Pembimbing : Dwi Susanto,ST, MT Oleh Hamidah Nur Hidayati PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK ELEKTRONIKA NEGERI SURABAYA 2015

5 Hasil dan 1. Percobaan: Mengatur Width dan Height

Dalam div kita bisa mengatur ukuran dan style kotaan yang kita inginkan.

6 Hasil Pada Web Pada percobaan 1 ini, membuat suatu background dalam suatu petak ruangan dalam sebuah kotaan (div). fotmat div bisa dilakukan didalam div. Dalam div kita bisa mengatur ukuran dan style kotaan yang kita inginkan. contoh penggunaan div 2. Percobaan: Membatasi Ukuran Minimal Dengan Min-width dan Maxwidth

7 Hasil Pada Web Pada percobaan 2 ini, mencoba menampilkan ukuran batas garis dengan penggunaan min dan max lebar garis. 3. Percobaan: Membatasi Ukuran Minimalis dengan Min-height dan Maxheight

8 Hasil Pada Web Pada percobaan 3 ini, mencoba menampilkan ukuran batas garis dengan penggunaan min dan max pada ukuran tinggi kolom. 4. Percobaan: Penerapan Overflow

Biasanya penggunaan overflow ditambahi dengan pengaturan scroll.

9 Hasil Pada Web Overflow pada css digunakan untuk pengaturan pada text yang melebuhi area atau kolom yang sudah ditentukan. Biasanya penggunaan overflow ditambahi dengan pengaturan scroll. Scroll berfungsi untuk memunculkan text yang tertutupi atau tidak muat pada kolom. Scroll biasany berbentuk naik dan turun. 5. Percobaan: Ukuran Lebar Garis Tepi Hasil Pada Web

Percobaan: Menerapkan Border Style Hasil Pada Web Pada percobaan ini,

10 Pada percobaan ini, mencoba membuat border dengan ketentuan ketebalan yang ditentukan, melalui beberapa pengaturan solid, px, dll. 6. Percobaan: Menerapkan Border Style Hasil Pada Web Pada percobaan ini, mencoba membuat border dengan berbagai style, sesuai ukuran yang ditentukan.

11 7. Percobaan: Menerapkan Warna Pada Garis Tepi Hasil Pada Web Percobaan ini bermain pada style warna pada border. 8. Percobaan: Padding

Percobaan: Margin Hasil Pada Web Selector Class hampir sama dengan selector ID.

12 Hasil Pada Web Pada percobaan ini menerapkan style border dan warna, serta padding antara text dengan kolom pada border. 9. Percobaan: Margin Hasil Pada Web Selector Class hampir sama dengan selector ID. Perbedaannya yaitu terletak pada border, dan pengaturan padding. Dan itu diletakkan pada div yang berbeda-beda sehingga pengaturan tidak tercampur semua.

border, padding text pada garir border, serta pengatur pada

13 10. Percobaan: Mengatur Posisi Konten Hasil Pada Web Pada percobaan ini menerapkan border style pada color, ukuran lebar border, padding text pada garir border, serta pengatur pada posisi konten, yaitu dengan penggunaan text-align. 11. Percobaan: Mengatur Display

Percobaan: Garis Tepi Berupa Gambar Hasil Pada Web Memunculkan

14 Hasil Pada Web Percobaan ini memunculkan sub menu yang umum ada pada web yaitu yang memiliki style vertikal. 12. Percobaan: Garis Tepi Berupa Gambar Hasil Pada Web Memunculkan garis tepi berupa gambar pada lebar border, dan dengan mengawasi margin yang digunakan.

15 13. Percobaan: Mengatur Border Radius Hasil Pada Web Pada percobaan kali ini, yang lebih digunakan adalah pengaturan shadow dari sebbuah gambar.

16 14. Percobaan: Box Shadow Hasil Pada Web Pada percobaan 14, mencooba memunculkan border teradius, yaitu border yang memiliki lengkunagan pada ujung atau sudut yang akan ditentukan.

17 15. Percobaan: Bentuk Elips Hasil Pada Web Pada percobaan ini, hampirsaa dengan percobaan sebelumnya, namun radius yang dipake ialah radius yang berbeda-beda.

18 Hasil dan Analisa Tugas 1. Tugas Pertama HTML

19 Hasil Pada Web AnalisaTugas Pertama Pada tugas 1 ini menampilkan logo, dengan style sesuai contoh. 2. Tugas Kedua HTML Hasil Pada Web AnalisaTugas kedua

20 Menampilkan gambar pada suatu kolom atau kotak yang sudah diatur radiusnya, atau lengkungan pada setiap ujung sisi bidang kotak. Kesimpulan Pada praktikum 6 kali ini, kita belajar untuk mengatur text, background seta tampilan boxes dengan css. Dan banyak hal yang perlu diperhatikan seperti pada pengaturan font-family dll. dan peletakkan image untuk background dan div nya.

dokumen-dokumen yang mirip

Percobaan 1 : Mengatur Width Dan Height Hasil :

Percobaan 1 : Mengatur Width Dan Height Analisa : Terlihat di atas kalau width dan height dari tag dan berbeda sesuai value yang telah diinputkan yang bias dibedakan dengan background-color