TUGAS CSS LAYAOUT PRAKTIKUM 6 1. Percobaan 1 Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya. 2. Percobaan2 Position: relative; membuat pengaturan posisi suatu tag HTML menjadi relative artinya tergantung di posisi mana dia berada. Terlihat tag <pclass= example ></p> mempunyai nilai top: 10px;. Maka, <p class= example > </p> akan memberi jarak atas sebesar 10 piksel dari tag <p></p> yang berada di atasnya namun tidak terhitung dari atas tepi dalam jendela dalam browser.
3. Percobaan3 Pada percobaan tiga menunjukan cara mengatur posisi absolute dengan cara position: absolute; untuk membuat teks judul masuk di antara teks paragraf. 4. Percobaan4
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 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 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 Pada percobaan tujuh menunjukan bagaimana membuat tapilan kolom dengan float pada css. Untuk membuat tampilan seperti itu menggunakan float: left
8. Percobaan8 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
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
: 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
<!DOCTYPE html> <html> <head> <title>membuat Kolom</title> <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;} </style> </head> <body> <h1>tugas Layout</h1> <div class="kolom1"> NAMA : SURYA WAHYUSANTOSO 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
<p> CSS memperlakukan setiap elemen HTML seolah-olah berada pada kotak-kotak yang terpisah. Kotak-kotak tersebut bisa berupa block-level box atau inline box. </p> <div class="kolom2"> <h3>mengatur Posisi Elemen</h3> <p> 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. </p> <div class="kolom3"> <h3>contoh Posisi Elemen</h3> <ul> <li>normal</li> <li>relativel</li> <li>absolut</li> <li>fixed</li> <li>float</li> </ul> </body> </html>
B) HASIL
2. A) KODING <!DOCTYPE html> <html> <head> <title>rasel Kitchen</title> <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;
</head> <body> <div id="header"> HONDA MITRA MOJOKERTO <div id="content"> <h2>about Us</h2> <p> 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). </p> <p>berikut Profil Perusahaan</p> <p>nama Dagang : Honda Mitra Mojokerto</p> <p>nama Perusahaan : PT. Istana Mitra Sendany</p> <p>npwp Perusahaan : 31.409.301.4-602.001</p> <p>alamat : Jl. Raya By Pass Km 50 Kota. Mojokerto Jawa Timur</p> <p>telepon : 0321-383100</p> <p>fax : 0321-383800</p> <div id="side"> <h1 class="judul">our PRODUCT</h1> <ul> <li>brio</li>
<div id="sub"> <img src="images/1.jpg" width="245px" height="245px"> <div id="sub"> <img src="images/2.jpg" width="245px" height="245px"> <div id="sub"> <img src="images/3.jpg" width="245px" height="245px"> </body> </html> B) HASIL