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 tampilan bullet list dengan angka romawi kecil. Percobaan 2 – Image sebagai bullet pada list Kode :
Hasil :
Analisa : Value url(../path-gambar); dari property CSS list-style-image membuat tampilan bullet list dengan gambar sesuai yang dikehendaki.
Percobaan 3 – Mengatur posisi item list
Kode :
Hasil :
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.
Percobaan 4 – Penulisan singkat dari list style Kode :
Hasil :
Analisa : Value Inside membuat bullet berada di dalam dan menyatu dengan kalimat dan circle membuat bullet lingkaran tanpa fill warna.
Percobaan 5 – Property table Kode :
Hasil :
Hasil (ketika table disorot (hover) :
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.
Percobaan 6 – Mengatur Cell Kosong
Kode :
Hasil :
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. Percobaan – Jarak antar Cell Kode :
Hasil :
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; Percobaan 8 - Mengatur Tampilan Teks Input Kode :
Hasil :
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.
Percobaan 9 – Mengatur tampilan tombol submit Kode :
Hasil :
Analisa : Efek gradasi warna di atas dibuat oleh property background dengan value gradient, inlinegradient 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. Percobaan 10 - Mengatur Tampilan Fieldset dan Legend Kode :
Hasil :
Hasil ketika disorot (hover) :
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.
Percobaan 11 – Menata tampilan elemen form
Kode :
Hasil :
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.
Percobaan 12 – Mengatur tampilan cursor Kode :
Hasil :
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.
Tugas !!
Form
Soal no.1 Kode :
Hasil :
Tugas no. 2
Kode :
Hasil :
Tabel Tugas no. 3
Kode :
Hasil :
Tugas no. 4
Kode :
Hasil :
Tugas no. 5 Kode :
Hasil :
URL File HTML : http://choirulanam.it.student.pens.ac.id
