Scribd
Unggah
74 tayangan9 halaman

Modul Praktikum Pemrograman WEB Teknik Komputer

1. Modul ini membahas penggunaan gambar dalam CSS dengan menjelaskan beberapa properti yang terkait seperti background image, background repeat, background position, dan lainnya. 2. Ada pula penjelasan tentang mengatur ukuran gambar, border, transparansi gambar dan contoh script CSS sederhana yang menggunakan gambar latar belakang. 3. Tugas akhir membahas pembuatan CSS dengan menggunakan gambar berukuran tertentu dan contoh kartu K

Diunggah oleh

RENISA AMALIA TAHIR
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
74 tayangan9 halaman

Modul Praktikum Pemrograman WEB Teknik Komputer

1. Modul ini membahas penggunaan gambar dalam CSS dengan menjelaskan beberapa properti yang terkait seperti background image, background repeat, background position, dan lainnya. 2. Ada pula penjelasan tentang mengatur ukuran gambar, border, transparansi gambar dan contoh script CSS sederhana yang menggunakan gambar latar belakang. 3. Tugas akhir membahas pembuatan CSS dengan menggunakan gambar berukuran tertentu dan contoh kartu K

Diunggah oleh

RENISA AMALIA TAHIR
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 9

Modul Praktikum Pemrograman WEB Teknik Komputer ||34

