View Code? Open in Web Editor
NEW
Mempelajari membuat layout
lab4web's Introduction
Mempelajari Membuat Layout
- Membuat dokumen HTML dengan dengan nama file lab4_box.html.
- Kemudian menambahkan kode untuk membuat box element.
- Lalu menambahkan deklarasi CSS pada head untuk membuat float element.
- Maka hasil pada google akan menjadi seperti berikut.
- Mengatur clearfix element dan menambahkan element div lainnya setelah div3.
- Kemudian atur property clear pada CSS.
- Maka kembali ke google lalu gambar akan ada perubahan.
- Membuat folder baru dengan nama lab4_layout, kemudia buatlah file baru di dalamnya dengan nama home.html, dan file css dengan nama style css.
- Kemudian menambahkan kode seperti berikut.
- Kemudian buka google lalu akan menampilkan gambar berikut.
- Kemudian menambahkan kode CSS untuk membuat layoutnya.
- Maka akan ada perubahan pada gambar seperti berikut.
- Membuat Navigasi.
- Membuat panel dan tambahkan kode HTML dan CSS seperti berikut.
- Maka hasilnya akan seperti berikut.
- Mengatur Layout main content dan sidebar dan tambahkan CSS float.
- Membuat sidebar widget dan menambahkan element dalam sidebar.
- Maka hasilnya akan seperti berikut.
- Mengatur tampilan footer dan tambahkan CSS untuk footer.
- Maka tampilan nya akan seperti ini
- Menambahkan element lainnya pada main content.
- Kemudian menambahkan CSS.
- Maka hasilnya akan seperti berikut.
- Membuat content artikel, lalu tambahkan HTML pada main content.
- Maka gambar akan menjadi seperti berikut.
lab4web's People
Contributors
Watchers