Jobsheet 1..KD 3.
Nama:..................................................................Kelas/No Absen:...........................................Nilai:................................................
JOBSHEET PRAKTIKUM
Satuan Pendidikan : SMK
Kelas/semester :X/1
Mata Pelajaran : Pemrograman web
Alokasi Waktu : 4 x 45 Menit
Kompetensi Dasar:
Memahami format tabel pada halaman web
Materi Dasar:
[Link] tabel minimal
[Link] dengan spanning
Tugas Peserta Didik:
[Link] anatomi tabel minimal
[Link] Tabel dengan spanning
[Link] Praktik
[Link] komputer sesuai SOP
[Link] Kerja
[Link] pakaian kerja
[Link]/kontrol media dan peralatan yang akan dipraktikkan
[Link] instruksi dari instruktur ataupun prosedur kerja yang tertera pada lembar kerja
[Link] ijin dari instruktur anda bila hendak melakukan pekerjaan yang tidak tertera pada lembar kerja
[Link]/rapikan dan kontrol kembali media dan peralatan selesai praktik
[Link]
[Link] didik dapat Menjelaskan anatomi tabel minimal
[Link] didik dapat Mendemostrasikan Tabel dengan spanning
[Link] dan Bahan:
[Link]
[Link] kerja
Uji Pengetahuan:
[Link] membuat table maka harus diawalai dengan tag apa?
[Link] struktur pembuatan table
[Link]<tr> berfungsi untuk apa?
[Link] <td> berfungsi untuk apa?
5. Untuk mendifinisikan table heading atau judul tiap kolom menggunakan tag apa?
[Link] atribut elemen tabel beserta fungsinya.
Uji Ketrampilan:
[Link] output dari program berikut:
<html>
<head>
<title> anatomi table </title>
</head>
<body>
<h3>berikut adalah contoh pembuatan tabel sederhana </h3><br>
<ol type="A">
<li> pertama adalah contoh table dengan 2 baris 3 kolom </li>
<li> kedua adalah cara merger/menggabungkan dua kolom</li>
<li> ketiga adalah cara menggabungkan 2 baris </li>
<li> keempat adalah cara mewarnai table </li>
</ol>
<H2>SELAMAT MENCOBA</H2><br>
<h4> contoh I </h4>
<table>
<tr>
<td> Nama </td>
<td> Kelas </td>
<td> No absen </td>
</tr>
<tr>
<td> Ming Ming ku </td>
<td> X-MM-2 </td>
<td> 15 </td>
</tr>
</table>
</body>
</html>
Analisalah program diatas!
2. Tuliskan output dari program berikut:
<html>
<head>
<title> anatomi table </title>
</head>
<body>
<h4> contoh I dengan kombinasi or model pemberderan </h4>
<table border=1>
<tr>
<td> Nama </td>
<td> Kelas </td>
<td> No absen </td>
</tr>
<tr>
<td> Ming Ming ku </td>
<td> X-MM-2 </td>
<td> 15 </td>
</tr>
</table>
</body>
</html>
Analisalah program diatas!
Apa perbedaan output soal no 1 dan soal no 2 ? di tag html yang mana yang membuatnya berbeda ?
[Link] table dengan output sbb:
[Link] table dengan output sbb:
[Link] Kerja
Jobsheet 2.
Nama:..................................................................Kelas/No Absen:...........................................Nilai:................................................
JOBSHEET PRAKTIKUM
Satuan Pendidikan : SMK
Kelas/semester :X/1
Mata Pelajaran : Pemrograman web
Alokasi Waktu : 4 x 45 Menit
Kompetensi Dasar:
Memahami format tabel pada halaman web
Materi Dasar:
[Link] tabel minimal
[Link] dengan spanning
Tugas Peserta Didik:
[Link] anatomi tabel minimal
[Link] Tabel dengan spanning
[Link] Praktik
[Link] komputer sesuai SOP
[Link] Kerja
[Link] pakaian kerja
[Link]/kontrol media dan peralatan yang akan dipraktikkan
[Link] instruksi dari instruktur ataupun prosedur kerja yang tertera pada lembar kerja
[Link] ijin dari instruktur anda bila hendak melakukan pekerjaan yang tidak tertera pada lembar kerja
[Link]/rapikan dan kontrol kembali media dan peralatan selesai praktik
[Link]
[Link] didik dapat Menjelaskan anatomi tabel minimal
[Link] didik dapat Mendemostrasikan Tabel dengan spanning
[Link] dan Bahan:
[Link]
[Link] kerja
Uji Ketrampilan:
[Link] output dari program berikut:
<html>
<head>
<title> table spanning or penggabungan beberapa cell </title>
</head>
<body>
<h4> contoh II PENGGABUNGAN KOLOM USE TAG COLSPAN </h4>
<table border=1>
<tr>
<td rowspan=2> Nama </td>
<td colspan=2> KET </td>
</tr>
<tr>
<td> kelas </td>
<td> no absen </td>
</tr>
<tr>
<td > Tantri kotak </td>
<td> X- MM-2 </td>
<td> 15 </td>
</tr>
</table>
</body>
</html>
Analisalah program diatas!
Apa fungsi tag colspan
2. Tuliskan output dari program berikut:
<html>
<head>
<title>penggabungan baris</title>
</head>
<body>
<h4> contoh III PENGGABUNGAN BARIS USE TAG ROWSPAN </h4>
<table border=1>
<tr>
<td> KD</td>
<td > KOMPETENSI</td>
<td > INDIKATOR</td>
</tr>
<tr>
<td rowspan=4> 3.3 </td>
<td rowspan=4> Memahami table</td>
<td> anatomi table</td>
</tr>
<tr>
<td> penggunaan spanning table</td>
</tr>
<tr>
<td> table dalam table</td>
</tr>
<tr>
<td> desain web use table</td>
</tr>
</table>
</body>
</html>
Analisalah program diatas!
Apa fungsi tag rowspan
3. Tuliskan output dari program berikut:
<html>
<head>
<title>mewarnai tabel</title>
</head>
<body>
<h4> CONTOH PEWARNAAN PADA TABLE USE BGCOLOR dan MENGATUR PARAGRAF USE ALIGN</h4>
<table border=1>
<tr>
<td bgcolor=green> KD</td>
<td bgcolor=pink> KOMPETENSI</td>
<td bgcolor=red , align=center> INDIKATOR</td>
</tr>
<tr>
<td rowspan=4> 3.3 </td>
<td rowspan=4> Memahami table</td>
<td> anatomi table</td>
</tr>
<tr>
<td> penggunaan spanning table</td>
</tr>
<tr>
<td> table dalam table</td>
</tr>
<tr>
<td> desain web use table</td>
</tr>
</table>
</body>
</html>
Analisalah program diatas!
Apa fungsi tag bgcolor
[Link] tabel dengan tampilan sbb:
[Link] tabel dengan tampilan sbb:
[Link] Kerja
Jobsheet 3
Nama:..................................................................Kelas/No Absen:...........................................Nilai:................................................
JOBSHEET PRAKTIKUM
Satuan Pendidikan : SMK
Kelas/semester :X/1
Mata Pelajaran : Pemrograman web
Alokasi Waktu : 4 x 45 Menit
Kompetensi Dasar:
Memahami format tabel pada halaman web
Materi Dasar:
[Link] dalam tabel
[Link] halaman web dengan konsep tabel
Tugas Peserta Didik:
[Link] tabel dalam tabel
[Link] dalam tabel
[Link] halaman web dengan konsep tabel
[Link] Praktik
[Link] komputer sesuai SOP
[Link] Kerja
[Link] pakaian kerja
[Link]/kontrol media dan peralatan yang akan dipraktikkan
[Link] instruksi dari instruktur ataupun prosedur kerja yang tertera pada lembar kerja
[Link] ijin dari instruktur anda bila hendak melakukan pekerjaan yang tidak tertera pada lembar kerja
[Link]/rapikan dan kontrol kembali media dan peralatan selesai praktik
[Link]
[Link] didik dapat Menjelaskan tabel dalam tabel
[Link] didik dapat Mendemostrasikantabel dalam tabel
[Link] didik dapat Mendemostrasikan desain halaman web dengan konsep tabel
[Link] dan Bahan:
[Link]
[Link] kerja
Uji Ketrampilan:
[Link] output dari program berikut:
<html>
<head>
<title> mewarnai tabel </title>
</head>
<body>
<h4> CONTOH tabel dalam tabel sederhana</h4>
<table border=2 cellpadding="10">
<tr>
<td > jeruk</td>
<td rowspan=2>
<table border=2 cellpadding="10">
<tr>
<td> jeruk bali </td>
<td> jeruk manis </td>
</tr>
<tr>
<td> jeruk peras </td>
<td> jeruk baby </td>
</tr>
</table>
</td>
<td > apel </td>
</tr>
<tr>
<td> pear </td>
<td> kiwi </td>
</tr>
</table>
</body>
</html>
2. Buatlah table dengan output sbb:
[Link] Kerja