Tri Sunarto
MODUL AJAR
PEMROGRAMAN WEB DAN PERANGKAT
BERGERAK
CSS (Cascading Style Sheet)
KURIKULUM MERDEKA
Semester Ganjil
Tahun Pelajaran 2023 / 2024
SMK
FASE F
(KELAS XI)
Modul Ajar – Pemrograman Web dan Perangkat Bergerak | 1
1. INFORMASI UMUM
Nama Sekolah : SMK Negeri 1 Sandai
Mata Pelajaran : Pemrograman Web dan Perangkat Bergerak
Penyusun : Tri Sunarto, [Link]
Penelaah Industri : -
Tahun Penyusunan : 2023
Fase / Kelas : F / XI
Kode : 37
Elemen : Pemrograman Web
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.
Materi Pokok : CSS
Jumlah Peserta Didik : 28 Siswa
Alokasi Waktu : 3 JP (1 x pertemuan)
Kompetensi Awal : Sebelum mempelajari modul ini peserta didik harus
memahami pemrograman dasar pengembangan perangkat
lunak dan gim.
Profil Pelajar Pancasila : -
Sarana dan Prasarana :
a. Sarana
Alat Gawai (Laptop / handphone)
Bahan Kertas HVS, buku tulis
Perkiraan Biaya Biaya kuota internet dana alat tulis
b. Prasarana
Sumber Ajar Buku paket, modul
Media Ajar Internet, LMS
Lingkungan Belajar Ruang laboratorium web desain
Alternatif
Target Peserta Didik : Peserta didik reguler/tipikal
Peserta didik dengan kesulitan belajar
Pesera didik dengan pencapaian tinggi
Program Keahlian : Pengembangan Perangkat Lunak dan Gim
Model Pembelajaran : Discovery learning
Moda Pembelajaran : Blended Learning
Metode Pembelajaran :
Diskusi, presentasi
Modul Ajar – Pemrograman Web dan Perangkat Bergerak | 2
2. KOMPONEN INTI
A. Tujuan Pembelajaran : Mengenal dan menguasai dasar-dasar CSS, memahami
setiap object sebagai dasar pembuatan interface pada
halaman browser, dan membuat halaman web sederhadan
dengan CSS
Peserta didik memahami CSS pada perangkat lunak dan
B. Pemahaman Bermakna :
gim
1. Apakah Anda tahu fungsi dari CSS?
2. Pernahkah Anda membuat suatu code program?
C. Pertanyaan Pemantik : 3. Apakah Anda tahu bagaimana cara menggunakan CSS?
4. Berikan contoh-contoh aplikasi untuk mengetikan suatu
code tertentu?
Modul Ajar – Pemrograman Web dan Perangkat Bergerak | 3
D. Kegiatan Pembelajaran
a. Kegiatan Pendahuluan b. Kegiatan Inti
1. Peserta didik 1. Peserta menyimak pertanyaan yang disampaikan oleh
menjawab salam guru guru mengenai tema pembelajaran yaitu HTML pada
2. Peserta didik berdo’a perangkat lunak dan gim
sebelum memulai 2. Peserta didik menjawab pertanyaan guru dengan tepat
kegiatan pembelajaran dan antusias
dengan dipimpin salah 3. Peserta didik membentuk kelompok beranggotakan 4-5
satu peserta didik orang, kemudian tiap kelompok mengerjakan
untuk memimpin do’a 4. Peserta didik berdiskusi dalam kelompok untuk
3. Peserta didik menjawab pertanyaan-pertanyaan yang ada di LKPD
menjawab presensi dengan komunikasi dan kerjasama yang baik
guru dan kesiapan 5. Peserta didik mencari, menemukan dan mencatat
belajar informasi tentang materi yang ditugaskan dengan
4. Peserta didik penuh antusias dan berpikir kritis
menyimak capaian 6. Peserta didik mendiskusikan untuk menentukan
pembelajaran, tujuan informasi yang tepat dan sesuai dengan tugas yang
pembelajaran yang dierikan
akan dicapai yang 7. Peserta didik menganalisa dan membandingkan
disampaikan oleh guru paparan materi yang telah di ungkapkan dalam
5. Peserta didik kelompoknya dengan cermat dan tepat
menyimak motivasi 8. Setiap kelompok melaporkan hasil diskusi dengan
dari guru presentasi hasil tugasnya
Modul Ajar – Pemrograman Web dan Perangkat Bergerak | 4
6. Peserta didik 9. Peserta didik mempresentasikan hasil diskusi LKPD dan
menyimak dan simulasi dengan komunikasi yang baik dan penuh
merespon apersepsi antusias
dengan mengajukan 10. Peserta didik yang lain memberikan tanggapan terhadap
pertanyaan yang presentasi temannya dengan cermat dan lugas
berkaitan dengan 11. Peserta didik menerima tanggapan dari peserta didik lain
materi yang akan dan guru
dibahas 12. Peserta didik memperhatikan penguatan dan penjelasan
7. Peserta didik yang lebih luas dari guru atau peserta
menyimak garis besar 13. Peserta didik memberikan tepuk tangan pada kelompok
cakupan materi dan yang sudah tampil mempresentasikan hasil diskusinya.
kegiatan yang akan
dilakukan
c. Kegiatan Penutup dan Refleksi Peserta
d. Refleksi Guru
didik
1. Peserta didik membuat rangkuman / 1. Apakah ada kendala pada kegiatan
simpulan terkait dengan materi yang pembelajaran?
dipelajari pada hari ini dengan penuh 2. Apakah semua peserta didik aktif
antusias, cermat dan tepat dalam kegiatan pembelajaran?
2. Peserta didik menjawab soal post test 3. Apa saja kesulitan peserta didik
dengan cermat dan tepat yang dapat diidentifikasi pada
3. Peserta didik menerima penilaian / kegiatan pembelajaran?
refleksi hasil kegiatan yang sudah 4. Apakah siswa yang memiliki
dilaksanakan dengan beberapa kesulitan ketika berkegiatan dapat
pertanyaan: teratasi dengan baik?
a. Apa yang menyenangkan 5. Apa level pencapaian rata-rata
dalam kegiatan pembelajaran peserta didik dalam kegiatan
hari ini? pembelajaran ini?
b. Apa yang Anda lakukan untuk 6. Apakah seluruh peserta didik dapat
memperbaiki hasil belajar dianggap tuntas dalam
Anda? pelaksanaan pembelajaran?
c. Dengan pembelajaran hari ini, hidup
saya lebih bermakna. (ya/tidak)
Modul Ajar – Pemrograman Web dan Perangkat Bergerak | 5
4. Peserta didik menyimak rencana
pembelaran pada pertemuan berikutnya
5. Peserta didik mengakhiri pembelajaran 7. Apa strategi agar seluruh peserta
dengan do’a dan salam penutup didik dapat menuntaskan
kompetensi?
E. Asesmen
Bentuk
Jenis
Profil Pelajar Pancasila Tertulis Performa
Diagnostik Penilaian diri Jawaban singkat
Formatif Presentasi dan simulasi
Sumatif
F. Pengayaan dan Remedial
a. Pengayaan
Bagi peserta didik yang sudah mencapai nilai ketuntasan, diberikan pembelajaran
pengayaan sebagai berikut:
1. Peserta yang mencapai nilai n (ketuntasan) > n > n (maksimum) diberikan materi
masih dalam cakupan CP dengan pendalaman sebagai pengetahuan tambahan.
2. Peserta didik yang mencapai nilai n > n (maksimum) diberikan materi melebihi
cakupan CP dengan pendalaman sebagai pengetahuan tambabahan. Soal-soal yang
diberikan untuk mereka jawab adalah soal-soal yang belum mampu mereka
tuntaskan pada saat mengikuti Penilaian Harian dan soal lainya yang relevan yang
diberikan oleh guru. Nilai yang diberikan sebagai nilai akhir pada CP ini bagi para
peserta didik yang menempuh perbaikan adalah nilai akhir yang berhasil diraih dan
dengan pertimbangan
lainnya dari guru
b. Remedial
Program remedial diberikan kepada peserta didik yang belum tuntas atau belum
mencapai nilai standar Kriteria Ketuntasan Minimal (KKM). Bagi para peserta didik ini,
bila memungkinkan akan diberikan “review” pembelajaran atau bahkan pembelajaran
ulang sehingga lebih memantapkan mereka untuk menempuh perbaikan pada tahap
remedial. Soal-soal yang diberikan untuk mereka jawab adalah soal-soal yang belum
mampu mereka tuntaskan pada saat mengikuti Penilaian Harian. Nilai yang diberikan
sebagai nilai akhir pada CP ini bagi para peserta didik yang menempuh remedial adalah
Modul Ajar – Pemrograman Web dan Perangkat Bergerak | 6
nilai akhir yang
berhasil diraih dan dengan pertimbangannya dari guru.
1. LAMPIRAN
Glosarium
CSS adalah kependekan dari Cascading Style Sheet, berfungsi untuk memperindah tampilan HTML
atau menentukan bagaimana elemen HTML ditampilkan, seperti menentukan posisi, merubah warna
teks atau background dan lainnya.
Daftar Pustaka
Buku Bahan Ajar Dasar-dasar Pengembangan Perangkat Lunak dan Gim.
Kemendikbudristek, 2021
Buku Bahan Ajar Pemrograman Web dan Perangkat Bergerak.
Kemendikbudristek, 2021
[Link]
[Link]
RINGKASAN MATERI
CSS
Pengertian CSS
CSS adalah kependekan dari Cascading Style Sheet, berfungsi untuk memperindah tampilan HTML
atau menentukan bagaimana elemen HTML ditampilkan, seperti menentukan posisi, merubah warna teks atau
background dan lainnya. Berikut adalah sintak dasar dari CSS :
Modul Ajar – Pemrograman Web dan Perangkat Bergerak | 7
Penjelasan :
- Selector
Selector adalah elemen/tag HTML yang ingin diberi style. Kita dapat menuliskan langsung nama tag
yang ingin diberi style tanpa perlu menambahkan tanda <>. Pada contoh kode CSS diatas kita akan memberi
style pada seluruh tag h1 yang terdapat dalam file HTML.
Jika tag HTML yang ingin diberi style memiliki ID, dapat menuliskan nama ID tersebut dengan diawali
tanda kress (#). Contoh :
#header
Dan jika tag yang diberi style memiliki Class, maka penulisan selector bisa dilakukan dengan tanda
titik (.) diikuti dengan nama class. Contoh :
.artikel
Jika hanya menuliskan satu selector, seperti contoh kode CSS di atas, maka seluruh tag h1 yang
terdapat dalam file HTML akan memiliki style yang sama. Bagaimana jika kita hanya ingin memberi style
pada tag h1 yang hanya terdapat di dalam Class artikel. Maka penulisan selectornya seperti berikut :
.artikel h1
Kode tersebut akan memerintahkan pada browser untuk memberi style pada tag h1 yang hanya terdapat
di dalam class artikel (atau - h1 yang merupakan child dari class artikel).
Kita dapat memilih lebih dari satu tag untuk penghematan kode CSS. Misalnya ketika anda memiliki
dua atau lebih tag dengan warna background yang sama, dari pada menuliskan kode seperti ini :
h1{ background-color: #666666; }
{ background-color: #666666; }
a { background-color:
kita dapat menggabungkan selector dengan menambahkan tanda koma pada nama tag yang ingin diberi
style.
h1, p, a { background-color: #66666; }
- Property dan Value
Property adalah sifat-sifat yang ingin diterapkan pada selector, seperti warna text, warna background,
jarak antar elemen, garis pinggir dan lainnya.
Untuk memberikan nilai value pada property digunakan tanda titik dua ( : ). Setiap property diakhiri
Modul Ajar – Pemrograman Web dan Perangkat Bergerak | 8
dengan tanda koma (;).
1. Penulisan CSS
Ada 3 cara penulisan kode CSS yaitu inline, internal, dan external.
Inline
Penulisan kode CSS dengan metode inline ini bisa dilakukan langsung pada tag yang ingin diberi style
dengan menggunakan atribut style, seperti contoh berikut :
<h1 style=”color : red”> Judul Web </h1>
Internal
Penulisan kode CSS dengan metode internal yaitu ditulis didalam tag style yang ditempatkan pada tag
head, seperti contoh berikut :
<html>
<head>
<title>Judul HTML</title>
<style>
h1 {
color : red;
}
</style>
</head>
...
External
Metode external yaitu dengan membuat file CSS dan dipanggil didalam tag head. File CSS memiliki
ekstensi misalnya [Link], seperti contoh berikut :
<html>
<head>
<title>Judul HTML</title>
<link rel=”stylesheet” href=”[Link]”/>
</head>
...
2. Margin
Property margin digunakan untuk memberikan jarak antar elemen/tag HTML. Misalnya jarak antar
<div> dan tag-tag HTML lainnya. Sebagai contoh, buatlah file HTML dengan kode berikut:
<div class=’box‛>
Box ke satu
</div>
<div class=’box’>
Box ke dua
</div>
Lalu tambahkan tag style dalam tag head, dan ketikkan kode CSS berikut :
.box{
background-color:green;
Modul Ajar – Pemrograman Web dan Perangkat Bergerak | 9
color: yellow;
width:100px;
height:100px;
margin-bottom:50px;
}
Berikut adalah tampilan yang akan anda dapatkan :
Jarak antar box ke satu dan box ke dua sedikit berjauhan, karena kita menambahkan margin bawah
(margin-bottom) sebesar [Link] melihat perbedaan ketika kita memberikan margin atau tidak, anda
dapat menghapus property margin-bottom dan perhatikan [Link] juga dapat memberikan jarak
dari kanan (right), kiri (left) dan atas (top). Misalnya :
margin-top:20px;
margin-right:30px;
margin-bottom:50px;
margin-left:40px;
3. Padding
Property padding digunakan untuk memberikan jarak antara konten elemen. Property padding
digunakan untuk memberikan ruang di dalam border di sekeliling atas, kanan, bawah dan kiri isi/elemen.
Seperti halnya margin, property padding dapat ditulis langsung dengan cara disingkat (Shorthand) untuk
keempat sisi tersebut, atau bisa satu per satu (Individual Sides) yang dibagi menjadi padding‐top, padding‐
right, padding‐bottom, dan padding‐left. Penulisan nilai pada padding sama seperti dengan margin. Contoh
penulisan padding :
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
4. Border
Property border digunakan untuk memberikan garis pinggir pada elemen, setidaknya ada tiga property
yang harus anda set, yaitu color, style dan width.
border-color : black;
border-style : solid;
border-width : 5px;
5. Background
Modul Ajar – Pemrograman Web dan Perangkat Bergerak | 10
Background atau latar belakang adalah sebuah elemen utama untuk menentukan bagaimana sebuah
obyek ditampilkan. Ada beberapa properti dalam backround seperti berikut :
- background-color
Properti background-color ini adalah untuk menentukan warna background dari sebuah element.
Contoh penggunaannya yaitu seperti dibawah ini :
body {
background-color: #b0c4de;
}
Di dalam CSS, warna ditentukan oleh:
HEX value – seperti “#ff0000”
RGB value – seperti “rgb(255,0,0)”
Nama Warna – seperti “red”
Untuk detail dan nama warna yang bisa digunakan bisa dicek disini
- background-image
Properti background-color ini adalah untuk menentukan background berupa gambar. Contoh
penggunaan nya yaitu :
body {
background-image: url(“[Link]”);
background-color: #cccccc;
}
- background-repeat
Secara default, properti background-repeat mengulang gambar secara horizontal dan vertikal. Gambar
dapat diulang dengan menggunakan repeat-x atau repeat-y.
body {
background-image: url(“[Link]”);
background-repeat: repeat-y;
}
- background-attachment
Properti ini menentukan bagaimana gambar terlihat, apakah fixed (tidak bergerak ketika discroll) atau
scroll (bergerak ketika discroll). Value yang dapat digunakan yaitu scroll (mengikuti elemen), fixed (tidak
mengikuti elemen), local, initial, dan inherit. Contoh penggunaannya yaitu:
body {
background-image: url(‘[Link]’);
background-repeat: no-repeat;
background-attachment: fixed;
}
- background-position
Digunakan menentukan posisi background, value yang dapat digunakan antara lain : left top, left
center, left bottom,right top, right center, right bottom, center top, center center, center bottom
Contoh penggunaannya yaitu seperti dibawah ini :
Modul Ajar – Pemrograman Web dan Perangkat Bergerak | 11
body {
background-image: url(‘[Link]’);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
6. Positioning (static,relative, Absolut, Fixed)
Dalam CSS kitapun dapat memposisikan (Positioning) elemen sesuai kehendak kita. Hal ini membuat
desain web dengan CSS lebih fleksibel karena kita bisa menempatkan elemen-elemen HTML sesuai dengan
keinginan kita atau tuntutan desain web. Beberapa position dalam CSS yaitu :
- Static
Secara default, seluruh elemen/tag HTML memiliki positioning static. Artinya kita belum bisa/tidak
dapat menentukan posisi elemen tersebut. Ketika kita ingin merubah posisi dari elemen tersebut maka harus
memberikan position:relative dan selanjutnya dapat menggunakan property top, right, bottom, dan left untuk
menentukan posisi elemen yang bersangkutan. Sebagai contoh perhatikan kode HTML dan CSS berikut :
<div id=’box’></div>
Berikut kode CSSnya.
#box{
width : 300px;
height : 300px;
}
Ketika tidak memberikan nilai pada property position, maka secara default, #box memiliki
position:static, jadi anda tidak dapat menggunakan property top, right, bottom dan left untuk menentukan
posisi #box tersebut :
#box{
background : green;
width : 300px;
height : 300px;
top : 100px;
left : 200px;
}
Maka hasilnya sebagai berikut :
Modul Ajar – Pemrograman Web dan Perangkat Bergerak | 12
- Relative
Sekarang cobalah untuk menambahkan position:relative pada #box dan perhatikan bahwa box tersebut
bergeser 100px dari atas dan 200px dari kiri.
#box{
background : green;
width : 300px;
height : 300px;
top : 100px;
left : 200px;
position:relative;
}
Maka hasilnya sebagai berikut :
- Absolut
Penambahan position:absolute akan membuat elemen tersebut terlepas dari aturan penempatan elemen
dan dibatasi oleh parent yang memiliki positioning relative. Buatlah markup HTML seperti berikut :
<div id=’box’>
<div id=’box2’></div>
</div>
Lalu berilah style seperti berikut :
#box{
width:300px;
height:300px;
background:green;
}
#box2{
width:50px;
height:50px;
background:yellow;
Maka hasilnya sebagai berikut :
Modul Ajar – Pemrograman Web dan Perangkat Bergerak | 13
Modul Ajar – Pemrograman Web dan Perangkat Bergerak | 14
LEMBAR ASESMEN DIAGNOSTIK NON KOGNITIF
1. Lembar amati lingkungan rumahmu saat ini, lalu pilih emoji berikut yang mewakili
perasaanmu. (silang pada gambar)
2. Berikan pendapatmu tentang bagaimana kondisi lingkungan akan berdampak pada
semangat belajarmu?
3. Apa saja yang dapat kamu lakukan untuk menciptakan kenyamanan lingkungan
belajar dirumah
4. Apa yang kamu rasakan saat menggunakan aplikasi perangkat lunak dan gim?
5. Apa harapanmu saat kamu mempelajari tentang pemrograman web dan perangkat
bergerak?
Modul Ajar – Pemrograman Web dan Perangkat Bergerak | 15
LEMBAR KERJA PESERTA DIDIK (LKPD)
Nama Siswa :
Nama Kelompok :
Kelas :
Langkah-langkah Kegiatan :
1. Simak dengan baik presentasi / penjelasan yang ditayangkan oleh guru;
2. Baca dan carilah literatur yang mendukung presentasi yang anda amati;
3. Diskusikan dengan kelompok tentang materi pemrograman web dan perangkat bergerak;
4. Buat hasil diskusi di lembar presentasi;
5. Presentasikan di depan kelas;
Modul Ajar – Pemrograman Web dan Perangkat Bergerak | 16
RUBRIK PENSKORAN TUGAS PROYEK
Nama Siswa :
Nama Kelompok :
Kelas :
Petunjuk : Berilah tanda cek (√) pada kolom skor
Skor
No Komponen / Subkomponen
7 8 9 10
Persiapan :
1 Referensi tentang pemrograman web dan
perangkat bergerak
Proses Kerja :
2
Sistematika Kerja
Hasil :
3 a. Pelaporan / makalah
b. Presentasi Simulasi
Waktu :
4
Ketepatan waktu penyampaian laporan
Persiapan Proses Hasil Waktu Total
Skor Perolehan
Skor Maksimal
Bobot 15 30 40 15 100
Total
𝑠𝑘𝑜𝑟 𝑝𝑒𝑟𝑜𝑙𝑒ℎ𝑎𝑛
Nilai Total = ∑( x bobot )
𝑠𝑘𝑜𝑟 𝑚𝑎𝑘𝑠𝑖𝑚𝑎𝑙
Keterangan :
Siswa yang belum kompeten maka harus mengikuti pembelajaran remedial,
Siswa yang cukup kompeten diperbolehkan untuk memperbaiki pekerjaannya sehingga
mencapai level kompeten.
Modul Ajar – Pemrograman Web dan Perangkat Bergerak | 17
PEDOMAN PENSKORAN TUGAS PROYEK
Nama Sekolah : SMK Negeri 1 Sandai
Kelas / Semester : XI / Ganjil
Tahun Pelajaran : 2023 / 2024
Mata Pelajaran : Pemrograman Web dan Perangkat Bergerak
Komponen / Sub Komponen Indikator / Kriteria Unjuk Kerja Skor
Persiapan (skor maksimal 10)
Referensi tentang pemrogram web dan Konsep ide yang dipilih sangat tepat
10
perangkat bergerak dan sesuai
Konsep ide yang dipilih tepat dan sesuai 9
Konsep ide yang dipilih kurang tepat
8
dan sesuai
Konsep ide yang dipilih tidak tepat dan
7
sesuai
Proses Kerja (skor maksimal 10)
Sistematika kerja Sistematika kerja dalam membuat
10
laporan efektif dan sesuai
Sistematika kerja dalam membuat
9
laporan efektif dan kurang sesuai
Sistematika kerja dalam membuat
8
laporan kurang efektif namun sesuai
Sistematika kerja dalam membuat
7
laporan kurang efektif dan sesuai
Hasil (skor maksimal 20)
Pelaporan / makalah Laporan rapi dan menarik, dilengkapi
10
cover dan lampiran
Laporan rapi dan menarik, dilengkapi
9
cover
Laporan dilengkapi cover dan lampiran,
8
namun kurang rapi dan menarik
Laporan kurang rapi dan menarik, tidak
7
dilengkapi cover dan lampiran
Waktu (skor maksimal 10)
Ketepatan waktu pengumpulan proyek Kurang dari 4 haru 10
5-10 hari 9
11-13 hari 8
Lebih dari 14 hari 7
Modul Ajar – Pemrograman Web dan Perangkat Bergerak | 18
REMEDIAL DAN PENGAYAAN
A. Pembelajaran Remedial
1. Pemberian pembelajaran ulang dengan metode dan media yang berbeda,
menyesuaikan dengan gaya belajar peserta didik.
2. Pemberian bimbingan secara perorangan.
3. Pemberian tugas-tugas atau latihan secara khusus, dimulai dengan tugas-tugas atau
latihan sesuai dengan kemampuannya
4. Pemanfaatan tutor sebaya, yaitu peserta didik dibantu oleh teman sekelas yang telah
mencapai ketuntasan belajar.
B. Pembelajaran Pengayaan
1. Belajar kelompok, yaitu sekelompok peserta didik diberi tugas pengayaan untuk
dikerjakan Bersama pada dan/atau di luar jam-jam pelajaran sekolah.
2. Belajar mandiri, yaitu peserta didik diberi tugas pengayaan untuk dikerjakan
sendiri/individual.
3. Pemberian pembelajaran hanya untuk kompetensi/materi yang belum diketahui
peserta didik. Dengan demikian tersedia waktu bagi peserta didik untuk memperoleh
kompetensi/materi baru atau bekerja dalam proyek secara mandiri sesuai dengan
kemampuan masing-masing.
Modul Ajar – Pemrograman Web dan Perangkat Bergerak | 19