TUGAS PRAKTIKUM 9 Nama : Surya Wahyusantoso NRP : 2103157024
1.
Percobaan 1 – Mengatur tampilan tipe list
Analisa : 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
Analisa : Value url(../path-gambar); dari property CSS list-style-image membuat tampilan bullet list dengan gambar sesuai yang dikehendaki.
3. Percobaan 3 – Mengatur posisi item list
Analisa : 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
Analisa : Value Inside membuat bullet berada di dalam dan menyatu dengan kalimat dan circle membuat bullet lingkaran tanpa fill warna.
5. Percobaan 5 – Property table
Analisa : 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
| 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
|
ketika disorot (hover) akan berubah background warnanya.
6.
Percobaan 6 – Mengatur Cell Kosong
Analisa : 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
Analisa : 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
Analisa : 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
Analisa : 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.
10.
Percobaan 10 - Mengatur Tampilan Fieldset dan Legend
Analisa : 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
Analisa : Contoh di atas menerapkan beberapa mode input, input tipe teks seperti yang sejajar dengan nama dan e-mail di atas. Dan tipe radio seperti yang sejajar dengan jenis kelamin.
12. Percobaan 12 – Mengatur tampilan cursor
Analisa : 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 : http://suryawahyusantoso.it.student.pens.ac.id
