Nama : Dwi Setiya Ningsih Kelas : PJJ D3 T1 NRP : 2103157025
LAYOUT 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 “Praktikum10” 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: Normal Flow
-output dari coding percobaan no.1-
Percobaan 2: Posisi Relative
-output dari coding percobaan no.2-
Percobaan 3: Posisi Absolute
-output dari coding percobaan no.3 bagian atas-
-output dari coding percobaan no.3 bagian bawah-
Percobaan 4: Posisi Fixed Pada percobaan ini, silahkan anda perkecil ukuran browser hingga muncul scroll bar pada sisi kanan browser. Kemudian scroll ke bawah dan lihat posisi header apakah berubah atau tidak.
-output dari coding percobaan no.4 bagian atas-
-output dari coding percobaan no.4 bagian bawahAnalisis: Saat di scroll header tidak tidak ikut bergeser seperti pada isi web.
Percobaan 5: z--‐index Pada percobaan ini, kecilkan ukuran layar hingga muncul scroll bar disamping kanan browser anda, kemudian gulung ke atas dan perhatikan bagian isi dan header. Selanjutnya, pada bagian CSS, hilangkan z-index dan jalankan pada browser dan lihat perbedaannya. Lakukan analisa dari hasil percobaan ini.
-output dari coding percobaan no.5 menggunakan z-indexAnalisis: Ini adalah tampilan dengan menggunakan z-index. Tulisan paragraf akan terscroll keatas dan bersembunyi dibalik header.
-output dari coding percobaan no.5 tanpa z-indexAnalisis: Ini adalah tampilan dimana z-index dihapuskan. Dapat dilihat bahwa paragraf memnuhi header dan header tidak ikut terscroll sehingga tampak sangat berantakan.
Percobaan 6 : Posisi Float
-output dari coding percobaan no.6-
Percobaan 7 : Menggunakan Posisi Float
-output dari coding percobaan no.7-
Percobaan 8 : Menggunakan Clear Pada praktikum ini, tampilkan hasil outputnya pada browser. Selanjutnya hilangkan kode clear pada CSS dan tampilkan hasilnya pada browser. Perhatikan perbedaannya
-output dari coding percobaan no.8 menggunakan ClearAnalisis: Ini adalah tampilan saat menyisipkan code Clear. Tampak pengaturan tiap-tiap isi syntax
akan tampak rapi.
-output dari coding percobaan no.8 tanpa ClearAnalisis: Ini adalah tampilan saat tanpa code Clear. Tampak pengaturan tiap-tiap isi syntax
akan tampak berantakan.
Percobaan 9 : Permasalahan Pada Float Pada percobaan ini, perhatikan border yang dihasilkan
-output dari coding percobaan no.9Analisis: Border tampak lebih besar dari sekedar 1px;
Percobaan 10: Solusi Permasalahan Pada Float Perhatikan perbedaan output yang dihasilkan dibandingkan sebelumnya
-output dari coding percobaan no.10Analisis: Pada percobaan ini output tampak lebih rapi.
Percobaan 11: Membuat Dua Kolom
-output dari coding percobaan no.11-
Tugas 1. Buatlah sebuah layout dengan tampilan tiga kolom seperti tampilan format di bawah ini:
-output dari tugas no.1 Layout-
-coding tugas no.1 Layout-
2. Buatlah tampilan sebuah layout seperti di bawah ini. Isi halaman bebas.
-output dari tugas no.2 Layout-
-coding tugas no.2 Layout-
