No title

Table, List, Form 

 

DWI SETIYA .N. / 2103157025 

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

http://dwisetiya.it.student.pens.ac.id/

Table, List, Form 

 

DWI SETIYA .N. / 2103157025 

Coding file HTML disimpan dengan nama –1.html‐ 

Output dari 1.html 

Analisis:  1. Lower‐roman , memunculkan pengurutan angka secara Romawi 

http://dwisetiya.it.student.pens.ac.id/

Table, List, Form 

 

DWI SETIYA .N. / 2103157025 

Percobaan 2 : Image Sebagai Bullet Pada List

Coding file HTML disimpan dengan nama –2.html‐ 

Output dari 2.html 

Analisis:  1. Ul  {list‐style‐image} digunakan untuk Bullet dengan menggunakan gambar sebagai  bulletnya 

http://dwisetiya.it.student.pens.ac.id/

Table, List, Form 

 

DWI SETIYA .N. / 2103157025 

Percobaan 3 : Mengatur Posisi Item List

Coding file HTML disimpan dengan nama –3.html‐ 

Output dari 3.html 

http://dwisetiya.it.student.pens.ac.id/

Table, List, Form 

 

DWI SETIYA .N. / 2103157025 

Analisis:  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 

http://dwisetiya.it.student.pens.ac.id/

Table, List, Form 

 

DWI SETIYA .N. / 2103157025 

Analisis:  1. List‐style: inside circle, digunakan untuk gaya Bullet berbentuk lingkaran 

Percobaan 5 : Property Tabel

http://dwisetiya.it.student.pens.ac.id/

Table, List, Form 

 

DWI SETIYA .N. / 2103157025 

Coding file HTML disimpan dengan nama –5.html‐ 

Output dari 5.html 

Analisis:  1. Hover, digunakan untuk mempercantik tampilan, (perubahan warna saat cursor  mendekati table) 

http://dwisetiya.it.student.pens.ac.id/

Table, List, Form 

 

DWI SETIYA .N. / 2103157025 

Percobaan 6 : Mengatur Cell Kosong

Coding file HTML disimpan dengan nama –6.html‐ 

Output dari 6.html 

Analisis: 

http://dwisetiya.it.student.pens.ac.id/

Table, List, Form 

 

DWI SETIYA .N. / 2103157025 

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 

http://dwisetiya.it.student.pens.ac.id/

Table, List, Form 

 

DWI SETIYA .N. / 2103157025 

Analisis:  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‐ 

http://dwisetiya.it.student.pens.ac.id/

Table, List, Form 

 

DWI SETIYA .N. / 2103157025  Output dari 8.html 

Analisis:  1. ‐ 

Percobaan 9 : Mengatur Tampilan Tombol Submit

Coding file HTML disimpan dengan nama –9.html‐ 

http://dwisetiya.it.student.pens.ac.id/

Table, List, Form 

 

DWI SETIYA .N. / 2103157025 

Output dari 9.html 

Analisis:  1. Hover, digunakan untuk mempercantik tampilan, (perubahan warna saat cursor  mendekati table) 

Percobaan 10 : Styling Fieldset and Legend

http://dwisetiya.it.student.pens.ac.id/

Table, List, Form 

 

DWI SETIYA .N. / 2103157025 

Coding file HTML disimpan dengan nama –10.html‐ 

Output dari 10.html 

Analisis:  1. ‐  

Percobaan 11: Menata Tampilan Elemen Form

http://dwisetiya.it.student.pens.ac.id/

Table, List, Form 

 

DWI SETIYA .N. / 2103157025 

Coding file HTML disimpan dengan nama –11.html‐ 

http://dwisetiya.it.student.pens.ac.id/

Table, List, Form 

 

DWI SETIYA .N. / 2103157025 

Output dari 11.html 

Analisis:  1. ‐ 

Percobaan 12: Mengatur Tampilan Kursor

  Coding file HTML disimpan dengan nama –12.html‐ 

http://dwisetiya.it.student.pens.ac.id/

Table, List, Form 

 

DWI SETIYA .N. / 2103157025 

 

  Output dari 12.html 

 

Analisis:  1. {cursor:move} menjadikan kursor yang apabila mendekati tag yang ada fungsi  cursor:move nya akan berubah bentuk menjadi ‘perempatan’      Note: http://dwisetiya.it.student.pens.ac.id/  

http://dwisetiya.it.student.pens.ac.id/