MODUL AJAR 1a REKAYASA PERANGKAT LUNAK SMK/MAK FASE F

A. Informasi Umum

Kode Modul Ajar RPL PW.F.XI.1a

Penyusun/Tahun Hadinata, S. Kom/ 2023
Kelas/Fase Capaian XI/Fase F
Elemen/Topik Pemrograman Web/ Cascading style sheet (CSS)
Alokasi Waktu 240 menit (6 Jam Pelajaran)
Pertemuan Ke- 1
Profil Pelajar Pancasila Gotong royong, bernalar kritis, mandiri, kreatif serta
beriman, bertakwa kepada Tuhan Yang Maha Esa dan
berakhlak mulia
Sarana Prasarana LCD Proyektor, PC/Laptop, Internet
Target Peserta Didik Regular/tipikal
Model Pembelajaran Problem-Based Learning
Mode Pembelajaran Tatap Muka

B. Komponen Inti

 Tujuan Pembelajaran
1. Peserta didik dapat menjelaskan konsep style dalam tampilan halaman web.
2. Peserta didik dapat menerapkan prosedur penyisipan style dalam html.

 Pertanyaan Pemantik
1. Apa salah satu penyebab banyak masyarakat atau anda sendiri tidak bosan melihat
facebook dan bahkan bisa berlama-lama bermain social media tersebut?
2. Pernah kah anda berfikir bagaimana cara programmer facebook membuat tampilan
website yang indah dan rapi dan nyaman?

 Persiapan Pembelajaran
1. Guru melakukan asesmen diagnostik untuk pemetaan dan merancang strategi
pembelajaran pada peserta didik sebelum memulai pembelajaran.
2. Guru menyiapkan bahan tayang dalam bentuk power point mengenai berbagai macam
tampilan website.
 Kegiatan Pembelajaran
1. Pendahuluan (30 menit)
a. Guru membuka kegiatan pembelajaran dengan mengucapkan salam dan menyapa
peserta didik.
b. Melakukan doa bersama yang dipimpin salah seorang siswa.
c. Guru memeriksa kehadiran peserta didik sebagai sikap disiplin kepada peserta didik
dan melakukan perkenalan singkat.
d. Guru melakukan apersepsi dengan memberikan pertanyaan pemantik sebagai cara
untuk mengetahui kompetensi awal siswa.
e. Guru melakukan asesmen diagnostik non kognitif (daring menggunakan google
form) dan kognitif (luring) di awal pertemuan.
f. Guru memberikan sedikit gambaran tentang dasar Cascading style sheet (CSS).
g. Guru menyampaikan tujuan pembelajaran yang ingin dicapai dalam materi
Cascading style sheet (CSS).

2. Kegiatan Inti (195 menit)

Langkah 1. Orientasi masalah
a. Guru memberikan rangsangan kepada peserta didik untuk memusatkan perhatian
pada topik yang akan dibahas.
b. Guru bertanya apakah Anda pernah mengetahui Cascading Style Sheet (CSS)? Apa
saja aturan penulisan kode CSS yang anda ketahui?
c. Guru mendorong peserta didik untuk mempelajari dan mengumpulkan informasi
lain dari berbagai sumber untuk mendapatkan informasi lebih mengenai Cascading
style sheet (CSS).

Langkah 2. Mengorganisasi peserta didik

a. Peserta didik dibagi dalam kelompok terbatas, yaitu dengan teman sebangku.
b. Peserta didik bersama teman sebangku diminta menyelesaikan masalah berkaitan
dengan menerapkan prosedur penulisan dan penyisipan Cascading Style Sheet (CSS) dalam
html yang terdapat dalam Job Sheet.

Langkah 3. Membimbing penyelidikan individu dan kelompok

a. Guru berkeliling untuk melihat proses diskusi dari peserta didik.
b. Guru melihat hasil pengamatan dari pekerjaan peserta didik/kelompok dan diskusi
tentang apa yang sudah dicapai.
c. Guru memberikan bantuan terbatas, apabila ada peserta didik/kelompok yang
mengalami kesulitan.
 Langkah 4. Mengembangkan dan menyajikan hasil karya
