LAPORAN RESMI Layout
Dosen Pembimbing : Dwi Susanto,ST, MT
Oleh Hamidah Nur Hidayati
4103131038
PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK ELEKTRONIKA NEGERI SURABAYA 2015
Hasil dan Analisa Percobaan 1. Percobaan: Mengatur Width dan Height HTML Percobaan
Hasil Percobaan 1. Percobaan : Normal Flow HTML Code
Hasil Percobaan
Analisa Normal flow merupakan pilihan untuk mengatur posisi elemen. Jika menggunakan normal flow maka tampilan yang muncul seperti tampilan biasa, dimana block elemen yang dibuat akan muncul sesuai urutan. Ketika membuat pengaturan style pada css berupa h1, maka di bagian body h1 yang akan muncul akan sesuai perintah pada css.
2. Percobaan : Posisi Relative HTML Code
Hasil Percobaan
Analisa Posisi Relatif diguunakan untuk memunculkan block elemen mengarah pada arah yang ditentukan kanan atau kiri sesuai perintah tambahannya berupa top/left. Relative position biasanya digunakan untuk mengatur “tab”. Untuk memunculkan relative position, maka pada bagian body tepatnya pada bagian paragraf yang diinginkan, kita harus memanggilya sesuai div/class yg sudah diatur di bagian css.
3. Percobaan : Posisi Absolute HTML Code
Hasil Percobaan
Analisa Absolute position digunakan untuk menentukan posisi dari elemen, dimana sebuah elemen jika diatur absolute position maka elemen tersebut sudah tidak lagi mengikuti aturan normal flow yang seharusnya dan tidak akan mempengaruhi elemen sekitarnya.Seperti ketika absolute position diatur untuk header (h1), maka pada tampilan yang akan keluar adalah header tersebut akan berada di atas, bawah, atau kanan, kiri dari elemen layout lainnya.
4. Percobaan : Posisi Fixed HTML Code
Hasil Percobaan
Analisa Posisi ini akan mengatur elemen pada posisi yang tetap meskipun browser digulung ke bawah atau ke atas. Jadi, pada percobaan diatas posisi fixednya berada pada header. Yaitu ketika browser digulung dan discrol maka paragraph dibawah header akan secara berurutan muncul. Ketika discrol keatas menuju paragraph 2 maka paragraph 1 akan terkena fixed dari header, dan tidak akan muncul.
5. Percobaan : z-Index a) Menggunakan z-Index HTML Code
Hasil Percobaan
Analisa Penggunaan z-fixed adalah untuk mengatur elemen mana yang berada paling atas. Ketika menggunakan z-fixed maka akan terlihat elemen mana yang terkena tumpukan elemen lainnya.
b) Tana menggunakan z-Index HTML Code
Hasil Percobaan
Analisa Penggunaan z-fixed adalah untuk mengatur elemen mana yang berada paling atas. Ketika menggunakan z-fixed maka akan terlihat elemen mana yang terkena tumpukan elemen lainnya. Ketika z-index dihilangkan, maka akan terlihat jelas elemen yang hilang ketika di scroll.
6. Percobaan : Posisi Float HTML Code
Hasil Percobaan
Analisa Dengan mengatur posisi float pada suatu elemen, maka yang terlihat adalah seolah mengeluarkan suatu elemen normal flow dan menempatkaanya pada suatu blok lain ke area sebelah kanan atau kiri. Elemen dengan posisi float akan menjadi sebuah block tersendiri.
7. Percobaan : Posisi Float Kolom HTML Code
Hasil Percobaan
Analisa Float position juga perfungsi untuk mengatur layout paragraf dalam bentuk kolom. Dengan menggunakan posisi float maka kita dapat mengatur paragraf menjadi berapa kolom. Penggunaan style float juga ditambahi dengan posisi keberadaannya, seperti left, right.
8. Percobaan : Menggunakan Clear HTML Code
Hasil Percobaan
Analisa Penggunaan format css clear untuk membedakan style paragraf dari style paragraf sebelumnya atau unruk membuat format paragraf lainnya.
9. Percobaan : Permasalahan Pada Float HTML Code
Hasil Percobaan
Analisa Pada percobaan ini terdapat permasalahan dalam menampilkan style float, dikarenakan pada div hanya diatur bordernya saja, dan tidak diatur format floatnya. Maka yang muncul hanya div berupa border.
10. Percobaan : Solosi Permasalahan pada Float HTML Code
Hasil Percobaan
Analisa Sedangkan pada percobaan ini dicarikan solosinya yaitu dengan memasang format float (overfloat pada div), sehingga tampilan dari float bisa terlihat berupa layout kolom yang didalamnya terdapat paragraf secara keseluruan.
11. Percobaan : Membuat Dua Kolom HTML Code
Hasil Percobaan
Analisa Pada percobaan ini yaitu membuat 2 kolom, namun dengan style berbeda. Kolom pertama ditampilkan dengan tampilan normal paragraf, ditampilan kolom kedua yaitu berupa border.
Hasil Tugas 1. Membuat tampilan (layout) tiga kolom HTML Code
Hasil Percobaan
Analisa Pada tugas pertama ini yaitu bagaimana membuat 3 kolom dan disalah satu kolom terdapat bulletnya. Yang harus diperhatikan yaitu penggunaan float, div ul li.
2. Tampilan (layout) halaman HTML Code
Hasil Percobaan
Analisa Pada tugas kedua ini yang harus diperhatikan yaitu penempatan border kolom. Pada praktukum yang saya lakukan, saya sering mengami masalah pada margin. Dan yang harus di perhatikan lagi yaitu pada float border kolomnya.
http://hamidahnh.mb.student.pens.ac.id/Praktikum%207/
