TUGAS PRAKTIKUM 9. Nama : Surya Wahyusantoso NRP : Percobaan 1 Mengatur tampilan tipe list. Analisa :

Ukuran: px

Mulai penontonan dengan halaman:

Download "TUGAS PRAKTIKUM 9. Nama : Surya Wahyusantoso NRP : Percobaan 1 Mengatur tampilan tipe list. Analisa :"

Ida Hardja
7 tahun lalu
Tontonan:

1 TUGAS PRAKTIKUM 9 Nama : Surya Wahyusantoso NRP : Percobaan 1 Mengatur tampilan tipe list Gambar di atas Menggunakan Value lower-roman dari property CSS list-style-type membuat tampilan bullet list dengan angka romawi kecil. 2. Percobaan 2 Image sebagai bullet pada list Value url(../path-gambar); dari property CSS list-style-image membuat tampilan bullet list dengan gambar sesuai yang dikehendaki.

2 3. Percobaan 3 Mengatur posisi item list Posisi list-style inside membuat bullet berada di dalam dan menyatu dengan kalimat. Berbeda dengan value outside yang memberi jarak dan membuat bullet terpisah namun tetap berdampingan. 4. Percobaan 4 Penulisan singkat dari list style Value Inside membuat bullet berada di dalam dan menyatu dengan kalimat dan circle membuat bullet lingkaran tanpa fill warna.

3 5. Percobaan 5 Property table Setiap bagian dari tabel dapat dikustomisasi dengan CSS mulai dari border, cell, hingga teks yang ada di dalamnya. Misal, border juga bias dikustomisasi entah itu secara keseluruhan ataupun sebagian saja (atas, kiri, bawah, kanan). Seperti contoh di atas, property borderbottom dengan value 2px solid darkcyan; yang diterapkan pada tag <th></th> membuat efek garis setebal 2 pixel di bagian bawah dengan warna darkcyan. :hover membuat efek tertentu ketika kursor menyorot area tertentu sesuai dengan yang diterapkan. Seperti contoh di atas, bagian<tr></tr> ketika disorot (hover) akan berubah background warnanya.

6. Percobaan 6 Mengatur Cell Kosong Property empty-cells mampu mengatur apakah cell yang kosong ditampilkan atau tidak sesuai dengan value yang diinput.

4 6. Percobaan 6 Mengatur Cell Kosong Property empty-cells mampu mengatur apakah cell yang kosong ditampilkan atau tidak sesuai dengan value yang diinput. Show untuk ditampilkan dan hide untuk disembunyikan. 7. Percobaan Jarak antar Cell Properti border-spacing membuat jarak antar tiap cell sesuai dengan kehendak kita dengan value dalam satuan pixel. Satu nilai untuk keseluruhan, atau dua nilai untuk horizontal dan vertical. Dan tiap cell di atas diberi efek bingkai dengan properti border, value 2px solid darkcyan;

8. Percobaan 8 - Mengatur Tampilan Teks Input Properti background-image pada tag input membuat efek tampilan background gambar seperti hasil di

Percobaan 9 Mengatur tampilan tombol submit Efek gradasi warna di atas dibuat oleh property background dengan value gradient, inline-gradient

5 8. Percobaan 8 - Mengatur Tampilan Teks Input Properti background-image pada tag input membuat efek tampilan background gambar seperti hasil di atas. Dan property background-repeat membuat agar background tidak berulang melainkan hanya tampil satu saja. 9. Percobaan 9 Mengatur tampilan tombol submit Efek gradasi warna di atas dibuat oleh property background dengan value gradient, inline-gradient membuat gradasi warna secara garis lurus. Dan untuk webkit merupakan prefix untuk adaptasi browser Chrome, dan Safari. moz untuk firefox, -o untuk opera, -ms untuk internet explorer atau edge.

6 10. Percobaan 10 - Mengatur Tampilan Fieldset dan Legend Tag fieldset berfungsi untuk mengelompokkan beberapa objek form menjadi sebuah kelompok, sedangkan Tag Legend berfungsi untuk menampilkan judul dari kelompok objek form tersebut (menurut mbah Google, hehe ). Dan :focus membuat efek ketika input sedang mendapat fokus akan menerapkan efek-efek yang sudah diterapkan di atas. Dan :hover membuat tombol berubah warna setika disorot. 11. Percobaan 11 Menata tampilan elemen form Contoh di atas menerapkan beberapa mode input, input tipe teks seperti yang sejajar dengan nama dan di atas. Dan tipe radio seperti yang sejajar dengan jenis kelamin.

12. Percobaan 12 Mengatur tampilan cursor Property cursor untuk mengatur tampilan kursor ketika menyorot pada area tertentu yang sudah diatur sesuai dengan value yang diinputkan.

7 12. Percobaan 12 Mengatur tampilan cursor Property cursor untuk mengatur tampilan kursor ketika menyorot pada area tertentu yang sudah diatur sesuai dengan value yang diinputkan. Move untuk mengubah tampilan kursor seperti memindah item, pointer untuk mengubah kursor seperti tangan menunjuk, dll. URL File HTML :

dokumen-dokumen yang mirip

: Choirul Anam : D3 CC PJJ/Teknik Informatika. No NRP : Percobaan 1 Mengatur tampilan tipe list. Kode : Hasil :

: Choirul Anam : D3 CC PJJ/Teknik Informatika. No NRP : Percobaan 1 Mengatur tampilan tipe list. Kode : Hasil : Nama : Choirul Anam Kelas : D3 CC PJJ/Teknik Informatika No NRP : 2103157012 Percobaan 1 Mengatur tampilan tipe list Kode : Hasil : Analisa : Value lower-roman dari property CSS list-style-type membuat