Scribd
Unggah
65 tayangan9 halaman

Lab Modul 02 - CSS

Modul 2 membahas penggunaan CSS dalam pembuatan tampilan halaman web. Materi yang disampaikan meliputi penggunaan CSS untuk membuat border, padding, margin, dan warna pada elemen-elemen halaman, serta penggunaan float, pseudo-class, dan property lainnya untuk mengubah tampilan dan tata letak komponen halaman. Modul ini bertujuan membantu mahasiswa memahami dan mampu menerapkan CSS dalam pembuatan desain halaman web.

Diunggah oleh

Phoniex United
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
65 tayangan9 halaman

Lab Modul 02 - CSS

Modul 2 membahas penggunaan CSS dalam pembuatan tampilan halaman web. Materi yang disampaikan meliputi penggunaan CSS untuk membuat border, padding, margin, dan warna pada elemen-elemen halaman, serta penggunaan float, pseudo-class, dan property lainnya untuk mengubah tampilan dan tata letak komponen halaman. Modul ini bertujuan membantu mahasiswa memahami dan mampu menerapkan CSS dalam pembuatan desain halaman web.

Diunggah oleh

Phoniex United
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

2016 / 2017

IF-3P2
Praktikum Pemrograman Web

Modul 2
CSS

Departemen Sistem Informasi

Institut Teknologi Harapan Bangsa


Mata kuliah : Praktikum Pemrograman Web

Kode Matakuliah : IF-3P2

SKS : 1 SKS

Waktu : 100’

Modul ke : 1

A. Tujuan

1. TIU : Memahami Cascading Style Sheet

2. TIK : Mahasiswa mampu menggunakan CSS

B. Bahasan : CSS

C. Sub Pokok Bahasan

1.
D. Perangkat keras yang diperlukan: Komputer

Perangkat lunak yang diperlukan: Editor, Browser


Soal Nomor 1

Gunakan CSS untuk membuat tampilan halaman web seperti gambar di atas. Definisikan bingkai luar
dengan border-style solid dan kotak dalam dengan border-style dotted. Cobalah mengubah ubah
bentuk, ukuran, dan warna border. Cobalah pula mengubah-ubah padding dan margin.

Catatan:

a. Gunakan float untuk kotak-kotak kecil di dalam kotak besar.

b. Bila kotak kuning disentuh mouse, background-nya akan berubah warna.


Soal Nomor 2

Dengan menggunakan HTML dan CSS, buatlah tampilan seperti gambar di atas.

Catatan:

a. Gunakan div (bukan tabel)


b. Kotak luar berukuran 175 x 300 piksel. Untuk membuat bayangan, guanakan box-shadow.
c. Lingkaran dibuat dengan div, berdiameter 150 pixel. Untuk membuat bentuk melingkar,
gunakan border-radius.
d. Untuk membuat bayangan pada tulisan “MESIN CUCI”, gunakan text-shadow.
Soal Nomor 3

Gunakan pseudo-class link, visited , dan hover untuk membuat menu berisi beberapa link
seperti gambar di atas, dimana: huruf-huruf pada link berwarna hitam dan tanpa garis bawah. Untuk
link yang pernah dikunjungi, berwarna merah dan juga tanpa garis bawah. Sedangkan bila cursor
berada di atas link, maka link tersebut menjadi berwarna kuning dengan background hitam, dan
muncul garis bawah.
Jawaban

[1]
<html>

<head>

<style type="text/css">

.xxxxxxxxxxxr {

width:500px;

xxxxxxxxxxxxxxxxx;

xxxxxxxxxxxx #xxx;

padding:10px;

background-color:#CF9;

line-height: 0.75cm;

font-family: sans-serif;

.xxxxxxxxxan {

xxxxxxxxxxxht;

xxxxxx: 30%;

margin:0 0 10px 10px;

padding:10px;

xxxxxxxxxxxxxxxxxxxxxxxx;

background-color:#FF9;

xxxxxxxxgn:center;

line-height: 0.4cm;

.xxxxxxxxxri {

xxxxxxxxxxft;

wxxxxh: 30%;

margin: 10px 10px 0 0;

padding:10px;

xxxxxxxxxxxxxxxxxxxxxxx;

background-color:#FF9;
xxxxxxxxgn:center;

line-height: 0.4cm;

.xxxxxxxxxxxxxxxxxxxxxxxxxxver

xxxxxxxxxxxxxxxr:#F93;

</style>

</head>

<body>

<div class="kotakbesar"> <b>AREM-AREM</b> <br>

<xxxxxxass="kotakkanan"> Apakah Anda pernah menikmati arem-arem? Apakah Anda


tahu tentang arem-arem? <xxxxx>

Arem-arem merupakan penganan serupa lemper, yaitu nasi berisi sayuran atau sambal
goreng yang dibungkus dengan daun pisang. Arem-arem populer sebagai penganan
pengganti sarapan. Biasanya ukurannya dibuat lebih besar daripada lemper. Arem-
arem merupakan cemilan khas dari Kota Kebumen juga banyak pula di temukan di
Jogja, Solo dan daerah lain di Jawa.

<xxxxxxxxss="kotakkiri"> Lemper berbeda dari arem-arem dalam hal penggunaan nasi.


Lemper menggunakan ketan, alih-alih nasi. xxxx>

Dalam pembuatannya, isi arem-arem—yang biasanya adalah sambal goreng—dibuat


terlebih dahulu. Selanjutnya beras dimasak setengah matang. Nasi setengah matang
kemudian ditata pada permukaan rata, isi ditaruh di atas, lalu digulung dengan
nasi. Selanjutnya, gulungan dibungkus daun pisang dan kemudian dikukus hingga
masak. Ada variasi yang membungkus gulungan nasi dengan semacam telur dadar tipis
sebelum dibungkus daun pisang. (Sumber: Wikipedia)</div>

</body>

</html>

[2]
<html>

<head>

<title>Praktikum 2-1</title>

<style type="text/css">
xxxxxxk1

xxxxxxxxxxxx;

xxxxxxxxxxxxxx;

padding: 20px;

background-color: #FC6;

xxxxxx: 20px 20px 15px #888888;

-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx;

xxxxxxxxdow: 5px 5px 5px #FFFFFF;

text-align: center;

xxxxxx2

border: 10px solid #a1a1a1;

xxxxxxxxxxxxxxxxxxx;

width: 150px;

height: 150px;

xxxxxxxxxxxxxus:150px;

-xxxxxxxxxxxxxxxxxxxxxxxxxx earlier */

</style>

</head>

<body>

<br/>

<div class="kotak1">

<br/>

<xxxxxxxxxxxxxxxxxxxxxxxxxxdiv>

<br /><br />

MESIN CUCI

</div>

<br/><br/>

</body>

</html>
[3]

<html>

<head>

<title>Praktikum CSS No. 3</title>

<style type="text/css">

xxxxxxxxk {color: black; xxxxxxxxxxx: nxe}

xxxxxxxxd {color: red; xxxxxxxxxxxxxnone}

xxxxxxxxr {xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxne}

</style>

</head>

<body bgcolor="#FFFFFF" text="#000000">

<b>Collections of Poems by:</b> <br>

<a xxxxxxxxxxxxxxxxxxxxxx>

<a xxxxxxxxxxxxxxxxxxxxxxx>

<xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>

<xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxbr>

<xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxbr>

<xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxbr>

<a xxxxxxxxxxxxxxxxxxxxxxxxxxxxxa><br>

</body>

</html>

Anda mungkin juga menyukai