LAPORAN RESMI Layout

Ukuran: px

Mulai penontonan dengan halaman:

Download "LAPORAN RESMI Layout"

Widyawati Wibowo
7 tahun lalu
Tontonan:

1 LAPORAN RESMI Layout Dosen Pembimbing : Dwi Susanto,ST, MT Oleh Hamidah Nur Hidayati PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK ELEKTRONIKA NEGERI SURABAYA 2015

5 Hasil dan Percobaan 1. Percobaan: Mengatur Width dan Height HTML Percobaan

9 1. Percobaan : Normal Flow HTML Code 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 Posisi Relatif diguunakan untuk memunculkan block elemen mengarah pada arah yang ditentukan kanan atau kiri sesuai perintah tambahannya berupa top/left.

10 2. Percobaan : Posisi Relative HTML Code 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 Absolute position digunakan untuk menentukan posisi dari elemen, dimana sebuah elemen jika diatur absolute position maka elemen tersebut sudah tidak lagi

11 3. Percobaan : Posisi Absolute HTML Code 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.

12 4. Percobaan : Posisi Fixed HTML Code 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.

13 5. Percobaan : z-index a) Menggunakan z-index HTML Code

14 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

15 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

Dengan mengatur posisi float pada suatu elemen, maka yang terlihat adalah seolah mengeluarkan suatu elemen normal flow dan menempatkaanya pada suatu

16 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

17 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

18 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

19 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

20 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

21 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

22 Pada tugas pertama ini yaitu bagaimana membuat 3 kolom dan disalah satu kolom terdapat bulletnya. Yang harus diperhatikan yaitu penggunaan float, div ul li.

23 2. Tampilan (layout) halaman HTML Code

24 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.

dokumen-dokumen yang mirip

LAPORAN RESMI. Boxes

LAPORAN RESMI. Boxes LAPORAN RESMI Boxes Dosen Pembimbing : Dwi Susanto,ST, MT Oleh Hamidah Nur Hidayati 4103131038 PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK ELEKTRONIKA NEGERI