ilhamlamp / lab4web

Untuk memenuhi tugas5 pada mata kuliah Pemrograman Web

LAB4 WEB

Nama	Ilham Nur Utomo
NIM	312010129
Kelas	TI.20.A1
MataKuliah	Pemrograman Web

Praktikum

1. Box Element

• Dengan internal css, float property

2. Clearfix Element

• Properti clear: left; pada div4
  

• Box Merah berada di kiri

• Properti clear: right; Box Hijau berada di kanan

• Properti clear: both; Box Kuning berada di antara Box Merah dan Box Hijau

• Properti clear: left; Box biru berada di kiri.

3. Kerangka Layout

• File baru, lab4_layout.html dengan css eksternal css/style.css.

4. Menu Navigasi

5. Hero Panel

6. Layout Main dan Sidebar

• Sidebar widget, dengan zoom in microsoft edge 67%

7. Footer

8. Main Content

9. Konten Artikel

Tugas

• 1. Tambahkan Layout untuk menu About => buat single layout yang berisi deskripsi, portfolio, dll

  • Jawaban:

  • Berikut isi dari <div> id="about">.
    

  • display: flex; berfungsi membuat elemen-elemen yang ada di dalamnya menjadi menjajar ke samping dengan rapih (sesuai keinginan).

  • align-items: center agar semua item di dalam flex berada di tengah.

  • justify-content: space-between;untuk memberi jarak antar kontennya.

• 2. Tambahkan layout untuk menu Contact => yang berisi form isian: nama, email, message, dll

  • Jawaban:

  • Sebelum,
    

  • Sesudah, proses klik Send Message
    

  • Pada input[type=text], textarea, resize: vertical; berfungsi mengatur kolom Masukan agar hanya dapat naik-turun.

  • input[type=submit]:hover adalah ketika kursor diarahkan ke elemen tersebut, maka akan berubah sesuai pengkondisiannya.