RENCANA PELAKSANAAN PEMBELAJARAN

Satuan Pendidikan : SMK Ganesha Tama Boyolali

Kelas / Semester : XI / Gasal
Tema : Format tabel pada halaman web
Sub Tema : Tag Tabel HTML
Pembelajaran ke : 3
Alokasi waktu : 10 menit

A. TUJUAN PEMBELAJARAN
Setelah mengikuti pembelajaran ini, melalui metode diskusi dalam pembelajaran
Pemrograman Web dan Perangkat Bergerak, Diharapkan peserta didik dapat:
 Menentukan penggunaan tag tabel dengan HTML dengan benar
 Menerapkan format tabel pada halaman web dengan benar
 Menganalisis kode program untuk membuat tabel dengan terampil
 Mengimplementasikan format tabel pada halaman web dengan terampil.

B. KEGIATAN PEMBELAJARAN
Kegiatan Deskripsi Kegiatan Karakter/4C/Literasi Waktu
Pendahuluan
1. Orientasi 1. Guru memulai pembelajaran Religius
dengan salam dan meminta
salah satu peserta didik untuk
memimpin doa
2. Guru menanyakan kehadiran
peserta didik dan
mempersiapkan kelas agar
lebih kondusif.
2. Apersepsi 1. Guru mengingatkan kembali Collaboration
peserta didik tentang materi 4C
yang telah dipelajari pada
2 menit
pertemuan sebelumnya.
2. Guru menyampaikan tujuan
pembelajaran yang akan
dipelajari.
3. Motivasi 1. Peserta didik diberikan
motivasi belajar di tengah
pandemi covid 19
2. Guru bersama peserta didik
mengkondisikan kelas
untuk membuat kelompok
secara heterogen.
Kegiatan Inti
1. Peserta didik mengamati sebuah tampilan tabel Literasi 6 menit
2. Peserta didik diberikan permasalahan dalam LKPD
3. Peserta didik mengamati masalah pada LKPD
4. Guru meminta peserta didik untuk berkelompok Collaboration
sesuai yang sudah ditentukan sebelumnya Disiplin
5. Guru mendorong peserta didik untuk tanya
mengenai permasalahan tag tabel html.
6. Peserta didik melakukan diskusi kelompok untuk Critical Thinking
mengidentifikasi dan memecahkan masalah pada Tanggung Jawab
LKPD
7. Guru membimbing pada setiap kelompok untuk Collaboration
menggali informasi atau data yang diperlukan Disiplin
8. Peserta didik diberikan kesempatan untuk Critical Thinking
menanyakan hal-hal yang belum dipahami Tanggung jawab
9. Guru membimbing peserta didik untuk dapat
menentukan, menganalisis tag tabel yang diberikan.
10. Peserta didik aktif menyajikan/ mempresentasikan Communication
hasil diskusi tentang apa yang sudah mereka Percaya diri
pelajari dikelompoknya. Tanggung jawab
11. Peserta didik kelompok lain diberikan kesempatan
untuk memberikan tanggapan terhadap hasil diskusi
kelompok penyaji dengan sopan.
12. Guru memberikan apresiasi atas partisipasi peserta
didik pada diskusi.
13. Guru melakukan umpan balik dan penguatan
tentang tag tabel
14. Peserta didik dengan arahan guru membuat Creativity
kesimpulan dari hasil diskusi.
Penutup
1. Peserta didik menyimpulkan materi yang telah Creativity 2 menit
dipelajari
2. Guru memberikan informasi mengenai rencana
pembelajaran yang akan datang yaitu tentang layout
tabel pada halaman web
3. Guru memberikan soal sebagai evaluasi kepada
peserta didik di LMS sekolah (Elegant) dan peserta
didik mengerjakan soal secara individu dengan
batas waktu yang telah ditentukan
4. Guru menutup pelajaran dengan berdo’a dan Religius
mengucapkan salam.
C. PENILAIAN PEMBELAJARAN
a. Penilaian Sikap : Penilaian sikap terhadap peserta didik dapat dilakukan selama
proses pembelajaran berlangsung.
b. Penilaian Pengetahuan : Penilaian pengetahuan dilakukan dengan memeriksa hasil
jawaban soal yang sudah diupload di LMS Sekolah.
c. Penilaian Keterampilan : Penilaian Keterampilan dilakukan dengan memeriksa hasil
kerja dalam Lembar Kerja Peserta Didik yang digunakan selama pelaksanaan
pembelajaran dan proses ketika membuat program halaman web yang menampilkan
tabel dan menerapkannya.

Boyolali, Juli 2021

Mengetahui Guru Mapel
Kepala SMK Ganesha Tama

Drs. Sriadi Witjitro Eko Sulistiyanto, S.Kom, Gr.

Lampiran 1
MATERI
BAB 3 FORMAT TABEL PADA HALAMAN WEB

A. Struktur Tabel HTML

1. Elemen Dasar Tabel
Cara mendeskripsikan tabel dalam pemrograman web berbasis HTML menggunakan
syntax adalah sebagai berikut.
<table>
<!-- isi baris dan kolom -->
</table>
Selanjutnya anda dapat menambahkan baris baru di antara tag <table>....</table>
dengan script berikut.
<table>
<tr>
<!-- isi baris ke 1 -->
</tr>
<tr>
<!—isi baris ke 2 -->
</tr>
</table>
Script program yang lengkap adalah sebagai berikut.
<table>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Elemen-elemen yang ada

Nama Fungsi
<table>...</table> Untuk mendeskripsikan tabel dalam halaman web
<tr>...</tr> Untuk mendeskripsikan baris dalam tabel
<td>...</td> Untuk mendeskripsikan kolom dalam tabel

2. Atribut Border
Semakin besar nilai border, maka semakin tebal garis yang ditampilkan pada halaman
web. Jika atribut border semakin besar, lebar garis tabel juga semakin besar. Besaran
nilai atribut tabel dihitung dalam ukuran pixel.
3. Elemen Header
Untuk mendeklarasi header pada tabel, anda perlu menambahkan elemen tag <th>
pada bagian awal script dan </th> pada bagian akhir script. Kelebiahan penggunaan
header pada tabel adalah teks yang diletakkan pada tabel header secara otomatis
berada pada posisi tengah (center) tanpa haraus menambahkan atribut align=”center”.
Anda dapat menerapkan atribut scope dan headers untuk menghubungkan kolom atau
baris dalam cell. Atribut scope dapat diisi dengan nilai col, colgroup, row, dan
rowgroup. Atribut headers pada elemen header tabel akan menerima nilai berupa id
dari cell untuk merujuk kaitan antar-header sumber tabel.

4. Elemen Caption
Anda dapat menggunakan tag <caption>....</caption> dengan penulisan tag
diletakkan setelah tag awal <table> dengan posisi default caption berada diatas tabel.

5. Atribut Cellpadding dan Cellspacing

Atribut cellpadding berfungsi untuk mengatur jarak dari border sisi dalam tabel
dengan isi teks tabel dalam cell. Nilai dari atribut ini berupa angka dalam satuan
pixel. Jika nilai cellpadding=”3”, web browser akan menampilkan tabel dengan jarak
sebesar 3 pixel dari border sisi dalam tabel dengan isi teks tabel.

Atribut cellspacing berfungsi untuk mengatur jarak antara border bagian dalam dan
luar. Semakin tinggi nilai atribut cellspacing, maka semakin besar lebar jarak antara
border bagian dalam dengan border bagian luar. Sebagai contoh, jika anda
memberikan nilai cellspacing=”2”, web browser akan menampilkan jarak sebesar 2
pixel diantara garis border tabel.

6. Menggabungkan Cell
a. Colspan
Digunakan untuk menyatukan satu atau lebih cell berdasarkan kolom.
b. Rowspan
Digunakan untuk menyatukan satu atau lebih cell berdasarkan baris.

7. Mengatur Brackground
Langkah-langkah menerapkan background gambar pada tabel adalah sebagai berikut
a. Buatlah folder BG pada direktori C (C:\BG)
b. Persiapkan gambar yang akan dijadikan background sebuah tabel, baik dalam
format .jpg, .jpeg, atau .bmp. letakkan file gambar tersebut kedalam folder BG
dalam satu folder dengan file html yang akan dibuat.
c. Selanjutnya, buat file “gambar html” dan tulis kode berikut
<!--file studikasus3-9.html-->
<html>
<head>
<title>Background Gambar pada Tabel</title>
</head>
<table align=”center” width=”30%” border=”1” background=”foto.jpg”>
<tr>
 <th>NIS</th><!--Header tabel-->
<th>NAMA</th><!--Header tabel-->
</tr>
<tr>
<td align=”center”>112019188</td>
<td align=”center”>Dyah Pradipta</td>
</tr>
</table>
</body>
</html>
Atibut background gambar pada tabel ditunjukan pada potongan kode
program background=”foto.jpg” pada script <table align=”center” width=”30%”
border=”1” background=”foto.jpg”>. Untuk membuat latar belakang tabel
denganwarna tertentu, perlu ditambahkan atribut bgcolor=”#FFFF33”, denga
bgcolor sebagai atribut untuk mengatur warna tabel.

8. Atribut Align
Ada 3 align
a). Left = untuk meletakkan isi cell pada sisi sebelah kiri cell
b). Center = untuk meletakkan isi cell pada posisi tengah cell
c). Right = untuk meletakkan isi cell pada sisi sebelah kanan cell

9. Meletakkan Tabel di Dalam Tabel

Dengan menggunakan tabel, anda dapat menentukan struktur utama sebuah web,
mulai dari heading halaman web, body halaman web, footing sebuah halaman web.

10. Atribut frame

Digunakan untuk mengatur jenis border luar pada tabel. Ada beberapa nilai yang
digunakan pada atribut frame, antara lain:
1. Above
2. Bellow
3. Border
4. Box
5. Hsides
6. Lhs
7. Rhs
8. Void, dan
9. Vsides

B. Desain Halaman web dengan tabel

1. Apa yang dimaksud dengan layout halaman website:
Halaman website adalah suatu tampilan yang dapat berinteraksi dengan pengguna atau
user atau dapat dikatakan sebagai tata letak elemen pada situs website, dengan
halaman website yang baik maka pengunjung akan merasa nyaman dengan tampilan
website tersebut. Setiap layout halaman dari website meerupakan satu kesatuan karena
 setiap halaman website mempunyai kesamaan tampilan (layout), yang membedakan
adalah isi dari kontennya.

2. Apa saja susunan atau anatomi dari suatu halaman website:

Anatomi dari susunan halaman website terdiri dari: containing block, Logo, navigasi,
content, with space. Mari kita bahas satu persatu:
 Header: Header merupakan bagian website yang letaknya berada paling atas,
umumnya digunakan untuk nama website, logo, deskripsi,dll.
 Containing Block: Merupakan suatu tempat atau bagian dari halaman website
yang membungkus semua komponen halaman website. umumnya menggunakan
tag <body> dan diisi dengan tag <div> dan <table>.
 Logo: Merupakan identitas dari website tersebut, biasanya dapat berupa gambar
favicon.
 Navigation: Merupakan navigasi yang terdapat label atau menu, dan merupakan
suatu bagian paling penting karena dapat memudahkan pengunjung untuk
mengakses ke halaman lain dari situs tersebut.
 Content: Merupakan suatu isi yang penting dari suatu website, karena
didalamnya terdapat informasi yang diberikan.
 Footer: Merupakan bagian paling bawah yang berisi informasi dari website
tersebut seperti CopyRight dan macam-macam link lainnya.
 White Space: Merupakan bagian kosong yang membatasi antara bagian
komponen website dan merupakan suatu ruang yang dapat diisi oleh banner, iklan,
atau informasi penting lainnya.

3. Apa saja model layout dari suatu halaman website:

a). Header: Berisi logo,judul, dll.
b). Navigation: Untuk mengakses ke halaman halaman lainnya.
c). Sidebar: Berisi pendukung content
d). Content: Berisi inti dari halaman website
e). Footer: Berisis informasi penutup atau sebuah hak cipta sebuah website
Lampiran 2 :
A. Instrumen Penilaian Sikap
1. Observasi
No Hari/Tanggal Guru yang Hasil Nilai Tindak Ket
Pengamatan menilai Pengamatan Karakter Lanjut

B. Instrumen Penilaian Pengetahuan :

1. Kisi kisi :
Kompetensi Bentuk No
IPK Materi Indikator Soal
Dasar Soal Soal
3.3.Menerapkan Menetukan Format Menerapkan Essay 1
format tabel pemnngunaan tag tabel penggunaan tag
pada tabel dengan HTML Tabel pada HTML
halaman html
web Menerapkan Menuliskan perintah Essay 2
format tabel pada dengan html pada
halaman web tabel
Menganalisis Tabel Menuliskan fungsi Essay 3
kode program dengnan atribut dalam tabel
untuk membuat berbagai Menyatukan baris Essay 4
tabel bentuk dan kolom pada
tabel
Menuliskan syntax Essay 5
tabel mengggunakan
perintah HTML

2. Soal :
No Soal Kunci Jawaban Skor
1 Jelaskan penggunaan tag <tr> <tr> adalah tag html yang digunakan 3
dalam tabel html untuk membuat baris pada tabel

2 Tuliskan perintah html untuk <html> 3

membuat tabel? <head><title>tabel</title></head>
<body>
<table>
<tr><td></td></tr>
</table.
</body>
</html>

3 Jabarkan fungsi penggunaan Atribut yang digunakan untuk 3

No Soal Kunci Jawaban Skor
cellpadding pada tabel! menentukan jarak spasi didalam sel yaitu
diantara dinding sel dan isi sel

4 Tuliskan perintah html untuk <html> 6

membuat tabel berikut : <head><title>tabel</title></head>
A B <body>
C D <table>
<tr>
<td colspans=”2”></td>
<td rowspan=”2”></td>
</tr>
<tr><td></td><td></td>
</tr>
</table>
</body>
</html>
5 Bagaimana output dari perintah A B 5
html berikut: C
<table> D
,tr>
<td
rowspan=”2”>A</td><td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr.
<td colspan=”2”>D</td>
</tr>
</table>

3. Pedoman Penskoran

Nomor
Jumlah Betul Skor
Soal
1 Siswa menjawab pertanyaan dengan jelas, tepat dan benar Skor 3
Siswa menjawab pertanyaan kurang tepat Skor 2
Siswa menjawab pertanyaan tetapi salah Skor 1
Tidak Menjawab Skor 0
2 Siswa menjawab dengan tepat sesuai dengan kaidah penulisan Skor 3
HTML Skor 2
Siswa menjawab dengan tepat tanpa menuliskan perintah html Skor 1
Siswa menjawab kurang tepat Skor 0
Siswa tidak menjawab
Nomor
Jumlah Betul Skor
Soal
3 Siswa menjawab pertanyaan dengan jelas, tepat dan benar Skor 3
Siswa menjawab pertanyaan kurang tepat Skor 2
Siswa menjawab pertanyaan tetapi salah Skor 1
Tidak Menjawab Skor 0
4 Siswa menjawab dengan tepat,benar, menggunakan struktur html Skor 6
Siswa menjawab dengan tepat,benar, tanpa menggunakan struktur Skor 4
html Skor 3
Siswa menjawab dengan kurang tepat, tidak benar dan tidak Skor 2
menggunakan struktur html Skor 1
Siswa menjawab salah Skor 0
Tidak menjawab
5 Siswa menjawab dengan bener sesuai syntax Skor 5
Siswa menjawab dengan menggunakan 2 baris Skor 4
Siswa menjawab dengan menggunakan baris Skor 3
Siswa menjawab kurang tepat Skor 2
Siswa menjawab salah Skor 1
Siswa tidak menjawab Skor 0

4. Norma Penilaian
Nilai Perolehan KD pengetahuan = X 100

5. Contoh Penilaian
No Skor
IPK Nilai
Soal Penilaian
Menerangkan tag-tag html 1 3
yang digunakan untuk
membuat tabel
Membangun table dengan 2 3
berbagai bentuk Nilai Perolehan KD Pengetauan =
Menerapkan desain 3 5 25/30x100 = 83
halaman web dengan table 4 6
Menjalankan tabel halaman 5 6
web pada web server
Jumlah Skor 20
C. Instrumen Penilaian Keterampilan:
1. Kisi – Kisi
Kompetensi No Bentuk
No Materi Indikator Soal
Dasar Soal Soal
1 Menyajikan tabel 1 Praktek
pada halaman web

2. Soal
Terlampir pada Lembar Kegiatan Peserta Didik (LKPD)

3. Norma Penilaian
No Komponen/sub Indikator/kiteria unjuk kerja skor
komponen
1 Analisis Tabel Peserta didik dapat menganalisis tag tabel 4
dan fungsinya (minimal 5 tag)
Peserta didik dapat menganalisis tag tabel 3
dan fungsinya (minimal 3 tag)
Peserta didik dapat menganalisis tag tabel 2
dan fungsinya (minimal 2 tag)
Peserta didik dapat menganalisis tag tabel 1
dan fungsinya (minimal 1 tag)
2 Sintax Program Peserta didik menuliskan syntax dengan 4
minimal 5 tag dengan benar
Peserta didik menuliskan syntax dengan 3
minimal 3 tag dengan benar
Peserta didik menuliskan syntax dengan 2
minimal 2 tag dengan benar
Peserta didik menuliskan syntax dengan 1
minimal 1 tag dengan benar
3 Pendapat Peserta didik mengemukakan pendapat 4
kelompoknya minimal 16-20 kata dengan
tepat
 Peserta didik mengemukakan pendapat 3
kelompoknya minimal 11-15 kata dengan
tepat
Peserta didik mengemukakan pendapat 2
kelompoknya minimal 6-10 kata dengan
tepat
Peserta didik mengemukakan pendapat 1
kelompoknya minimal 1-5 kata dengan tepat
4 Alasan Peserta didik memberikan alasan minimal 4
16-20 kata dengan tepat
Peserta didik memberikan alasan minimal 3
11-15 kata dengan tepat
Peserta didik memberikan alasan minimal 6- 2
10 kata dengan tepat
Peserta didik memberikan alasan minimal 1- 1
5 kata dengan tepat

4. Pedoman Penilaian
Jumlah skor perolehan
ℎ = 100
Jumlah skor total

5. Contoh Penilaian
Aspek Penilaian N. KD
No Nama siswa
Analisis Sintax Pendapat Alasan
4 4 4 4 100
1 Agus 4 3 3 4 87,5
 LEMBAR KERJA PESERTA DIDIK (LKPD)

Nama : ………………………………………………… Kelompok : …………………………………………………

Kelas : ………………………………………………… No. Absen : ………………………………………………

A. KOMPETENSI DASAR
3.3. Menerapkan format tabel pada halaman web
4.3. Membuat kode program untuk menampilkan tabel pada halaman web

B. INDEKS PENCAPAIAN
3.3.1 Menentukan penggunaan tag tabel
3.3.2 Menerapkan format tabel pada halaman web
4.3.1 Menganalisis kode program untuk membuat tabel
4.3.2 Mengimplementasikan format tabel pada halaman web.

C. TUJUAN
Setelah mengikuti pembelajaran ini, melalui diskusi dengan model pembelajaran TPAC
dalam pembelajaran Pemrograman Web dan Perangkat Bergerak, Diharapkan peserta
didik dapat:
1. Menentukan penggunaan tag tabel dengan HTML dengan benar
2. Menerapkan format tabel pada halaman web dengan benar
3. Menganalisis kode program untuk membuat tabel dengan terampil
4. Mengimplementasikan format tabel pada halaman web dengan terampil.

D. LANGKAH KEGIATAN
1. Amatilah tabel berikut ini !

A B

D C

E F

2. Analisislah tag HTML yang digunakan pada tabel tersebut beserta fungsinya
Hasil Analisis :

………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
3. Diskusilah sesuai dengan kelompok kalian dari permasalahan berikut!
Permasalahan
bagaimanakah membuat tampilan tabel tersebut dengan menggunakan struktur pada
HTML !
Penyelesaian :

<table border='1'>
<tr><td>A</td><td>B</td><td coolspan='1'>C</td></tr>
<tr><td rownspan='1'>D</td></tr>
<tr><td>E</td><td>F</td></tr>
</table>

Bagaimana pendapat kalian (Jika Penyelesaian salah bagaimana sintax yang

benar): (minimal 20 kata)

………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………

Apa Alasannya : (minimal 30 kata)

………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………

~ Selamat Mengerjakan ~