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>
