RENCANA PEMBELAJARAN SEMESTER (RPS)

PROGRAM STUDI PENDIDIKAN TEKNIK INFORMATIKA DAN KOMPUTER

FAKULTAS KEGURUAN DAN ILMU PENDIDIKAN
UNIVERSITAS SEBELAS MARET

Identitas Mata Kuliah Identitas dan Validasi Nama Tanda Tangan

Kode Mata Kuliah : KB2716306 Dosen Pengembang RPS : Rosihan Ari Yuana,
S.Si, M.Kom
Nama Mata Kuliah : Desain Web
Bobot Mata Kuliah (sks) : 2 Koord. Kelompok Mata Kuliah : Dwi Maryono, S.Si,
M.Kom
Semester : 3
Mata Kuliah Prasyarat : - Kepala Program Studi : Dr. Agus Efendi, M.Pd

Capaian Pembelajaran Lulusan (CPL)

Kode CPL Unsur CPL
Sikap (S) : - Menunjukkan sikap bertanggungjawab atas pekerjaan di bidang TIK secara mandiri; (S-9)
Keterampilan Umum (KU) : - Mampu melakukan proses evaluasi terhadap kelmpok kerja yang berada di bawah
tanggungjawabnya dan mampu mengelola pembelajaran secara mandiri (KU-8)
- Mampu menerapkan pemikiran logis, kritis, sistematis dan inovatif dalam kontek
pengembangan atau implementasi ilmu pengetahuan dan teknologi yang memperhatikan dan
menerapkan nilai humaniora yang sesuai dengan bidang TIK. (KU-1)
Pengetahuan (P) : - Menguasai konsep, teori dan aplikasi pada bidang teknik komputer dan informatika yang
diajarkan di tingkat pendidikan menengah kejuruan (P-2)
Keterampilan Khusus (KK) : - Mampu mendesain layout halaman web menggunakan HTML5, CSS, dan CSS Framework

CP Mata kuliah (CPMK) : - Mampu membuat struktur halaman web dengan HTML5
- Mampu membuat layout halaman web dengan HTML5 dan CSS
- Mampu membuat layout halaman web dengan HTML5 dan CSS Framework (Bootstrap)

Bahan Kajian Keilmuan : - Bidang keahlian Rekayasa Perangkat Lunak

Deskripsi Mata Kuliah : Matakuliah ini berisi materi tentang bagaimana membuat layout halaman web menggunakan teknologi
terbaru dari HTML5, yang dikombinasikan dengan CSS dan CSS Framework (Bootstrap). Materi yang
dibahas dalam matakuliah ini diawali dengan pengantar HTML5, dan diakhiri dengan bagaimana
membuat layout web responsive dengan CSS dan Bootstrap.

Daftar Referensi : 1. www.w3schools.com/html

2. www.tutorialspoint.com/html5
3. www.w3schools.com/css
4. www.tutorialspoint.com/css
5. www.getbootstrap.com
6. www.w3schools.com/bootstrap
7. www.tutorialspoint.com/bootstrap

Penilaian*
Metode Pengalaman Teknik
Tahap Kemampuan akhir Materi Pokok Referensi Waktu Indikator/
Pembelajaran Belajar penilaian
kode CPL
/bobot
1 2 3 4 5 6 7
1 Memahami dan Struktur dasar Ref (1) a. Ceramah Mengamati 2 x 50’ Mampu Penugasan
mampu membuat HTML5; Elemen Ref (2) b. Praktikum struktur HTML5 menjelaskan 2%
halaman web dan Atribut c. Penugasan struktur
dengan berbagai HTML5; Heading; d. Demonstrasi Mengamati HTML5
macam Paragraph; syntax HTML5
komponen/ Comments; Mampu
elemen Menuliskan kode menuliskan
menggunakan HTML5 dan kode beberapa
HTML5 menampilkannya komponen
ke dalam HTML5
browser