a. Guru meminta dengan sukarela perwakilan peserta didik/kelompok untuk
mempresentasikan hasil diskusinya terkait materi menerapkan prosedur penulisan dan
penyisipan Cascading Style Sheet (CSS) dalam html.
b. Peserta didik/kelompok lain diminta menanggapi dan memberikan argumen apa
yang telah dipresentasikan.
c. Guru meminta perwakilan peserta didik/kelompok lain untuk mempresentasikan
hasil diskusi terkait materi menerapkan prosedur penulisan dan penyisipan Cascading
Style Sheet (CSS) dalam html.
d. Peserta didik/kelompok lain diminta kembali untuk menanggapi dan memberikan
argumen apa yang dipresentasikan.

Langkah 5. Menganalisa dan mengevaluasi proses pemecahan masalah

a. Guru meminta semua peserta didik untuk saling melakukan apresiasi terhadap
peserta didik/kelompok yang telah sukarela mempresentasikan hasil diskusi dan
peserta didik yang sudah terlibat aktif dalam pembelajaran.
b. Guru memberikan penguatan apabila ada jawaban peserta didik yang kurang sesuai.
c. Guru memberikan soal dalam Uji Kemampuan Diri untuk mengecek pemahaman
peserta didik dan memberikan umpan balik pembelajaran.

3. Kegiatan Penutup (15 menit)

a. Guru bersama peserta didik melakukan refleksi mengenai pembelajaran yang telah
dilakukan yaitu menerapkan prosedur penulisan dan penyisipan Cascading Style Sheet
(CSS) dalam html.
b. Guru mengkonfirmasi materi yang akan dibahas pada pertemuan berikutnya yaitu
Membuat program tampilan halaman web dengan Cascading Style Sheet (CSS).

 Rencana Asesmen
Peserta didik mengerjakan tugas terstruktur untuk melatih literasi dan pemahaman
materi dengan cara membuat Tugas Individu yaitu membuat ringkasan menggunakan
bahasa sendiri mengenai aturan dan penulisan kode css.

 Pengayaan dan Remedial

 Pengayaan: peserta didik diminta belajar bersama teman sekelas yang masih
mengalami hambatan belajar dengan menjadi tutor sebaya.
 Remedial: Peserta didik diminta mengerjakan ulang Tugas Individu yang belum dapat
dikerjakan dengan baik.
  Refleksi Peserta Didik dan Guru
Refleksi Peserta Didik
 Cobalah Anda tuliskan kembali apa saja aturan dan penulisan kode css?
Refleksi Guru
 Apakah pembelajaran telah berlangsung sesuai rencana?
 Apakah peserta didik yang mengalami hambatan, dapat teridentifikasi dan terfasilitasi
dengan baik?

C. Lampiran
1. Lembar Kerja Peserta Didik (LKPD)

1.1. JOB SHEET

Lembar Kerja Peserta Didik (Jobsheet)

Satuan Pendidikan : SMK Negeri 1 Pantai Labu
Kelas/Semester : XI / Ganjil
Nama Kelompok : ................................................
Nama Anggota : ................................................
Judul : Cara kerja dan anatomi Cascading Style Sheet (CSS)

Capaian Pembelajaran :
Pada akhir fase F peserta didik mampu memahami konsep dan menerapkan perintah
HTML, CSS, pemrograman Javascript, bahasa pemrograman server-side serta
implementasi framework pada pembuatan web statis dan dinamis untuk beragam
kebutuhan yang kontekstual. Selain itu, peserta didik juga mampu mendokumentasikan
serta mempresentasikan web statis dan dinamis yang telah dikembangkan.

Jobsheet : Cara kerja dan anatomi Cascading Style Sheet

A. Tujuan Pembelajaran
1. Memahami elemen dan struktur dasar CSS
2. Menerapkan css pada text

B. Pemahaman Bermakna
Dengan memahami modul ajar ini peserta didik akan mampu memahami konsep css, css
sintaks, css selector, css properties, Text Formatting, Postioning with CSS. Sehingga peserta
didik mampu menerapkan pengetahuannya tentang css dalam mendesain tampilan website
yang elegan dan menarik.

