Lab4_PemrogramanWeb

Nama : Nadya Khairunnisa

NIM : 312210133

Kelas : TI.22.A.1

Pembuatan CSS Layout

Instruksi Praktikum

1. Persiapkan text editornya terlebih dahulu, disini saya akan menggunakan VSCode.

2. Kemudian buat folder baru dengan nama Lab4_PemrogramanWeb.

3. Selanjutnya ikuti langkah-langkah praktikum yang akan dijelaskan berikutnya.

4. Setelah itu lakukan validasi dokumen html dengan mengakses http://validator.w3.org

Langkah-Langkah Praktikum

1. Persiapan membuat dokumen HTML dengan nama file Lab4_box.html seperti berikut ini.

2. Selanjutnya kita akan membuat Box Element, kemudian kita tambahkan kode untuk membuat box element dengan tag div seperti berikut.

3. Setelah itu kita akan membuat CSS Float Property nya, kemudian tambahkan deklarasi CSS pada head untuk membuat float element seperti gambar berikut.

4. Selanjutnya kita coba untuk dirunning dengan membuka browser untuk melihat hasilnya, seperti gambar berikut.

5. Selanjutnya kita akan mengatur clearfix element. Clearfix digunakan untuk mengatur element setelah float element, property clear digunakan untuk mengaturnya. Kemudian kita tambahkan element div lainnya setelah div3 seperti gambar berikut.

6. Kemudian kita atur property clear pada CSS seperti berikut.

7. Selanjutnya kita running kembali dan membuka browsernya kembali untuk melihat hasilnya seperti gambar berikut.

8. Kemudian lakukan eksperimen terhadap penggunaan property clear dengan nilai lainnya (left, both, right), dan amati perubahannya.

Membuat Layout Sederhana

1. kita buat terlebih dahulu folder baru dengan nama Lab4_layout, kemudian buatlah file baru didalamnya dengan nama home.html, dan file css dengan nama style.css seperti gambar berikut

2. Kemudian buat kerangka layout dengan semantics element seperti berikut.

3. kemudian tulis kode seperti berikut.

4. Selanjutnya kita buka kembali browser untuk melihat hasilnya seperti gambar berikut.

5. Kemudian kita tambahkan kode CSS untuk membuat layoutnya seperti berikut.

6. Selanjutnya kita buka kembali browsernya untuk melihat hasilnya seperti berikut.

7. Kemudian kita akan membuat navigasi nya, selanjutnya kita mengatur navigasi seperti berikut.

8. Selanjutnya kita buka kembali browser nya untuk melihat hasil yang baru seperti berikut.

9. Kemudian kita akan membuat Hero Panel, selanjutnya kita tambahkan kode HTML dan CSS seperti berikut.

10. Kemudian kita buka browser lagi untuk melihat hasilnya seperti berikut.

11. Selanjutnya kita akan mengatur layout main dan sidebar, tambahkan CSS float seperti berikut.

12. Setelah itu kita akan membuat sidebar widget dengan menambahkan element lain dalam sidebar seperti berikut.

13. Kemudian tambahkan CSS seperti gambar berikut.

14. Selanjutnya kita buka browser kembali untuk melihat hasilnya

15. Setelah itu kita akan mengatur footer dengan menambahkan CSS untuk footer.

16. Kemudian kita buka kembali browser

17. Selanjutnya kita akan menambahkan element lainnya pada main content

18. Kemudian tambahkan CSS seperti berikut.

19. Selanjutnya kita kembali membuka browser untuk melihat hasilnya

20. Selanjutnya disini kita akan menambahkan content artikel dengan cara menambahkan HTML berikut pada main content.

21. Kemudian tambahkan CSS nya seperti berikut.

22. Selanjutnya kita buka kembali browsernya untuk melihat hasil akhirnya.

Pertanyaan dan Tugas

1. Tambahkan Layout untuk menu About

   => buat single layout yang berisi deskripsi, portfolio, dll

   

3. Tambahkan layout untuk menu Contact

   => yang berisi form isian: nama, email, message, dll

Sekian, Terima Kasih