LAPORAN PRAKTIKUM PEMROGRAMAN WEB

PERCOBAAN 3
CSS

APRILY AYU ANBAR

1515061005

PROGRAM STUDI TEKNIK INFORMATIKA

JURUSAN TEKNIK ELEKTRO
FAKULTAS TEKNIK
UNIVERSITAS LAMPUNG
BANDAR LAMPUNG
2018
4.3.1 Percobaan 4-1: Layout

Jelaskan kode program di atas!

Pada program di atas menampilkan teks dengan berbagai ukuran dan warna juga font style yang
berbeda. Pada tag <style> terdapat beberapa kode seperti webkit-column-rule dan lain sebagainya
yang berfungsi untuk mengatur pembatasan antara paragraf menjadi 3 bagian seperti di atas

Bagaimana kolom dibuat?

Kolom dibuat dan diatur dengan menentukan besar ukuran yang diigninkan. Coloumn akan dibagi
dengan fungsi webkit dan moz per paragrafnya
4.3.2 Percobaan 4-2: Block

Apa yang terjadi jika lebar web browser lebih kecil dari 600px?
Yang terjadi adalah tampilan dari teks yang akan ditampilkan akan menjadi semakin sempit, dan
disusun secara ke bawah karena width menentukan lebar teks akan ditampilkan

Apa perbedaan max-width dan width!

Perbedaan nya adalah jika max-width hanya mengatur lebar maksimal saja dari teks yang akan
ditampilkan. Dan width mengatur lebar dari tempat teks yang akan ditampilkan
4.3.3 Percobaan 4-3: Box Model
 Kenapa ukuran simple dan fancy berbeda?
Pada style kotak fancy terdapat padding yang mengatur besar nya kotak fancy, sedangkan pada
kotak simple tidak ada

Kenapa ketika diberikan atribut box-sizing, ukuran menjadi sama?

Karena kedua style antara fancy-box-sizing dengan style simple-box-sizing terdapat perintah
dengan nilai yang sama. Sehingga ketika dipanggil fungsi style nya akan menampilkan ukuran box
yang sama .
4.3.4 Percobaan 4-4: Position
 Kenapa relative1 dan relative2 overlap?
Pengaturan ukuran nilai top yang diatur terlalu ke atas, sehingga box yang di bawah menimpah
box yang ada di atasnya

Jelaskan perbedaan static, fixed, relative, dan absolute!

 Properti static merupakan properti bawaan semua elemen, dimana semua elemen akan
memiliki properti ini. Dengan properti ini, elemen akan menempati posisi mengikuti alur
halaman. Jadi, apabila kita menambahkan value top, bottom, left, right, value tersebut tidak
akan menghasilkan apapun.
 Properti raltive dapat diatur dengan menambahkan ukuran top, bottom, left dan right nya.
  Properti absolute apabila ada didalam sebuah element lagi (parent), maka element tersebut
akan diabaikan, seakan-akan elemen tersebut tidak ada di dalam element parent tersebut.
 Properti fixed akan selalu mengikuti (relative) dokumen, bukan element parent tertentu,
atau dengan scroll halaman web.

4.3.5 Percobaan 4-5: Webpage Layout

 Kenapa nav, section, footer, body tidak memerlukan titik pada CSS?
Karena tag tersebut telah didefinisikan dengan html

Jelaskan kegunaan margin-bottom pada body!

Menentukan besar ukuran kotak pada bagian bawah
4.3.6 Percobaan 4-6: float

Jelaskan cara kerja float!

Property float digunakan untuk menentukan apakah sebuah elemen box harus mengapung (float)
atau tidak. Sebuah elemen bisa diposisikan seakan-akan berada mengapung diantara elemen
setelahnya. Mengapung disini, berarti elemen yang mengalami float tersebut akan dipindahkan ke
tepi paling kiri (float:left) atau tepi paling kanan (float:right) dari element induknya. Tujuan utama
float adalah untuk mengatur text agar melipat di sekitar elemen image (gambar). Akan tetapi, float
juga bisa digunakan untuk layout dan style lainnya. Elemen yang tidak mengalami float berada
pada posisi normal, yaitu berada pada arah berlawanan dengan elemen yang mengelilinginya
(bertumpuk dari atas kebawah atau dari kiri ke kanan). Sedangkan, Elemen yang mengalami float
tidak mengikuti kaidah sebagaimana semestinya. Property float tidak bisa digunakan untuk
elemen-elemen yang memiliki posisi absolute.

Apa guna clear?

Clear digunakan untuk membersihkan element yang sebelumnya telah mengalami float. Sehingga,
element yang di-clear akan berpisah dari element yang mengalami float dan akan berpindah pada
baris baru.

4.3.7 Percobaan 4-7: Webpage Layout 2

Kenapa kenapa section memerlukan margin-left?

Margin-left digunakan untuk mengatur letak margin yang akan menampilkan teks dari arah kiri,
yang dimiliki section itu sendiri.

Jelaskan kegunaan clearfix!

Clearfix digunakan untuk cara praktis yang digunakan untuk clear element yang sebelumnya
mengalami float. Clearfix, biasanya digunakan sebagai nama class. Sehingga, kita bisa memanggil
ulang kode tersebut dengan nama class di dalam markup.

4.3.8 Percobaan 4-8: Media Queries

 Jelaskan yang terjadi ketika ukuran browser berada di bawah 600px!
Tampilan akan menjadi sempit sesuai dengan ukuran browser.

Jelaskan kegunaan inline!

Semua layer yang diberikan display inline akan terus mengalir ke samping.

4.3.9 Percobaan 4-9: Grid

 Jelaskan yang terjadi pada class item! Jelaskan kegunaan grid-template-areas!
Yang terjadi adalah kotak-kotak yang ada saling membagi area nya masing-masing.

ID sales-tables-1 digunakan untuk apa?

Kegunaannya adalah untuk menyelaraskan area dari template yang ditampilkan pada jendela
browser.