C. ALAT DAN BAHAN

1. Komputer/Laptop
2. Internet
 3. Smartphone (Optional)
4. Aplikasi Text Editor (VSCode, Sublime)

D. Materi Pokok
1. Cara kerja dan anatomi Cascading Style Sheet

E. DISKUSI
Amatilah beberapa gambar tampilan web berikut kemudian berikan tanggapan kalian !

NO Gambar Tanggapan

F. LANGKAH KEGIATAN :
Pendahuluan  CSS merupakan Bahasa yang digunakan untuk menata/ mendesain
: halaman website.
  CSS digunakan oleh web programmer dan juga web designer untuk
menentukan warna, tata letak font, dan semua aspek lain dari
presentasi dokumen di sebuah situs yang mereka rancang.
Langkah 1. Menyiapkan alat praktik
Kerja Tugas 2. Selalu memperhatikan Keselamatan Kerja
3. Penggunan Smarphone untuk mencari bahan referensi maksimal 10
menit persesi.
4. Soal :
Perkembangan website saat ini sangat berkembang pesat, terutama
dengan tampilan website yang sangat beragam, menarik dan
responsive. Hal tersebut tidak terlepas dari penggunaan css untuk
memperindah tampilan website. Buatlah tampilan website dengan
mengimplementasikan penggunaan css baik secara Inline, Internal
maupun Eksternal.

Desain tampilan Tugas :

 Jawaban :
Salin kode HTML dan CSS

Kesimpulan Setelah menyelesaikan modul Jobsheet peserta didik diharapkan dapat

menerapkan gaya tampilan halaman web dengan menggunakan kode css.
Rubrik 
Penilaian

1.2. Asesmen Diagnostik Non Kognitif

Asesmen Diagnostik Non Kognitif dilakukan secara daring menggunakan google Form :
https://forms.gle/PEodKZKUcF3gWGaf8
1.3. Soal Formatif
TEST FORMATIF
Materi Cascading style sheet (CSS)
TP. 2023/2024

Nama Siswa : .......................

Hari/ Tanggal : .......................

A. Berikan Tanda Silang pada jawaban paling tepat!

1. CSS merupakan singkatan dari?
a. Colorful Style Sheet
b. Creative Style Sheet
c. Cascading Style Sheet
d. Computer Style Sheet
e. CSS Style Shee
2. Silahkan lakukan proses analisis pada gambar dibawah ini. Pada Sintaks CSS,
Property ditunjukan pada nomor?

B. Jawaban Singkat :
1. Amati kode css dibawah ini :
.pplg1 {
text-align: center;
color: red;
}
Tampilan diatas menggunakan selector ccs ..................

C. Uraian :
1. Nurul kesulitan dalam pengerjaan tugas Pemrograman Web untuk melakukan
desain tampilan html dengan menggunakan css. Agar memudahkan pengeditan
kode nurul ingin melakukan penyatuan kode html dengan css menjadi 1 file saja
dengan tampilan akhir dan kode html :

Kode Html :

<!DOCTYPE html>
<html>
<head>
<title>Judul</title>
 </head>
<body>
<h1>PPLG</h1>
<p>Pengembangan Perangkat Lunak dan Gim.</p>
</body>
</html>

Bantu nurul dengan melakukan penyisipan kode css pada kode html diatas!

2. Nurul sangat terbantu dengan bantuan yang anda berikan, tetapi nurul mendapat
kesulitan kembali. Nurul ingin anda merevisi kembali jawaban dari soal sebelumnya.
Dengan melakukan pemisahan kode css menjadi file yang berbeda agar
memudahkan nurul untuk penggunaan pada file html yang lain. Untuk penamaan
file css tidak ada ketentuan.
Tunjukan bagaimana langkah-langkah pengerjaanya!

2. Rubrik Penilaian
2.1. Rubrik Tujuan Pembelajaran
RUBRIK TUJUAN PEMBELAJARAN
Cascading Style Sheets (CSS)

Bukti (evidence) Perlu

