IN

VERIZAL, S.Kom, M.Kom

 M E N U
KI-3 dan KI-4 Kompetensi Dasar Indikator Tujuan Pembelajaran Uraian Materi Latihan Soal

REFERENSI

Home Back Next

 KI-3 dan KI-4
KI-3 (Pengetahuan) :
Memahami, menerapkan, menganalisis, dan mengevaluasitentang pengetahuan
faktual, konseptual, prosedural, dan metakognitif sesuai dengan bidang dan lingkup
kajian Pemrograman web dan Perangakat Bergerak pada tingkat teknis, spesifik, detil,
dan kompleks, berkenaan dengan ilmu pengetahuan, teknologi, seni, budaya, dan
humaniora dalam konteks pengembangan potensi diri sebagai bagian dari keluarga,
sekolah, dunia kerja, warga masyarakat nasional, regional, dan internasional.
KI-4 (Keterampilan) :
Melaksanakan tugas spesifik dengan menggunakan alat, informasi, dan prosedur kerja yang lazim
dilakukan serta memecahkan masalah sesuai dengan bidang kajian Pemrograman web dan
Perangakat Bergerak
Menampilkan kinerja di bawah bimbingan dengan mutu dan kuantitas yang terukur sesuai dengan
standar kompetensi kerja.
Menunjukkan keterampilan menalar, mengolah, dan menyaji secara efektif, kreatif, produktif, kritis,
mandiri, kolaboratif, komunikatif, dan solutif dalam ranah abstrak terkait dengan pengembangan dari
yang dipelajarinya di sekolah, serta mampu melaksanakan tugas spesifik di bawah pengawasan
langsung.
Menunjukkan keterampilan mempersepsi, kesiapan, meniru, membiasakan, gerak mahir, menjadikan
gerak alami dalam ranah konkret terkait dengan pengembangan dari yang dipelajarinya di sekolah,
serta mampu melaksanakan tugas spesifik di bawah pengawasan langsung.dipelajarinya di sekolah,
serta mampu melaksanakan tugas spesifik di bawah pengawasan langsung.

Home Back Next

 KOMPETENSI DASAR

3.3 Menerapkan format tabel pada halaman

web
4.3 Membuat kode html untuk menampilkan
tabel pada halaman web

Home Back Next

 INDIKATOR
1. Pengetahuan:
a. Produk (Penggalan materi 1)
1) Menerapkan format tabel pada halaman web
2) Menjelaskan tag-tag html yang digunakan untuk
membuat tabel.
b. Proses (Penggalan materi 2)
1) Menjelaskan langkah-langkah pembuatan kode
html untuk menampilkan tabel pada halaman web
halaman web
2. Keterampilan: (Penggalan materi 3)
1) Mempraktekkan pembuatan kode html untuk
menampilkan tabel pada halaman web

Home Back Next

 TUJUAN PEMBELAJARAN
1. Pengetahuan
Produk
1) Secara mandiri dan tanpa membuka bahan ajar, siswa dapat
Menjelaskan pengertian format tabel pada halaman web
dengan mengerjakan soal terkait di LP 3 minimal nilai sama
dengan KKM.
2) Secara mandiri dan tanpa membuka bahan ajar, siswa
mampu Menjelaskan tag-tag html yang digunakan untuk
membuat tabel. dengan mengerjakan soal terkait LP3
minimal nilai sama dengan KKM.

Home Back Next

 Lanjutan :TUJUAN PEMBELAJARAN
b. Proses
Siswa diharapkan dapat Menjelaskan langkah-langkah
pembuatan kode html untuk menampilkan tabel pada
halaman web.tertentu dengan mengerjakan evaluasi
yang terkait dengan LP 4 minimal nilai sama dengan
KKM.

2. Keterampilan:
Dengan menggunakan komputer siswa dapat
Mempraktekkan pembuatan kode html untuk menampilkan
tabel pada halaman web sesuai rincian tugas kinerja di LP 5
minimal nilai sama dengan KKM.

Home Back Next

 A. FORMAT TABEL

Tabel merupakan cara untuk menampilkan

informasi dalam bentuk sel yang terdiri atas
baris dan kolom. Untuk menampilkan data
dalam bentuk table pada HTML, digunakan
Tag<Table>.
Elemen table berisi property <tr> untuk
menentukan baris(table row) yang didalamnya
terdapat properti <td> untuk menampkan data
pada setiap sel table(table data)

