AKADEMI MANAJEMEN INFORMATIKA DAN KOMPUTER AMIK ROYAL KISARAN
PROGRAM STUDI MANAJEMEN INFORMATIKA
SATUAN ACARA PERKULIAHAN
PERTEMUAN - 12 :
MENDESAIN HALAMAN WEB DENGAN CSS
1. Identitas
Matakuliah : Pemrograman Web 1
Kode Mata Kuliah :
Semester : 3 ( Tiga )
SKS Dan Jumlah Jam : 2 (Dua), 2 x 45 menit (90 Menit) Matakuliah
Pendukung : - Pemrograman Terstruktur
- Basis Data - Design Grafis Pendukung
Matakuliah : - Pemrograman Web 2
Dosen : Andri Nata, ST, M.Kom
Minggu Ke : 13 ( Dua belas )
2
. Kompetensi
1. Unit Kompetensi : - Desain Web
2. Elemen Kompetensi : - Merancang sebuah homepage dengan coding CSS.
3. Kriteria Kinerja : Mahasiswa Mampu :
- Mendesain halaman website dengan CSS. - Memahami teknik eksternal CSS dalam mendesign web
3. Proses Pembelajaran
No. ALO-KASI WAKTU
KEGIATAN MEDIA/
ALAT/ BAHAN
HASIL
(Kriteria Unjuk Kerja)
DOSEN MAHASISWA
1 10’ Penciptaan
ketertiban suasana
Menyimak dan memahami
Whiteboard, Laptop &
belajar
Berdoa
bersama
Mengabsensi siswa Penjelasan
mengenai tujuan design web dengan coding css.
Projektor
2 65’ Mempersiapkan gambar pada masing-masing mahasiswa. Memberikan
pemahaman untuk melakukan design web dengan coding css.
Memahami dan mempraktekkan
Whiteboard, Laptop & Projektor
Dapat
menyelesaikan soal yang diberikan.
3 10’ Menutup
proses perkuliahan Berdoa Bersama
Memahami -
-4. Materi Pembelajaran :
-5. Metode Pembelajaran : Ceramah, tanya jawab, dan latihan.
6. Materi latihan :
Ketikkan kode css di bawah ini dengan editor yang anda miliki. Simpan dengan nama file style.css simpan di server anda yaitu C:\xampp\htdoc\folder_anda.
#wrapper {
width:800px; margin:20px auto; height:auto;
background:url(images/gambar_02.gif); box-shadow:10px -8px 20px black; }
#header {
width:800px; height:189px;
background:url(images/gambar_01.gif); margin:auto;
} Sesuaikan dengan ukuran
margin-top:5px; margin-right:25px; margin-left:40px;
background:url(images/gambar_02.gif); }
#kanan {
float: right; width: 360px; margin:auto;
}
#menu {
width:780px; height:38px;
background:#CCCCCC; padding-left:20px; }
#footer {
background:url(images/gambar_04.gif); text-align:center;
font-weight:bold; clear: both; color:#000000; width:800px; height:77px; }
Selanjutnya buka file baru, kemudian ketikan coding php seperti dibawah ini simpan dengan nama index.php simpan C:\xampp\htdoc\folder_anda. :
<html> <head>
<title>
***My Homepage </title>
<link rel="stylesheet" href="style.css" type="text/css"> </head>
<body bgcolor="aqua"> <div id="wrapper">
<div id="header"></div> <div id="menu"></div>
<div id="kanan"><img src="images/gambar_03.gif"></div> <div id="kiri"></div>
<div id="footer">Created by nama_anda</div> </div>
</body> </html>
Setelah diketik jangan lupa buka browser dan jalankan server anda :
7. Materi Tes : -
8. Kriteria Penilaian : 1 - 100
9. Pedoman Bukti :
-10. Kunci Jawaban :
-11. Referensi :
1. http://en.wikipedia.org/wiki/World_Wide_Web
2. http://id.wikipedia.org/wiki/Web
3. http://mysql.com
4. http://w3c.org
5. Jayan. 2010. CSS untuk orang awam. Palembang. Maxikom.
6. Prijono Agus, dkk. 2005. Mudan dan Cepat Menguasai Pemrograman WEB. Bandung. Informatika.
7. Hakim Lukmanul. 2009. Jalan Pintas Menjadi Master PHP. Yogyakarta. Lokomedia.
