LAPORAN PRAKTIKUM

PEMROGRAMAN WEB

PERTEMUAN 5& 6
“CSS LANJUT”

OLEH:

AKHFADZ JUAN REZA

NPM.18753007

MANAJEMEN INFORMATIKA
POLITEKNIK NEGERI LAMPUNG
2019
 1. CSS Margin

Area yang terletak di sekeliling border.

Contoh :
HTML

CSS

Tampilan Pada Laman Web.

 1. CSS Padding

CSS padding properties digunakan untuk menentukan spasi antara border elemen dengan isi
element. Cara penulisan-nya hampir sama dengan penulisan Margin.

Perbedaannya adalah padding tidak bisa diisi nilai negatif. 

Contoh:
HTML

CSS

Tampilan pada laman Web.

 2. CSS Border

Digunakanuntukmemanipulasi border padasebuahelemen HTML.
Contoh
HTML

Tampilanpadalaman Web.
 A. LatihanPraktikum

1. Latihan A
body
 jenis font : arial
h2
 jenis font : georgia
 ukuran font : 30px
 style font : italic
 format paragraf : rata tengah
id header
 warna background : silver
id footer
 warna background : hitam
 warna teks : putih
class footer
 ubah tipe display menjadi block
 format paragraf : rata tengah

HTML
CSS

Tampilanpadalaman Web
 2. Latihan B
id header
 ubah lebarnya menjadi 700px
 ubah tingginya menjadi 150px
id container
 ubah lebarnya agar sejajar dengan header dan footer
 tambahkan border sebesar 1px yang tipenya solid dan warnanya abu-abu
id footer
 ubah lebarnya menjadi 700px
 ubah tingginya menjadi 40px
HTML
CSS

Tampilan pada laman Web.

 3. Latihan C
modifikasi file css dengan spesifikasi dibawah ini:
h2
 tambahkan padding atas sebanyak 50px
 ubah tingginya menjadi 150px
id header
 tambahkan margin atas & bawah sebanyak 0px
 tambahkan margin kiri & kanan sebanyak auto
id container
 tambahkan padding untuk ke-empat sisinya sebanyak 25px;
 tambahkan margin atas & bawah sebanyak 0px
 tambahkan margin kiri & kanan sebanyak auto
id footer
 tambahkan margin atas & bawah sebanyak 0px
 tambahkan margin kiri & kanan sebanyak auto
class footer
 tambahkan margin atas sebanyak 0px
 tambahkan padding bawah sebanyak 10px
HTML
CSS Tampilan pada laman Web.
 4. TUGAS LATIHAN
MEMBUAT ARTIKEL
HTML
CSS
TampilanpadaLaman Web.
 QUIZ

1. Index

2. Profil
3. Kontak