Menyimpulkan
struktur HTML5
dan cara
penulisan kode
HTML5 untuk
beberapa
komponennya
2 Formatting; Ref (1) a. Ceramah Mengamati 2 x 50’ Mampu Penugasan
Links; Image, Ref (2) b. Praktikum syntax beberapa menggunakan 3%
Tables; Lists; c. Penugasan elemen beberapa
Blocks dan Inline d. Demonstrasi komponen
 Penilaian*
Metode Pengalaman Teknik
Tahap Kemampuan akhir Materi Pokok Referensi Waktu Indikator/
Pembelajaran Belajar penilaian
kode CPL
/bobot
1 2 3 4 5 6 7
Element Membedakan HTML5, dan
tampilan block mampu
dan inline melakukan
element formatting di
HTML5
Menuliskan kode
HTML5 dan
menampilkannya
ke dalam
browser

Menyimpulkan
cara penulisan
kode HTML5
untuk beberapa
komponennya
3 HTML5 Form Ref (1) a. Ceramah Mengamati 2 x 50’ Mampu Penugasan
Ref (2) b. Praktikum beberapa menjelaskan 3%
c. Penugasan komponen form beberapa
d. Demonstrasi dalam HTML5 komponen
input form di
Menuliskan kode HTML5
HTML5 untuk
membuat form Mampu
dan beberapa menuliskan
komponen kode untuk
inputnya membuat form
dan beberapa
Menampilkan komponen
hasil kode yang input di HTML5
telah dibuat ke
browser

Menyimpulkan
cara penulisan
kode HTML5
untuk membuat
form dan
beberapa
komponennya
4 HTML5 Media Ref (1) a. Ceramah Mengamati 2 x 50’ Mampu Penugasan
(sound, video) Ref (2) b. Praktikum beberapa menjelaskan 3%
c. Penugasan komponen media apa saja
d. Demonstrasi media dalam yang disupport
HTML5 oleh HTML5

Menuliskan kode Mampu

HTML5 untuk menuliskan
membuat media kode untuk
menyisipkan
Menampilkan media di
hasil kode yang HTML5
telah dibuat ke
browser

Menyimpulkan
cara penulisan
kode HTML5
untuk beberapa
komponennya
berupa video
dan
sound/audio.
5 Memahami cara CSS Syntax; Cara Ref (3) a. Ceramah Mengamati 2 x 50’ Mampu Penugasan
kerja CSS, dan menyisipkan CSS; Ref (4) b. Praktikum aturan syntax menjelaskan 3%
mampu mengatur CSS Colors; CSS c. Penugasan CSS cara penulisan
serta membuat Background; CSS d. Demonstrasi syntax CSS
layout halaman Border; CSS Menuliskan kode
web dengan CSS Margin; CSS CSS untuk Mampu
Padding; CSS mengatur menyisipkan
 Penilaian*
Metode Pengalaman Teknik
Tahap Kemampuan akhir Materi Pokok Referensi Waktu Indikator/
Pembelajaran Belajar penilaian
kode CPL
/bobot
1 2 3 4 5 6 7
Width/Height; properti CSS dengan 3
CSS Box Model komponen web cara (inline,
internal,
Menampilkan external)
hasil kode CSS
yang telah Mampu
dibuat ke menuliskan
browser kode CSS
untuk
Menyimpulkan pengaturan
aturan penulisan beberapa
syntax CSS dan komponen
cara penggunaan web
CSS untuk
pengaturan Mampu
tampilan memodifikasi
beberapa properti
komponen web beberapa
komponen
HTML5 dengan
CSS
6 CSS Text; CSS Ref (3) a. Ceramah Mengamati 2 x 50’ Mampu Penugasan
Fonts; CSS Icons; Ref (4) b. Praktikum syntax CSS untuk menuliskan 3%
CSS Links; CSS c. Penugasan beberapa kode CSS
Lists; CSS Tables; d. Demonstrasi komponen web untuk
pengaturan
Menuliskan kode beberapa
CSS untuk komponen
mengatur web
properti
komponen web