Cukup Baik Sangat Baik
Tujuan Bimbingan
(61 - 70) (71 - 80) (81 - 100)
Pembelajaran (0 - 60)
1. Mampu Belum Menjelaskan Menjelaskan Menjelaskan
menjelaskan mampu singkatan singkatan singkatan dari
konsep style menjelaskan dari CSS dan dari CSS, CSS, fungsi,
dalam konsep Style fungsinya fungsi dan sintaks CSS
tampilan CSS sintaks CSS dan 3 gaya
halaman web penyisipan css
2. Mampu Memerlukan Melakukan Melakukan Mampu
menerapkan bimbingan penerapkan prosedur mengarahkan
prosedur dalam penyisipan penyisipan teman yang
penyisipan melakukan css dalam css dalam lain dalam
style dalam penerapkan html secara html secara melakukan
html penyisipan mandiri mandiri penyisipan css
css dalam namun dengan dalam html
html masih di tepat
temukan 1
atau 2
kesalahan
 2.2. Rubrik Penilaian Job Sheet
Nilai
Persentase bobot Praktik
(NP)
Sikap
Persiapan Proses Hasil Waktu
Kerja ∑NK
10% 30% 10% 30% 20%
Skor
NK
Perhitungan Nilai Praktik :
Ket :

 Skor : Skor penilaian 1-100

 NK : Skor x Persentase
NP : Jumlah total NK

2.3. Rubrik Penilaian Formatif

No Keterangan Skor Total
Soal Pilihan Berganda
Untuk soal pilihan ganda secara keseluruhan sebanyak 2 nomor dengan
1
ketentuan sebagai berikut:
dan 2
Jawaban benar Skor 1
2
Jawaban salah Skor 0
Jawaban Singkat
Menjawab benar sesuai dengan kunci jawaban Skor 3
3 2
Menjawab salah atau tidak menjawab Skor 0
Uraian
4 Menjawab benar sesuai dengan kunci jawaban Skor 3
dan Menjawab benar tetapi masih ada kata kunci yang kurang lengkap Skor 1 6
5 Menjawab salah atau tidak menjawab Skor 0

Nilai Akhir : Total Skor x 10

3. INSTRUMEN PENILAIAN
3.1. Asesmen Tujuan Pembelajaran
3.2. Job Sheet
 3.3. Asesmen Formatif

4. Kisi – Kisi
1. Asesmen Formatif
 Kisi-kisi Penulisan Soal Formatif
Materi Cascading style sheet (CSS)
Tahun Pelajaran 2023/2024

Satuan Pendidikan : SMK Negeri 1 Pantai Labu

Mata Pelajaran : Rekayasa Perangkat Lunak
Elemen : Pemrograman Web
Kurikulum : Kurikulum Merdeka
Kelas / Fase : XI PPLG / F
Jumlah Soal : 5 Butir
Bentuk Soal : Pilihan Ganda 2 soal
Jawaban singkat 1 soal
Uraian 2 soal

No. Capaian Materi Indikator Rumusan butir soal Level No. Bentuk KUNCI JAWABAN
Pembelajaran Soal Kognitif Soal Soal
1 Menerapkan Cascading Peserta CSS merupakan singkatan dari?
prosedur style didik A. Colorful Style Sheet
penulisan sheet mampu B. Creative Style Sheet
dan (CSS) menjelaskan C. Cascading Style Sheet
penyisipan konsep D. Computer Style Sheet
Cascading Cascading E. CSS Style Sheet C1 1 PG C
Style Sheet style sheet
(CSS) dalam (CSS) dalam
html tampilan
halaman
web
Peserta Silahkan lakukan proses analisis pada gambar
didik dibawah ini. Pada Sintaks CSS, Property
mampu ditunjukan pada nomor?
menjelaskan
CSS Syntax C4 2 PG B

Peserta Amati kode css dibawah ini :

