Praktikum 4 CSS

PRAKTIKUM : Margin, Padding dan Dimensi
NAMA : Romi Yanwar

KELAS : X TKJ D
TANGGAL PRAKTIKUM : 01-04-2015
A. TUJUAN
1. Siswa dapat mengenal, memahami serta dapat melakukan pengaturan m argin dan padding.
2. Siswa dapat mengenal, memahami serta dapat melakukan pengaturan dimensi ukuran pada objek
web.
B. DASAR TEORI
1. Margin
Margin adalah jarak area kerja dalam meletakkan komponen-komponen web yang dihitung dari
dinding-dinding browser. Sehingga dengan melakukan pengaturan margin, berarti menciptakan
sebuah pembatas antara area kerja dengan dinding browser. Perhatikan gambar ilustrasi dibawah ini:
Kode CSS untuk pengaturan margin seperti gambar illustrasi diatas adalah:
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
Bentuk kode CSS diatas dapat juga ditulis dengan bentuk seperti berikut:
body {
margin: 100px 40px 10px 70px;
}
Praktikum Dasar Web
Possible Values
Value Description
auto The browser sets the margin. The result of this is dependant of the
browser.
length Defines a fixed margin (in pixels, pt, em, etc.)
% Defines a margin in % of the containing element
Property margin dapat ditulis dengan bentuk dari satu hingga empat value, seperti berikut di bawah ini:
 margin:25px 50px 75px 100px;

o top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px
 margin:25px 50px 75px;
o top margin is 25px
o right and left margins are 50px
o bottom margin is 75px
 margin:25px 50px;
o top and bottom margins are 25px
o right and left margins are 50px
 margin:25px;
o all four margins are 25px
Selain menggunakan tag <body> sebagai selector, Anda juga dapat menggunakan tag HTML lain yang
berhubungan dengan objek yang ditampilkan, sebagai contoh Anda dapat menerapkannya pada
elemen tabel.
2. Padding
Pengaturan padding, adalah melakukan pengaturan terhadap jarak didalam (inner) antara border
dengan content dari elemen. Tabel berikut menampilkan jenis padding beserta nilainya.
Properties Value Keterangan

padding-top
padding-right Pengaturan batas isi web dengan objek
padding
padding-bottom yang ada di sampingnya.
padding-left
length
padding-top Pengaturan jarak padding sebelah atas
%
length Pengaturan jarak padding sebelah
padding-right
% kanan
length Pengaturan jarak padding sebelah
padding-bottom
% bawah
length
padding-left Pengaturan jarak padding sebelah kiri
%
Untuk melakukan pengaturan padding pada halaman, maka Anda harus menggunakan tag <body>
sebagai selectornya, syntaknya adalah sebagai berikut:
body {
padding-top: value;
padding-right: value;
padding-bottom: value;
padding-left: value;
}
Rekayasa Perangkat Lunak (Tk.1) - SMKN 1 Cimahi 2
Praktikum Dasar Web
3. Dimensi Pada Halaman Web

Pengaturan dimensi adalah teknik pengaturan ukuran pada suatu objek web. Dengan menggunkan
property yang berkaitan dengan dimensi ini, Anda dapat dengan mudah melakukan pengaturan
ukuran besar atau kecil suatu objek web.
3.1 Dimensi Gambar

Di dalam aplikasi web pada web HTML, biasanya Anda melakukan pengaturan besar atau kecil sebuah
objek dengan menentukan lebar dan panjangnya. Begitu juga dengan CSS yang menyediakan fungsi
untuk pengaturan dimensi. Pada tabel berikut ini ditampilkan property serta nilai/value yang
berkaitan dengan pengaturan dimensi gambar.

length Pengaturan lebar objek, untuk menggunakan nilai
width
auto alami gunakan auto.
length
height Pengaturan tinggi objek.
auto
Anda dapat menerapkannya dengan bentuk penulisan kode CSS seperti berikut:
img.class{
width: value;
height: value;
}
3.2 Dimensi Pada Paragraf

Apabila pada gambar yang dilakukan adalah pengaturan lebar dan tinggi, maka yang dapat dilakukan di
dalam pengaturan paragraf adalah melakukan pengaturan yang berkaitan dengan jarak tinggi antar
baris pada paragraf. Untuk dapat memberi jarak tinggi antar baris pada paragraf, property yang
digunakan adalah line-height. Syntaxnya adalah:
p.class{
line-height: value;
}
Pada tabel berikut ini ditampilkan nilai/value dalam pengaturan dimensi halaman:

length Ukuran panjang
line-height
auto Ukuran otomatis

Praktikum Dasar Web
C. PRAKTIKUM
Ketentuan Praktikum:
1. Ketik dokumen halaman web pada Notepad
2. Capture Screen hasil tampilan pada browser.
3. Buat analisa dan kesimpulan dari praktikum yang Anda kerjakan di akhir praktikum.
1. A. Pengaturan Margin

Praktikum Dasar Web
A. Pengaturan Margin Pada Elemen Tabel
2. Pengaturan Padding
A. Pengaturan Padding Pada Elemen Heading

Praktikum Dasar Web
B. Pengaturan Padding pada tabel [1]
Ganti property padding-top di atas dengan property padding-left, padding-bottom, dan padding-right
secara bergantian (sesuaikan setting padding dengan tag <title>). Capture tiap-tiap tampilannya pada
browser !
C. Pengaturan Padding pada tabel [2]

Praktikum Dasar Web
3. Pengaturan Dimensi Gambar
4. Pengaturan Dimensi Pada Paragraf
D. LATIHAN SOAL
Praktikum Dasar Web
1. Jelaskan, apa yang dimaksud dengan Margin?
2. Jelaskan, apa yang dimaksud dengan Padding?
3. Buat tampilan berikut pada browser!
H4, Padding(all)=10px
Jenis huruf=georgia
Warna latar belakang=oranye
Warna Latar
belakang #CC6600
Body
Margin:
-Atas=10px
Table -Kanan=50px
-Margin kiri=0.5cm -Bawah=50px
-Kiri=55px
#CCFF66
Padding (All)=0.1cm
Warna Latar Blk=#CCFF00
Paragraf
Padding (All)=10px
Warna Latar Blk=#990000
Jenis huruf=verdana
Ukuran huruf=12px
Margin:
-Atas=1cm
-Kanan=1cm
-Bawah=20cm
-Kiri=0.5cm
E. KESIMPULAN PRAKTIKUM
1. Margin adalah

Praktikum 4 CSS

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Praktikum 4 CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

PRAKTIKUM : Margin, Padding dan Dimensi

NAMA : Romi Yanwar

 margin:25px 50px 75px 100px;

Properties Value Keterangan

3. Dimensi Pada Halaman Web

3.1 Dimensi Gambar

Properties Value Keterangan

3.2 Dimensi Pada Paragraf

Properties Value Keterangan

Rekayasa Perangkat Lunak (Tk.1) - SMKN 1 Cimahi 3

Rekayasa Perangkat Lunak (Tk.1) - SMKN 1 Cimahi 4

A. Pengaturan Margin Pada Elemen Tabel

Rekayasa Perangkat Lunak (Tk.1) - SMKN 1 Cimahi 5

B. Pengaturan Padding pada tabel [1]

C. Pengaturan Padding pada tabel [2]

Rekayasa Perangkat Lunak (Tk.1) - SMKN 1 Cimahi 6

4. Pengaturan Dimensi Pada Paragraf

Rekayasa Perangkat Lunak (Tk.1) - SMKN 1 Cimahi 8

Anda mungkin juga menyukai