Menampilkan
hasil kode CSS
yang telah
dibuat ke
browser

Menyimpulkan
cara penggunaan
CSS untuk
pengaturan
tampilan
beberapa
komponen web
7 CSS Layout: CSS Ref (3) a. Ceramah Mengamati 2 x 50’ Mampu Penugasan
Display; CSS Ref (4) b. Praktikum syntax CSS untuk menuliskan 3%
Width & Max c. Penugasan mengatur layout kode CSS
Width; CSS d. Demonstrasi komponen web untuk
Position; CSS pengaturan
Overflow, CSS Menuliskan kode layout
Float; CSS Inline CSS untuk beberapa
Block; CSS Align mengatur layout komponen
komponen web web

Menampilkan Mampu
hasil kode CSS menerapkan
yang telah CSS layout
dibuat ke untuk
browser pengaturan
tata letak
Menyimpulkan komponen
cara penggunaan dalam HTML5
CSS untuk
pengaturan
layout beberapa
komponen web
8 UJIAN TENGAH SEMESTER Unjuk Kerja
30%
 Penilaian*
Metode Pengalaman Teknik
Tahap Kemampuan akhir Materi Pokok Referensi Waktu Indikator/
Pembelajaran Belajar penilaian
kode CPL
/bobot
1 2 3 4 5 6 7
9 Memahami cara Viewport; Grid Ref (3) a. Ceramah Mengamati 2 x 50’ Mampu Penugasan
kerja web View; Media Ref (4) b. Praktikum contoh web menjelaskan 2%
responsive, dan Queries; c. Penugasan responsive apa dan
mampu membuat d. Demonstrasi kegunaan
layout web Menjelaskan viewport, grid
responsive dengan manfaat web view, dan
HTML5 dan CSS responsive media queries
di CSS
Mengamati cara
kerja viewport, Mampu
grid view, dan menerapkan
media queries viewport, grid
view, dan
Menuliskan kode media queries
untuk mengatur dalam
viewport, grid membuat
view, dan media layout web
queries responsive

Menampilkan
hasil kode yang
telah dibuat ke
dalam browser
10 Responsive Ref (3) a. Ceramah Mengamati efek 2 x 50’ Mampu Penugasan
Images; Ref (4) b. Praktikum responsive dari menjelaskan 3%
Responsive c. Penugasan image dan video cara kerja
Video; d. Demonstrasi responsive
Framework Menuliskan kode images dan
untuk Web untuk video
Responsive memberikan
efek responsive Mampu
pada image dan menerapkan
video responsive
image dan
Menampilkan video ke dalam
hasil kode yang layout web
telah dibuat ke responsive
dalam browser
Mampu
Mencari menyebutkan
referensi beberapa
beberapa framwork web
framework responsive,
untuk web kelebihan dan
responsive kekurangan
masing-masing
11 Memahami cara Pengantar Ref (5) a. Ceramah Mengamati cara 2 x 50’ Mampu Penugasan
kerja Bootstrap, Bootstrap (BS); Ref (6) b. Praktikum kerja Bootstrap melakukan 3%
dan mampu BS Tables; BS Ref (7) c. Penugasan instalasi
menggunakannya Jumbotron; BS d. Demonstrasi Melakukan Bootstrap
untuk mengatur Alerts; BS instalasi
layout komponen/ Button; BS Icons; Bootstrap, Mampu
elemen web BS Badges; kemudian membuat
menggunakan- beberapa
nya komponen
Bootstrap
Mengamati
beberapa bentuk Mampu
komponen memodifikasi
Bootstrap properti
beberapa
Menuliskan kode komponen
beberapa dengan
komponen Bootstrap
Bootstrap

Menampilkan
hasil kode yang
telah dibuat ke
dalam browser
 Penilaian*