didik .pplg1 {
mampu text-align: center;
menerapkan Jawaban
color: red; C4 3 Class
penggunaan Singkat
}
CSS Tampilan diatas menggunakan selector ccs :
Selectors ………..
Peserta Nurul kesulitan dalam pengerjaan tugas <!DOCTYPE html>
didik Pemrograman Web untuk melakukan desain <html>
mampu tampilan html dengan menggunakan css. Agar <head>
menerapkan memudahkan pengeditan kode nurul ingin <style>
prosedur melakukan penyatuan kode html dengan css h1 {
penyisipan menjadi 1 file saja dengan tampilan akhir dan color: red;
style dalam kode html : margin-left: 40px;
html secara }
internal </style>
C4 4 Uraian </head>
<body>

<h1>PPLG</h1>
<!DOCTYPE html> <p>Pengembangan
<html> Perangkat Lunak dan
<head> Gim.</p>
<title>Judul</title>
</head> </body>
<body> </html>
 <h1>PPLG</h1>
<p>Pengembangan Perangkat Lunak dan
Gim.</p>

</body>
</html>
Bantu nurul dengan melakukan penyisipan kode
css pada kode html diatas!
Peserta Nurul sangat terbantu dengan bantuan yang anda File style.css
didik berikan, tetapi nurul mendapat kesulitan kembali. h1 {
mampu Nurul ingin anda merevisi kembali jawaban dari color: red;
menerapkan soal sebelumnya. Dengan melakukan pemisahan margin-left:
prosedur kode css menjadi file yang berbeda agar 40px;
penyisipan memudahkan nurul untuk penggunaan pada file }
style dalam html yang lain. Untuk penamaan file css tidak ada
html secara ketentuan.
Eksternal Tunjukan bagaimana langkah-langkah File soal.html
pengerjaanya! <!DOCTYPE html>
<html>
<head>
C4 5 Uraian <link
rel="stylesheet"
href="style.css">
</head>
<body>

<h1>PPLG</h1>
<p>Pengembangan
Perangkat Lunak
dan Gim.</p>

</body>
</html>
5. Bahan Bacaan Guru dan Peserta Didik
CSS Dasar
1. Pengertian CSS, Apa yang dimaksud dengan CSS?
Css adalah kependekan dari Casscading Style Sheet. CSS merupakan salah satu kode
pemroggraman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout
halaman web supaya lebih elegan dan menarik. CSS adalah sebuah teknologi internet yang
direkomendasikan oleh Word Wide Web Corsortium atau W3C pada tahun 1996. Awalnya
, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini.
CSS telah mendukung banyak bahasa markup seperti HTML,XHTML,XML,SVG ( Scalable
Vector Grafics ) dan Mozila XUL (XML User Interface Language).

Pada Desember 1996, W3C memperkenalkan Level 1 spesifikasi CSS atau juga dikenal CSS1
yang mendukung format,warna font teks,dan lain-lain. Kemudian , Mei 1998, W3C
menerbitkan CSS2 yang di dalamnya diatur fungsi peletakan elemen. Dan sekarang,
W3Ctelah memperbaiki dan meningkatkan CSS2 ke CSS3.

CSS digunakan oleh web programmer dan juga web designer untuk menentukan warna
,tata letak font, dan semua aspek lain dari presentasi dokumen di situs mereka. Saat ini,
hamper tidak ada situs web yang dibangun tanpa kode CSS.

2. Menginput Kode CSS Ke Halaman HTML

Sebelum kita menginputkan file.css hita harus membuat file html terlebih dahulu, lalu kita
menambahkan tag <link> pada html taq <head> kemudian kita membuat file CSS dengan
format nama file.CSS lalu kita buat taq link terlebih dahulu di dalam taq head, kemudian
kita berikan atribut untuk merefensi file CSS dengan menggunakan href=”namafile.css”.
Lalu setelah href=”namafile.css” kita tambahkan type dan rel sehingga akan menjadi;
<link href=”namafile.css” type=”text/css” rel =”stylesheet”>

3. Pengertian Selector,Property dan Value pada CSS

Selector,Property dan Value ini adalah elemen inti dari CSS, kita akan pelajari mengenai
CSS dan membahas ketiga aspek ini.