Modul 4
CSS IMAGE
A. Judul
CSS Image
B. Tujuan
1. Mengenal dasar CSS.
2. Mahasiswa mampu membuat dokumen html menggunakan dasar CSS dan script CSS
menggunakan text editor dan menampilkannya lewat browser
3. Membuat file extensi html dan file.css sederhana menggunakan text editor dan
menampilkan pada browser.
C. Alat dan Bahan
1. Laptop / PC
2. Notepad / Notepad++ / Text editor lainnya
3. Web browser (Firefox, Google Chrome, Internet Explorer atau yang lainnya)
D. Langkah Kerja
1. Bukalah notepad atau program text editor yang lain.
2. Ketikkan script doukumen html :Simpan (File|Save As), dengan nama
nama_modul4.html (file harus disimpan dengan format .html dan .css)
3. Bukalah dokumen yang anda buat tadi dengan cara klik kanan Open with (pilih salah
satu web browser yang tersedia di komputer/PC Anda
4. Analisis dan jelaskan script Tugas Mandiri.
E. Teori Dasar dan Praktikum
1. CSS
Aturan CSS mempunyai dua bagian utama : Selector dan Declaration. Selector
biasanya adalah HTML element yang ingin dibuat style nya. Declaration
merupakan isi dari property dan nilai dari CSS. Pemberian nilai dari property
digunakan tkita titik dua ( : ), akhir dari property digunakan tkita semicolon ( ; ).

Keterangan.
<link, merupakan tag pembuka diak

ipanggil

Background Color
Properti background-color menentukan warna latar belakang suatu elemen.
Warna latar belakang halaman didefinisikan dalam pemilih body :
body {background-color:#b0c4de;}

Modul Praktikum Pemrograman WEB Teknik Komputer ||35


Dengan CSS, warna paling sering ditentukan oleh : nilai HEX - seperti "#
FF0000", sebuah nilai RGB - seperti "rgb (255,0,0)", nama warna - seperti
"merah"

Background Image
Properti background-image menentukan gambar untuk digunakan sebagai latar
belakang suatu elemen. Format image yang didukung oleh css antara lain : JPEG,
GIF, dan PNG.
Secara default, gambar diulang sehingga mencakup seluruh elemen.
Gambar latar belakang untuk halaman bisa di set seperti ini:
body {background-image:url('paper.gif');}

Background-repeat : mengulang gambar background, property : repeat, repeat-x,


repeat-y, no-repeat.
Background-attachment : Menentukan apakah gambar latar belakang tetap atau
scroll dengan sisa halaman, property : scroll, fixed, inherit.
Background-position : Mengatur posisi awal dari background image

Bacground Repeat
Melakukan pengulangan image, baik secara horizontal ataupun vertical. Dengan
nilai ini, maka halaman web akan terisi keseluruhan oleh background.
Repeat-x :Melakukan pengulangan image dengan posisi horizontal.
Repeat-y :Melakukan pengulangan image dengan posisi vertikal atau lurus ke
atas.
No-repeat : Tidak akan melakukan pengulangan pada image, image akan
ditampilkan biasa sesuai ukurannya.

CSS Background
Properti singkat untuk latar belakang ha
body {background: #ffffff url('img_tree.png') no-repeat fixed right top;}
Bila menggunakan properti singkat urutan nilai properti adalah: background-
color, background-image, background-repeat, background-attachment,
background-position.

Modul Praktikum Pemrograman WEB Teknik Komputer ||36


(file.css)
body {color: red;
background: #F1F2EC;
font-size: 8pt;

font-family: Verdana, Arial, comic, Sans Serif;}


h1 {color: #0D10E5;
font-size: 12pt;
background-image: url(gambar.jpg);
}
h2 {color: #040677;
font-size: 10pt;}
p {margin-bottom: 16px;}

<html >
<head>
<link rel=stylesheet href= file.css type= text/css >
</head>
<body>
<h1>heading 1 Text</h1>
<p> It is a far, far better thing that I do, than I have ever done; it is a far,
far better rest that I go to than I have ever known. </p>
<p>Closing paragraph</p>
</body>
</html>
Output:

Analisis :

1. CSS Mengatur Gambar Pada CSS


Ada beberapa properti yang harus dipahami, seperti dimensi, border dan lain
sebagainya, kedua hal tersebut bisa mempengaruhi tampilan gambar pada website,
tetapi itu tergantung naluri desain masing-masing koder. Berikut ini tabel properti yang
bisa digunakan untuk gambar yang akan kita bahas dalam tutorial ini.

Modul Praktikum Pemrograman WEB Teknik Komputer ||37


Border atau garis pada gambar ternyata dapat memperbaiki tampilan gambar yang
terlihat biasa saja, berikut ini adalah cara untuk mengatur border atau garis pada
gambar dengan css yaitu menggunakan properti border.

<!DOCTYPE html>
<html>
<head>
<title>Mengatur Gambar Pada CSS</title>
<style type="text/css">
img {
border: 3px solid red;
}
</style>
</head>
<body>
<img src="gambar1/gambar1.jpg">
</body>
</html>
Output :

Analisis :

Modul Praktikum Pemrograman WEB Teknik Komputer ||38


2. Mengatur Lebar Gambar Pada CSS
Untuk mengatur lebar gambar dengan css yaitu dengan menggunakan properti width,
namun apabila kita hanya menentukan lebarnya saja maka tingginya akan dengan
sendirinya menyesuaikan lebar tersebut. Berikut ini contoh kodenya.

<style type= text/css >


img {
border: 3px solid blue;
width: 120px;
}
</style>
Output :

Analisis :

3. Mengatur Tinggi pada CSS


Untuk mengatur tinggi gambar dengan css yaitu dengan menggunakan properti
height, sama seperti width, jika pada width gambar akan menyesuaikan tingginya,
namun sebaliknya pada mengatur tinggi gambar dengan height akan menyesuaikan
lebar dari gambar tersebut. Berikut ini contoh kodenya.
<style type="text/css">
img {
border: 3px solid blue;
width: 90px;
height: 200px;
}
</style>
Output :

Modul Praktikum Pemrograman WEB Teknik Komputer ||39


Analisis :

4. Mengatur Gambar Agar Menjadi Transparan


Properti Transparan.
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<img src="gambar3.jpg" width="150" height="113" alt="gambar3">

</body>
</html>
Output :

Modul Praktikum Pemrograman WEB Teknik Komputer ||40


Properti Transparan
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<img src="gambar1.jpg" width="150" height="113" alt="gambar1">
<img src="gambar3.jpg" width="150" height="113" alt="gambar3">
<p><b>Note:</b> In IE, a !DOCTYPE must be added for the :hover selector to
work on other elements than the a element.</p>
</body>
</html>
Output :

Modul Praktikum Pemrograman WEB Teknik Komputer ||41


Analisis :

F. Tugas Mandiri
1. Buatlah css menggunakan gambar ukuran photo anda a) 3x4, b) 4x6, c) 10x15.
2. Buatlah css menggunakan Text di Box Transparan.

3. Buatlah Contoh script menggunakan Css dengan latar belakang gambar pada
praktikum diatas buat seperti kartu KK.

Modul Praktikum Pemrograman WEB Teknik Komputer ||42

Anda mungkin juga menyukai