Metode Pengalaman Teknik
Tahap Kemampuan akhir Materi Pokok Referensi Waktu Indikator/
Pembelajaran Belajar penilaian
kode CPL
/bobot
1 2 3 4 5 6 7

12 Bootstrap + Ref (5) a. Ceramah Mengamati 2 x 50’ Mampu Penugasan

jQuery: BS Ref (6) b. Praktikum beberapa bentuk memahami 3%
Dropdowns; BS Ref (7) c. Penugasan komponen cara kerja
Collapse; BS d. Demonstrasi Bootstrap beberapa
Tabs; BS Navbar; komponen
BS Modal; BS Menuliskan dan Bootstrap yang
Tooltip memodifikasi dikombinasi-
beberapa kan dengan
komponen jQuery
Bootstrap
Mampu
Menampilkan membuat
hasil kode yang beberapa
telah dibuat ke komponen
dalam browser Bootstrap yang
dikombinasi-
kan dengan
jQuery

Mampu
memodifikasi
properti
beberapa
komponen
Bootstrap yang
dikombinasi-
kan dengan
jQuery
13 BS Forms Ref (5) a. Ceramah Mengamati 2 x 50’ Mampu Penugasan
Ref (6) b. Praktikum beberapa bentuk membuat 3%
Ref (7) c. Penugasan komponen Form beberapa
d. Demonstrasi Bootstrap komponen
input form
Menuliskan dan menggunakan
memodifikasi Bootstrap
beberapa
komponen form Mampu
Bootstrap memodifikasi
properti
Menampilkan beberapa
hasil kode yang komponen
telah dibuat ke input form
dalam browser dengan
Bootstrap
14 Memahami cara Bootstrap Grid Ref (5) a. Ceramah Mengamati cara 2 x 50’ Mampu Penugasan
kerja Bootstrap System Ref (6) b. Praktikum kerja BS Grid memahami 3%
untuk web Ref (7) c. Penugasan System apa, fungsi,
responsive, dan d. Demonstrasi dan cara kerja
mampu membuat Menuliskan dan Bootstrap Grid
layout web memodifikasi System
responsive dengan kode BS
HTML5 dan menggunakan Mampu
Bootstrap grid system menerapkan
BS Grid System
Menampilkan untuk
hasil kode yang pengaturan
telah dibuat ke tata letak
dalam browser komponen
dalam web
responsive
15 BS Stacked/ Ref (5) a. Ceramah Mengamati 2 x 50’ Mampu Penugasan
Horizontal; BS Ref (6) b. Praktikum perbedaan dan memahami 3%
Grid Ref (7) c. Penugasan cara menuliskan perbedaan
Small/Medium/ d. Demonstrasi kode untuk sistem BS
Large layout Stacked dan
stacked/horizon- Horizontal
tal
 Penilaian*
Metode Pengalaman Teknik
Tahap Kemampuan akhir Materi Pokok Referensi Waktu Indikator/
Pembelajaran Belajar penilaian
kode CPL
/bobot
1 2 3 4 5 6 7
Mampu
Mengamati menjelaskan
perbedaan grid kegunaan BS
small/medium/ Stacked dan
large Horizontal

Menuliskan dan Mampu

memodifikasi menjelaskan
kode untuk kegunaan BS
pengaturan Grid
layout dengan Small/Medium
model /Large
stacked/horizon-
tal Mampu
menerapkan
Menuliskan dan BS
memodifikasi Stacked/Hori-
kode untuk zontal, dan
pengaturan Grid
layout dengan Small/Medium
model /Large dalam
small/medium/ web
large responsive
16 UJIAN AKHIR SEMESTER Unjuk Kerja
30%

JUMLAH 100%

Surakarta, 1 September 2017

Ketua Tim Pengampu MK

Rosihan Ari Yuana, S.Si, M.Kom

197909012002121001