Karena kode CSS digunakan untuk mengubah/memanipulasi tampilan dari taq HTML,CSS
membutuhkan suatu cara untuk ‘mereferensikan ’ atau menghubungkan kode CSS dengan
taq
HTML yang sesuai. Inilah yang dimaksud dengan Selector dalam CSS.

Sesuai dengan namanya,selector digunakan untuk mencari bagian web yang ingin di
manipulasi atau ingin di-style. Misalnya : “kita cari seluruh taq <p>”,atau “cari seluruh taq
HTML yang memiliki atribut class=”warning” atau “cari seluruh link yang ada di dalam taq
<p>”.

Selector paling dasar dari CSS adalah tag dari HTML itu sendiri, misalnya: tag p,I,h1,li, dll.
Selector di dalam CSS dapat menjadi kompleks tergantung kebutuhannya.
Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag HTML.
CSS memiliki puluhan property yang dapat digunakan agar menampilkan hasil akhir yang
kita inginkan. Hampir semua property dalam CSS data dipakai untuk seluruh selector.
Jika selector digunakan misalnya untuk “mencari seluruh tag <p>”, maka property adalah
“efek apa yang ingin dimanipulasi dari tag p tersebut”, seperti ukuran text, warna text,
jenis fontnya, dll.
Value CSS adalah nilai dari property. Misalkan untuk property background-color yang
digunakan untuk mengubah warna latar belakang dari sebuah selector, value atau nilainya
dapat berupa red, blue, black, atau white.
CSS Syntax :

Selector : Merujuk kepada elemen HTML yang ingin diberi style atau gaya
Declaration : Area penempatan property dan value css berisi 1 atau lebih dan dipisahkan
oleh titik
koma
Property : Merujuk kepada jenis css yang akan digunakan
Value : Merujuk kepada nilai yang akan diberikan untuk Property

F. CSS Lanjutan
4. CSS Selectors
CSS Selector digunakan untuk menemukan atau memilih elemen HTML yang ingin
diberikan gaya. CSS Selector terbagi atas 5 kategori :
A. Simple selectors : memilih elemen berdasarkan nama tag html, id,
class
p{
text-align: center;
color: red;
}

B. Combinator selectors : memilih elemen berdasarkan hubungan tertentu di

antara
elemen tersebut
div p {
background-color: yellow;
}

C. Pseudo-class selectors : memilih elemen berdasarkan keadaan tertentu

/* mouse over link */
a:hover {
color: #FF00FF;
}

D. Pseudo-elements selectors : memilih dan memberi gaya pada bagian elemen

p::first-line {
color: #ff0000;
 font-variant: small-caps;
}

E. Attribute selectors : memilih elemen berdasarkan atribut atau nilai

atribut
a[target="_blank"] {
background-color: yellow;
}

5. Pembagian berdasarkan letak kode CSS :

A. Inline CSS
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">PPLG</h1>
<p style="color:red;"> Pengembangan Perangkat Lunak dan GIM </p>

</body>
</html>

B. Internal CSS
Istilah untuk kode CSS yang ditulis langsung dalam berkas HTML. Kode CSS ini
dituliskan pada tag <style>. Tag ini bisa ditulis di dalam blok head ataupun body, atau
di keduanya.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>PPLG</h1>
<p>Pengembangan Perangkat Lunak dan GIM</p>

</body>
</html>
 C. External CSS
Nama file : pplg.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>PPLG</h1>
<p>Pengembangan Perangkat Lunak dan GIM</p>

</body>
</html>

Nama file : mystyle.css

body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

G. CSS Lanjutan
CSS Website Layout
Sebuah situs website sering kali dibagi menjadi beberapa bagian seperti header, menu,
konten, dan footer

6. Glosarium
CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur
tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk
memisahkan konten dari tampilan visualnya di situs.
7. Daftar Pustaka
Didik Setiawan. 2021. Buku Sakti Pemrograman Web: HTML, CSS, PHP, MySql & Javascript.
Bantul: PT ANAK HEBAT INDONESIA

www.w3schools.com, CSS Tutorial [internet], CSS Tutorial, <

https://www.w3schools.com/css/default.asp >[01 September 2023]