Tugas 5 : HTML Form

Buatlah sebuah Web yang memiliki form Buku Tamu dengan ketentuan sebagai berikut:

1.memiliki text input untuk memasukkan nama
2. memiliki radio button input untuk memilih jenis kelamin (laki-laki / perempuan)
3. memiliki drop down list untuk memilih Fakultas dari semua fakultas di UNSRI
4. memiliki text area untuk memasukkan Biografi
5. memiliki text input untuk memasukkan mata kuliah favorit, yang sudah memiliki beberapa nama mata kuliah yang sudah terdefinisi (gunakan datalist)
6. memiliki range input untuk menentukan tinggi badan
7. memiliki password input untuk memasukkan kata rahasia
8. memiliki checkbox untuk menentukan apakah tamu membawa kado atau tidak
9. memiliki number input untuk memasukkan semester yang sedang ditempuh
10. memiliki date input untuk memasukkan tanggal lahir
11. memiliki color input untuk memasukkan warna favorit
12. memiliki email input untuk memasukkan email
13. memiliki caption form "Buku Tamu" yang menggabungkan semua isian form
14. memiliki tombol "Reset" untuk menghapus semua data form
15. memiliki sebuah tombol kirim, yang apabila dipilih, akan menampilkan halaman "Terima kasih"

Tugas 4 : HTML Layout

Buatlah sebuah halaman Web menggunakan HTML yang memiliki kriteria sebagai berikut (contoh terlampir):

1. Memiliki Bagian Header sebagai judul website, tulisan warna putih, background warna hitam Kata yang paling akhir pada Judul Website diberi warna merah (gunakan span)
2. Memiliki Bagian Navigasi yang terdapat 5 link ke bagian internal web kita sendiri, rata tengah, background warna tertentu
3. Memiliki Bagian Konten selamat datang yang memiliki judul dan 2 paragraf isi.
4. Memiliki Bagian Sidebar di sebelah kanan Bagian Konten yang terdapat 4 link ke web eksternal, background warna tertentu
5. Memiliki Bagian Footer tulisan warna putih, background warna hitam
6. HTML Responsive untuk small, middle, large device (2 poin)
7. Buatlah layout Anda sendiri yang memanfaatkan materi yang sudah dipelajari pada pekan ini.

Tugas 3 : HTML Table & List

Tabel

Buatlah sebuah Tabel seperti gambar terlampir yang memiliki spesifikasi sebagai berikut:

1. Tabel menyimpan 4 informasi: No, Nama (Nama Depan, Nama Belakang), Deskripsi.

2. Judul kolom "No." dan "Deskripsi" menggabungkan 2 baris tabel

3. Judul Kolom "Nama" menggabungkan 2 kolom tabel.

4. Tulisan pada Kolom Judul dibuat rata tengah.

5. Tabel memiliki batas (border) yang bergabung menjadi satu (collapsed)

6. Tabel memiliki caption: 10 Dosen Favorit Saya ('Dosen Favorit' bisa diganti dengan yang lain)

7. Data yang diisi pada tabel memiliki warna background yang berbeda antara baris genap dan baris ganjil (2 poin)


List:

- Buatlah sebuah daftar (list) yang mencantumkan 3 barang yang terdapat di tas Anda dengan menggunakan bullet bertipe: circle

- Buatlah sebuah daftar (list) yang mencantumkan 3 cita-cita terbesar Anda dengan menggunakan poin berupa huruf kecil a, b, c.



Tutorialnya :

1. Pertama tuliskan No,Nama Depan,Nama Belakang, dan Deskripsi di "table header"

2. Kemudian untuk menggabungkan 2 baris tabel No dan Deskripsi gunakan "rowspan"

3, Lalu untuk menggabungkan 2 kolom tabel Nama gunakan "colspan"

4. Untuk membuat tulisan pada Kolom Judul dibuat rata tengah gunakan CSS "text-align: center"

5. Untuk menggabungkan batas (border) menjadi satu (collapse) gunakan CSS "border-collapse: collapse;"

6. Tuliskan caption yang diinginkan di bagian <caption>

7. Dan untuk menambahkan warna background yang berbeda antara baris genap dan baris ganjil gunakan HTML Hex pada bagian CSS id table

8. Selanjutnya pada daftar (list) yang menggunakan bullet bertipe: circle gunakan style="list-style-type:disc"

9. Terakhir untuk daftar (list) yang berupa huruf kecil a,b,c gunakan type="a"