Analisa Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya

NAMA : SURYA WAHYUSANTOSO NRP : 2103157024

suryawahyusantoso.it.student.pens.ac.id. TUGAS CSS LAYAOUT PRAKTIKUM 6

1. Percobaan 1

Analisa Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya.

2. Percobaan2

Analisa Position: relative; membuat pengaturan posisi suatu tag HTML menjadi relative artinya tergantung di posisi mana dia berada. Terlihat tag
mempunyai nilai top: 10px;. Maka,

akan memberi jarak atas sebesar 10 piksel dari tag
yang berada di atasnya namun tidak terhitung dari atas tepi dalam jendela dalam browser.


suryawahyusantoso.it.student.pens.ac.id.

3. Percobaan3

Analisa Pada percobaan tiga menunjukan cara mengatur posisi absolute dengan cara position: absolute; untuk membuat teks judul masuk di antara teks paragraf. 4. Percobaan4



Analisa Pada percobaan empat menunjukan cara mengatur letak judul dan teks agak menjauh kebawah. Caranya dengan mengatur width pada ukuran yang besar. Serta pengaturan position: fixed , membuat tag HTML menjadi tetap posisinya jadi ketika di scrol akan tetap berada di posisinya dan tga HTML itu akan tetap pada tempatnya 5. Percobaan5

Analisa Pada percobaan lima menunjukan bahwa z-index membuat tag HTML tetap pada posisinya namun ketika di scrol ke bawah antara text dengan yang di tag HTML menjadi transparan atau tetap terlihat jadi hal tersebut membuat seperti double text atau saling tumpnag tindih ketika oparagraf tersebut di scrol.



6. Percobaan6

Analisa Pada percobaan enam menunjukan fungsi float itu hampir sama dengan text aligmen , ketika di berikan perintah float : right maka secara langsung text yang kita inginkan akan tampil sebelah kanan text. 7. Percobaan7

Analisa Pada percobaan tujuh menunjukan bagaimana membuat tapilan kolom dengan float pada css. Untuk membuat tampilan seperti itu menggunakan float: left



8. Percobaan8

Analisa Pada percobaan delapan meunjukan bagaimana cara membuat layout secara berjajar dengan clear. Yaitu dengan cara memasukkan class clear yg kita buat ke dalam teks paragraf. Property clear fungsinya mirip seperti untuk membuat baris baru untuk tag atau objek yang bersangkutan. Seperti clear: both, dia akan mengkosongkan atau menskip pengisian wilayah dari kedua arah kanan dan kiri yang kosong untuk tidak diisi dan langsung turun ke bawah 9. Percobaan9



Analisa Dari percobaan sembilan menunjukan property float tidak akan bekerja apabila ada salah satu tag lain menggunakan property clear sehingga tag lainnya tidak bisa mengalir ke kiri karena ada property clear yang menghalangi. serta membuat paragraf satu dan lainnya membentuk sebuah kolom tanpa tepi. Dengan parent-float 10.Percobaan10



Analisa: Pada percobaan sepuluh menunjukan cara membuat parent-float yang berfungsi untuk merapikan parent float sebelumnya pada percobaan sembilan Namun bedanya ini langsung tidak ada batasan kotak di setiap text paragraftnya dan pembatasanya langsung menjadi satu kotak untuk mengumpulkan jadi satu dalam satu kotak semua text paragraft..

11. Percobaan11



Analisa Pada percobaan sebelas menunjukan cara membuat dua kolom layout yaitu dengan cara mengatur class tiap kolom pada css,lalu panggil class tersebut pada teks dalam body.

TUGAS

1. A) KODING

Membuat Kolom <style type="text/css"> body{ width: 850px; font-family: sans-serif,serif; color:darkgray; } .kolom1 { float: left; width: 250px; margin: 10px;} .kolom2 { float: left; width: 200px; margin: 10px;} .kolom3 { float: left; width: 330px; margin: 10px;}
Tugas Layout



CSS memperlakukan setiap elemen HTML seolah-olah berada pada kotak-kotak yang terpisah. Kotak-kotak tersebut bisa berupa block-level box atau inline box.

Mengatur Posisi Elemen

CSS memiliki beberapa pilihan untuk mengatur posisi elemen pada layout sebuah halaman, yakni normal flow, relative positioning, dan absolut.Untuk menentukan posisi sebuah elemen, bisa menggunakan property position.

Contoh Posisi Elemen

Normal

Relativel

Absolut

Fixed

Float


B) HASIL



2.

A) KODING

Rasel Kitchen <style type="text/css"> body { background-color:grey;} .judul { color: white;} #header { width: 100%; height: 150px; font-size: 70px; color: white; text-align: center; background-color: dimgray} #content { width: 67%; height: auto; background-color:gainsboro; padding: 10px; float: left; margin-top: 10px; border-radius: 20px; border: 2px solid darkgray;} #side { width: 25%; height: 620px; background-color: darkgray; float:right; border: 2px solid dimgray; margin-left: 20px; margin-top: 0px; padding: 15px;} #sub { width:245px; height: 260px; border: 2px solid darkgray;




HONDA MITRA MOJOKERTO

About Us

PT.Istana MitraSendany atau yang biasa disebut Honda Mitra Mojokerto (HMM) adalah sebuah perusahaan yang bergerak dibidang jasa otomotif meliputi penjualan (Sales marketing) ,service (perawatan dan perbaikan)danspare part (suku cadang)mobil honda di wilayah mojokerto yang mana berada dalam naungan Main Dealer regional(MD) yaitu PT.Istana Mobil Surabaya Indah (IMSI) di surabaya Jawa Timur.Honda Mitra mojokerto diresmikan tanggal 30 April 2012 oleh dealer pusat yaitu PT.Honda Prospect Motor (HPM) Jakarta danmemegangkendalipenuhsebagai dealer Honda satu-satunya yang berada di mojokerto. Saat ini Honda mitra mojokerto sudah memiliki beberapa cabang di beberapa daerah misalnya Honda Mitra Jombang (HMJ), Honda Mitra Lamongan (HML), Honda Mitra Gresik (HMG), dan Honda Mitra Bangkalan (HMB).

Berikut Profil Perusahaan

Nama Dagang : Honda Mitra Mojokerto

Nama Perusahaan : PT. Istana Mitra Sendany

Npwp Perusahaan : 31.409.301.4-602.001

Alamat : Jl. Raya By Pass Km 50 Kota. Mojokerto Jawa Timur

Telepon : 0321-383100

Fax : 0321-383800

OUR PRODUCT

BRIO



B) HASIL



Analisa Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya

Recommend Documents

Tugas Layout

Mengatur Posisi Elemen

Contoh Posisi Elemen

About Us

OUR PRODUCT