Home Back Next

 Lanjutan: FORMAT TABEL
Struktur elemen Tabel

<table>
<tr>
<td>data baris 1 kolom 1</td>
<td>data baris 1 kolom 2</td>
</tr>
</table>
Home Back Next
 Lanjutan: FORMAT TABEL
Untuk mendifinisikan table heading atau judul tiap kolom
menggunakan tag <th> ….. </th>
• Atribut Elemen Tabel
• Width =panjang(lebar table, pixel atau persen)
• Height =panjang(tinggi table, pixel atau persen)
• Border =pixel(tebal garis tepi)
• Cellspacing =pixel(spasi antar sel)
• Cellpadding =pixel(spasi di dalam sel)
• Align =[left|center|right](perataan table)
• Bgcolor =warna(warna latar belakang table)

Home Back Next

 Lanjutan: FORMAT TABEL

Atribut Table Row

• Align =[left|center|right](perataan
sebaris sel secara horizontal)
• Valign =[top|middle|bottom](perataaan
sebaris sel secara vertical)
• Bgcolor =warna(warna latar belakang
baris)

Home Back Next

 Lanjutan: FORMAT TABEL

• Atribut Tabel Data

• Align =[left|center|right](perataan horizontal)
• Width =[top|middle|bottom](perataan vertical)
• Height =pixel(tinggi sel, pixel atau persen)
• Bgcolor =warna(warna latar)

Home Back Next

Langkah-langkah pembuatan kode html untuk format tabel

• Klik Start
• Klik all programs
• Klik Accessories
• Klik Notepad
• Tampilan jendela
kerja Notepad seperti
dibawah ini;

Home Back Next

 Lanjutan : Kode html format tabel
Contoh Kode HTML
1 <html>
2 <head>
3 <title>table</title>
4 <body>
5 <table border="1">
6 .......disini tag untuk baris dan kolom....
7 </table>
8 </body>
9 </head>
10 </html>
Home Back Next
 Lanjutan : Kode html format tabel

cara menyimpan file HTML di

notepad, langkahnya:
1. Klik Save As, ata CTRL + S
2. Pada file Name, tulis nama
file dengan akhiran extensi
html
3. Pada Save as type, pilih All
Files
4. Save

Home Back Next

 Lanjutan : Kode html format tabel

Untuk menampilkan kode html

yang sudah ditulis dan
disimpan tadi, langkahnya:
1. Buka browser yang ada
pada komputer, misalnya
Mozilla Firefox
2. Klik File, pilih Open File
3. Pilih File HTML
4. Pilih Open

Home Back Next

 Lanjutan: Struktur Dasar HTML

Kode dasar HTML untuk membuat tabel diatas, jika ditampilkan

pada browser Mozilla Firefox, maka tampilannya seperti screenshoot
tampilan tabel dibawah ini.

Home Back Next

 LATIHAN SOAL
Jawablah pertanyaan-pertanyaan di bawah ini dengan tepat!

LATIHAN
1. Jelaskan tentang format tabel
2. Tuliskan langkah-langkah membuat kode html untuk format
tabel
3. Jelaskan tentang struktur tabel html !
4. Jelaskan 4 tag utntuk membuat tabel!

SOAL
5. Jelaskan elemen tabel!

Home Back Next

 Media Presentasi Pembelajaran

Powered by :
VERIZAL, S.Kom, M.Kom

OUT

Berdasarkan Kurikulum Berbasis Kompetensi

THANK’S FOR YOUR ATTENTION

 REFERENSI
 From Zero To A Pro: Membuat Aplikasi Web Dengan
PHP + Database MySQL, Abdul Kadir, Penerbit Andi,
2010
 Buku Pintar Pemrograman Web, Adhi Prasetyo,
Penerbit Mediakita, 2012
 Pemrograman Web (HTML, PHP & MySQL) Edisi
Revisi, Budi Rahardjo, Imam Heryanto, Enjang RK,
Penerbit Modula Bandung, Juni 2012
 Learning PHP, MySQL, and JavaScript, Robin Nixon,
Penerbit O'Reilly Media, Inc., 2009

Home Back Next