Table, List, Form DWI SETIYA.N. /

Transkripsi

1 LIST, TABLE DAN FORM Alat dan Bahan Software HTML Editor seperti Notepad++, Adobe Dreamweaver, Text Wrangler atau yang lainnya Bahan-bahan gambar berupa gambar-gambar kecil yang akan digunakan sebagai icon pada list Cara Kerja Berikut ini langkah kerja yang perlu anda lakukan selama menyelesaikan semua percobaan yang ada pada praktikum ini 1. Buatlah folder baru bernama Praktikum9 dan pastikan anda menyimpan semua file percobaan di praktikum ini pada folder tersebut 2. Buat folder css dan images 3. Simpan semua file gambar yang diperlukan pada file images 4. Buka teks editor pilihan anda 5. Ketikkan semua kode yang ada pada tiap percobaan 6. Setiap kali anda menyelesaikan satu percobaan, simpan dengan nama file sesuai nomor percobaan dengan ekstensi.html 7. Apabila anda menggunakan notepad, pastikan anda merubah pilihan tipe file pada Save as Type menjadi All Files 8. Apabila anda menggunakan notepad++, pada pilihan tipe file, pilih yang bertipe HTML. Percobaan Percobaan 1 : Mengatur Tampilan Tipe List

2 Coding file HTML disimpan dengan nama 1.html Output dari 1.html 1. Lower roman, memunculkan pengurutan angka secara Romawi

3 Percobaan 2 : Image Sebagai Bullet Pada List Coding file HTML disimpan dengan nama 2.html Output dari 2.html 1. Ul {list style image} digunakan untuk Bullet dengan menggunakan gambar sebagai bulletnya

4 Percobaan 3 : Mengatur Posisi Item List Coding file HTML disimpan dengan nama 3.html Output dari 3.html

5 1. List style position, untuk mengatur penempatan Bullet, apakah berada diluar garis paragraph (outside) atau didalam (inside) Percobaan 4 : Penulisan Singkat Dari List Style Coding file HTML disimpan dengan nama 4.html Output dari 4.html

6 1. List style: inside circle, digunakan untuk gaya Bullet berbentuk lingkaran Percobaan 5 : Property Tabel

7 Coding file HTML disimpan dengan nama 5.html Output dari 5.html 1. Hover, digunakan untuk mempercantik tampilan, (perubahan warna saat cursor mendekati table)

8 Percobaan 6 : Mengatur Cell Kosong Coding file HTML disimpan dengan nama 6.html Output dari 6.html

9 1. Empty cells: show, digunakan untuk memunculkan cells meski cell dalam keadaan kosong 2. Empty cells: hide, digunakan untuk menyebunyikan cell yang tidak ada konten (cell tidak tampil pada output) Percobaan 7 : Jarak Antar Cell Coding file HTML disimpan dengan nama 7.html Output dari 7.html

10 1. Border spacing, digunakan member jarak antar cells agar tidak menyatu 2. Border collapse, digunakan untuk merapatkan cells agar terlihat rapat Percobaan 8 : Styling Text Input Coding file HTML disimpan dengan nama 8.html

11 Output dari 8.html 1. Percobaan 9 : Mengatur Tampilan Tombol Submit Coding file HTML disimpan dengan nama 9.html

12 Output dari 9.html 1. Hover, digunakan untuk mempercantik tampilan, (perubahan warna saat cursor mendekati table) Percobaan 10 : Styling Fieldset and Legend

13 Coding file HTML disimpan dengan nama 10.html Output dari 10.html 1. Percobaan 11: Menata Tampilan Elemen Form

14 Coding file HTML disimpan dengan nama 11.html

15 Output dari 11.html 1. Percobaan 12: Mengatur Tampilan Kursor Coding file HTML disimpan dengan nama 12.html

16 Output dari 12.html 1. {cursor:move} menjadikan kursor yang apabila mendekati tag yang ada fungsi cursor:move nya akan berubah bentuk menjadi perempatan Note: