Anda di halaman 1dari 12

RENCANA PELAKSANAAN PEMBELAJARAN ( RPP ) Satuan Pendidikan Mata Pelajaran Komp.

Keahlian Kelas / Semester Materi Pokok Alokasi Waktu : SMK : Pemrograman WEB : Multimedia :X/1 : Format Tabel Halaman Web : 2 x 45 menit

A. Kompetensi Inti ( KI ) 1. Menghayati dan mengamalkan ajaran agama yang dianutnya. 2. Menghayati dan mengamalkan perilaku (jujur, disiplin, tanggung jawab, peduli, santun, ramah lingkungan, gotong royong, kerjasama, cinta damai, responsive dan proaktif) dan menunjukkan sikap sebagai bagian dari solusi atas berbagai permasalahan bangsa dalam berinteraksi secara efektif dengan lingkungan social dan alam serta dalam menempatkan diri sebagai cerminan bangsa dalam pergaulan dunia. 3. Memahami, menerapkan, menganalisis pengetahuan factual, konseptual, procedural berdasarkan rasa ingin tahunya tentang ilmu pengetahuan, teknologi, seni budaya, dan human iora dengan wawasan kemanusiaan, kebangsaan, kenegaraan, dan peradaban terkait fenomena dan kejadian, serta menerapkan pengetahuan procedural pada bidang kajian yang spesifik sesuai dengan bakat dan minatnya untuk memecahkan masalah. 4. Mengolah, menalar, menyaji, dan mencipta dalam ranah konkret dan ranah abstrak terkait dengan pengembangan diri yang dipelajarinya di sekolah secara mandiri, dan mampu menggunakan metoda sesuai kaidah keilmuan. B. Kompetensi Dasar ( KD ) 1.3 Mengamalkan nilai-nilai keimanan sesuai dengan ajaran agama dalam kehidupan sehari-hari. 2.1 Menunjukkan perilaku ilmiah (memiliki rasa ingin tahu; objektif; jujur; teliti; cermat; tekun; hatihati; bertanggung jawab; terbuka; kritis; kreatif; inovatif) dalam aktivitas sehari-hari sebagai wujud implementasi sikap dalam dan berdiskusi 3.3 Memahami format tabel pada halaman web Indikator: Menjelaskan format tag dan atribut HTML table pada halaman web 3.4 Menyajikan tabel pada halaman web Indikator: Menerapkan format tag dan atribut HTML table pada halaman web C. Tujuan Pembelajaran Melalui kegiatan pembelajaran Mengamati, Menanya, Mengeksplorasi, Mengasosiasi dan Mengkomunikasikan maka tujuan yang ingin dicapai adalah 1. Menjelaskan format tag dan atribut HTML table pada halaman web 2. Menerapkan format tag dan atribut HTML table pada halaman web 3. Menguji perubahan-perubahan yang terjadi pada penggunaan format tag dan atribut HTML table pada halaman web yang dihasilkan. D. Materi Pembelajaran Format Tabel Halaman Web 1. Anatomi tabel minimal

Tabel terdiri atas baris dan kolom. Data yang sejenis dimasukkan kedalam kolom yang sama. Sekelompok data yang berkaitan diletakkan dalam satu baris. Masing-masing kolom biasanya diburi judul kolom yang disebut header. Pertpotongan antara baris dan kolom disebut sel. HTML menyediakan tag <TABLE>, <TR>, <TD> dan <TH> yang dapat digunakan untuk membuat table di halaman web anda. Tag <TABLE> digunakan untuk mendefinisikan sebuah table baru. Tag <TR> digunakan untuk mendefinisikan sebuah baris baru dalam table. Tag <TD> digunakan untuk mendefinisikan sebuah sel baru dalam baris. Tag <TH> digunakan untuk mendefinisikan sebuah sel Header. Tag <TABLE> memiliki atribut BORDER untuk menentukan ketebalan bingkai table yang dibuat, satuannya adalah pixel. Jika anda ingin table anda tidak memiliki bingkai, isilah atribut BORDER dengan 0. Tag <TABLE> juga tersedia atribut BGCOLOR yang digunakan untuk menentukan warna latar belakang table, serta atribut ALIGN untuk menentukan perataan table. Pilihan pada atribut ALIGN adalah left, center, dan right. <HTML> <HEAD> <TITLE> Latihan Membuat Tabel </TITLE> </HEAD> <BODY> <P> Di bawah ini contoh tabel dengan satu baris dan dua kolom. tabel bingkainya adalah 1 pixel dan warna latar belakangnya adalah kuning:</P> <TABLE BORDER="1" BGCOLOR="yellow"> <TR> <TD> Ini data kolom satu pada baris satu </TD> <TD> Ini data kolom dua pada baris satu </TD> </TR> </TABLE> <P> Di bawah ini contoh tabel dengan tiga baris dan dua kolom. Baris pertama adalah baris yang berisi header kolom. sedangkan perataan tabelnya adalah rata tengah:</P> <TABLE BORDER="1" ALIGN="center"> <TR> <TH> Ini header kolom satu </TH> <TH> Ini header kolom dua </TH> </TR> <TR> <TD> Ini data kolom satu pada baris satu </TD> <TD>

Ini data kolom dua pada baris satu </TD> </TR> <TR> <TD> Ini data kolom satu pada baris dua </TD> <TD> Ini data kolom dua pada baris dua </TD> </TR> </TABLE> </BODY> </HTML> Tag <TABLE> memiliki atribut CELLPADDING dan CELLSPACING. Atribut CELLPADDING digunakan untuk menentukan jarak antara isi sel dengan bingkai table. Dan atribut CELLSPACING digunakan untuk menentukan jarak antara sel yang satu dengan sel yang lainnya. <HTML> <HEAD> <TITLE> Latihan menggunakan Cellpadding dan Cellspacing </TITLE> </HEAD> <BODY> <P>Tanpa Cellpadding atau Cellspacing:</p> <TABLE BORDER="2"> <TR> <TD> INI DATA KOLOM SATU PADA BARIS SATU </TD> <TD> INI DATA KOLOM DUA PADA BARIS SATU </TD> </TR> <TR> <TD> INI DATA KOLOM SATU PADA BARIS DUA </TD> <TD> INI DATA KOLOM DUA PADA BARIS DUA </TD> </TR> </TABLE> <P> Dengan Cellpadding sebesar 10: </p> <TABLE BORDER="2" CELLPADDING="10"> <TR>

<TD> INI DATA KOLOM SATU PADA BARIS SATU </TD> <TD> INI DATA KOLOM DUA PADA BARIS SATU </TD> </TR> <TR> <TD> INI DATA KOLOM SATU PADA BARIS DUA </TD> <TD> INI DATA KOLOM DUA PADA BARIS DUA </TD> </TR> </TABLE> <P> Dengan Cellspacing sebesar 10 : </p> <TABLE BORDER="2" CELLSPACING="10"> <TR> <TD> INI DATA KOLOM SATU PADA BARIS SATU </TD> <TD> INI DATA KOLOM DUA PADA BARIS SATU </TD> </TR> <TR> <TD> INI DATA KOLOM SATU PADA BARIS DUA </TD> <TD> INI DATA KOLOM DUA PADA BARIS DUA </TD> </TR> </TABLE> <P> DENGAN CELLPADDING SEBESAR 3 DAN CELLSPACING SEBESAR 3: </P> <TABLE BORDER="2" CELLPADDING="3" CELLSPACING="3"> <TR> <TD> INI DATA KOLOM SATU PADA BARIS SATU </TD> <TD>

INI DATA KOLOM DUA PADA BARIS SATU </TD> </TR> <TR> <TD> INI DATA KOLOM SATU PADA BARIS DUA </TD> <TD> INI DATA KOLOM DUA PADA BARIS DUA </TD> </TR> </TABLE> </BODY> </HTML> Tag <TABLE> memiliki atribut WIDTH yang dapat digunakan untuk mengatur lebar table. Satuan atribut WIDTH adalah pixel atau persen. Jika anda menggunakan satuan persen, maka lebar table akan dihitung berdasarkan nilai persentase tersebut terhadap lebar seluruh layar browser. <HTML> <HEAD> <TITLE> Latihan Mengatur Lebar Tabel </TITLE> </HEAD> <BODY> <P>Tabel dengan Lebar 300 pixel</p> <TABLE BORDER="1" WIDTH="300px"> <TR> <TD> INI DATA KOLOM SATU PADA BARIS SATU </TD> <TD> INI DATA KOLOM DUA PADA BARIS SATU </TD> </TR> </TABLE> <P>Tabel dengan lebar 75% dari lebar seluruh layar browser</p> <TABLE BORDER="1" WIDTH="75%"> <TR> <TD> INI DATA KOLOM SATU PADA BARIS SATU </TD> <TD> INI DATA KOLOM DUA PADA BARIS SATU </TD>

</TR> </TABLE> </BODY> </HTML> Tag <TD> memiliki beberapa atribut yang dapat digunakan untuk memformat isi setiap sel. Atribut ALIGN dan VALIGN digunakan untuk memformat perataan teks dalam sel secara horizontal dan vertical. Isi atribut ALIGN adalah left (rata kiri), center (rata tengah), right (rata kanan), justify (ratakanan-kiri), dan char. Isi atribut VALIGN adalah top (rata atas), middle (rata tengah), bottom (rata bawah), dan baseline. Atribut HEIGHT dan WIDTH dari tag <TD> dapat digunakan untuk memformat tinggi dan lebar sebuah sel dalam satuan pixel. Atribut BGCOLOR dapat digunakan untuk memformat warna latar belakang sebuah sel. Tag <TH> yang digunakan untuk mendefinisikan sebuah sel header juga memiliki atribut yang sama dengan tag <TD>. Tag <TH> juga memiliki atribut ALIGN, VALIGN, HEIGHT, WIDTH, BGCOLOR dan lain-lain. Cara mengisi masing-masing atribut pada tag <TH> tersebut mirip dengan tag <TD>. <HTML> <HEAD> <TITLE> Latihan memformat isi tabel </TITLE> </HEAD> <BODY> <P> memformat tinggi, lebar dan perataan sel</p> <TABLE BORDER="1" BGCOLOR="YELLOW"> <TR> <TD width="150"> Sel rata kiri (default) </TD> <TD width="150" Ini sel rata </TD> </TR> <TR> <TD height="50" Ini sel rata </TD> align="right"> kanan

valign="top"> atas

<TD height="50" valign="bottom"> Ini sel rata bawah </TD> </TR> </TABLE> <P> Memformat warna sel :<P> <TABLE BORDER="1"> <TR> <TD> Ini sel tanpa perubahan warna </TD>

<TD BGCOLOR="EEF113"> Ini sel berwarna kuning </TD> </TR> </TABLE> </BODY> </HTML> Tag <CAPTION> dapat digunakan untuk menambahkan judul table. Tag <CAPTION> diletakkan setelah tag <TABLE>. <html> <head> <title> Latihan Menambah Judul Pada Tabel </title> </head> <body> <table border="1" width="100%"> <caption>Tabel 1. Ini Contoh Judul Tabel </caption> <TR> <TD>&nbsp</TD> <TD>&nbsp</TD> </TR> <TR> <TD>&nbsp</TD> <TD>&nbsp</TD> </TR> </table> </body> </html> E. Metode Pembelajaran Pendekatan Pembelajaran : Pendekatan saintifik (scientific) Metode Pembelajaran : Pembelajaran koperatif (cooperative learning) dengan kelompok diskusi yang berbasis proyek (Project Based Learning). Penugasan kelompok F. Kegiatan Pembelajaran Kegiatan Pendahuluan Deskripsi Kegiatan Alokasi Waktu

Inti

1. Menyiapkan fisik dan psikis peserta didik dalam mengawali kegiatan pembelajaran 10 menit 2. Mengaitkan materi pembelajaran sekarang dengan pengalaman peserta didik (peserta dilihatkan sebuah halaman web http://docs.oracle.com/cd/E12839_01/web.1111/b31973/af_table.h tm) yang memperlihatkan penggunaan frame pada tabel 3. Mengajukan pertanyaan yang ada keterkaitan dengan tema yang akan dibelajarkan (dalam halaman web tersebut juga ditemukan tabel yang coba dicari oleh siswa) Mengamati Pelbagai jenis format tabel dan hasilnya terhadap halaman web (siswa 70 menit

dimemperhatikan berbagai macam tabel pada halaman web tersebut) Menanya Mendiskusikan pelbagai format table dalam halaman web (siswa ditunjukkan contoh tabel sederhana dan mengajak siswa untuk menemukan format tabel tersebut) Mengeksplorasi Eksplorasi pelbagai tampilan format tabel pada halaman web (siswa diajak untuk mengubah-ngubah format table dari hasil diskusi diatas) Mengasosiasi Menganalisa hubungan antara format tabel dengan tampilannya pada halaman web (menganalisa dari hasil eksplorasi diatas) Mengkomunikasikan Menyampaikan hasil pengamatan dan percobaan pelbagai format tabel pada halaman web. Penutup 1. Melakukan refleksi dan mencatat hal-hal penting dalam bentuk 10 menit rangkuman dengan melibatkan peserta didik 2. Menindaklanjuti pembelajaran hari ini dengan memberikan tugas dan melihat hasil akhir pekerjaan siswa sesuai dengan materi belajar yang baru saja di pelajari 3. Follow-up pada siswa untuk materi minggu depan G. Alat / Media/ Sumber Belajar 1. Modul HTML 2. Buku referensi dan artikel yang sesuai 3. Internet 4. Lembar Kerja Siswa 5. File dalam bentuk softcopy 6. In Focus / TV LCD H. Penilaian Hasil Belajar 1. Teknik Penilaian : Pengamatan, Kinerja, dan Tes Tertulis 2. Prosedur Penilaian Penilaian Kinerja Aspek yang dinilai Sikap Pengetahuan Ketrampilan No Nama 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3

Jumlah Skor Kriteria Penskoran : 1 = Kurang 2 = Cukup Kriteria Penilaian : Jumlah skor < 3 :D 4 < Jumlah skor < 6 : C 4 < Jumlah skor < 6 : B 10 < Jumlah skor < 12 : A 3 = Baik 4 = Amat Baik

Rubrik Penilaian Kinerja : No Aspek yang dinilai Sikap Keterangan 1 = Tidak aktif dalam pembelajaran 2 = Cukup aktid dalam pembelajaran 3 = Aktif dalam pembelajaran 4 = Amat aktif dalam pembelajaran 1 = Tidak memahami konsep pemecahan masalah 2 = Cukup memahami konsep pemecahan masalah 3 = Memahami konsep pemecahan masalah 4 = Amat memahami konsep pemecahan masalah 1 = Tidak terampil melaksanakan prosedur pemecahan masalah 2 = Cukup terampil melaksanakan prosedur pemecahan masalah 3 = Terampil melaksanakan prosedur pemecahan masalah 4 = Amat terampil melaksanakan prosedur pemecahan masalah

1.

2.

Pengetahuan

3.

Ketrampilan

I.

Instrumen Penilaian Hasil Belajar : Tes Tertulis Pedoman Penskoran : No Uraian Skor

Nilai = Skor yang di peroleh x 100 Skor maksimal Jombang, 17 Juli 2013 Mengetahui: Kepala SMK Negeri 1 Jombang Guru Mata Pelajaran,

Drs. SUPRIYADI, M.Kes NIP. 196206101987101004

LIN MULYATI, S.Kom NIP. 197901252009012002

LEMBAR KERJA SISWA 1 ( Tugas Kelompok ) 1. Ketiklah Listing berikut menggunakan Notepad : (Save dengan nama file : Tabel1-Nama Anda)
<HTML> <HEAD> <TITLE> Membuat Tabel </TITLE> </HEAD> <BODY> <TABLE> <TR> <TD>NO <TD>NAMA <TD>KOTA </TR> <TR> <TD>1 <TD>TITO <TD>SURABAYA </TR> <TR> <TD>2 <TD>BAMBANG <TD>JAKARTA </TR> </BODY> </HTML>

2. Modifikasi Listing pada soal nomer 1 seperti berikut ini : (Save dengan nama file : Tabel2-Nama Anda)
<HTML> <HEAD> <TITLE> Membuat Tabel dengan Tabel Header</TITLE> </HEAD> <BODY> <TABLE> <TR> <TH>NO <TH>NAMA <TH>KOTA </TR> <TR> <TD>1 <TD>TITO <TD>SURABAYA </TR> <TR> <TD>2 <TD>BAMBANG <TD>JAKARTA </TR> </BODY> </HTML>

3. Modifikasi Listing pada soal nomer 2 seperti berikut ini : (Save dengan nama file : Tabel2-Nama Anda)
<HTML> <HEAD> <TITLE> Membuat Tabel dengan Tabel Header</TITLE> </HEAD> <BODY> <TABLE BORDER=1> <TR>

<TH>NO <TH>NAMA <TH>KOTA </TR> <TR> <TD>1 <TD>TITO <TD>SURABAYA </TR> <TR> <TD>2 <TD>BAMBANG <TD>JAKARTA </TR> </BODY> </HTML>

4. Kesulitan apa yang Anda temui saat mengerjakan tugas ?

LEMBAR KERJA SISWA 2 ( Tugas Kelompok ) 1. Buatlah tabel dibawah ini

2. Buatlah tabel dibawah ini