Jobsheet Pemrograman Web

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:
1.Anatomi tabel minimal
2.Tabel dengan spanning
Tugas Peserta Didik:

1.Menjelaskan anatomi tabel minimal
2.Mendemostrasikan Tabel dengan spanning
A.Petunjuk Praktik
1.Nyalakan komputer sesuai SOP
B.Keselamatan Kerja
1.Gunakanlah pakaian kerja
2.Siapkan/kontrol media dan peralatan yang akan dipraktikkan
3.Ikutilah instruksi dari instruktur ataupun prosedur kerja yang tertera pada lembar kerja
4.Mintalah ijin dari instruktur anda bila hendak melakukan pekerjaan yang tidak tertera pada lembar kerja
5.Bersihkan/rapikan dan kontrol kembali media dan peralatan selesai praktik
C.Tujuan
1.Peserta didik dapat Menjelaskan anatomi tabel minimal
2.Peserta didik dapat Mendemostrasikan Tabel dengan spanning

D.Alat dan Bahan:
1.Komputer
E.Langkah kerja
Uji Pengetahuan:
1.untuk membuat table maka harus diawalai dengan tag apa?
2.tuliskan struktur pembuatan table
3.tag<tr> berfungsi untuk apa?
4.tag <td> berfungsi untuk apa?
5. Untuk mendifinisikan table heading atau judul tiap kolom menggunakan tag apa?
6.Tuliskan atribut elemen tabel beserta fungsinya.
Uji Ketrampilan:
1.Tuliskan 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>
Apa perbedaan output soal no 1 dan soal no 2 ? di tag html yang mana yang membuatnya berbeda ?
3.Buatlah table dengan output sbb:
4.Buatlah table dengan output sbb:
F.Hasil Kerja
Jobsheet 2.
JOBSHEET PRAKTIKUM
Kelas/semester :X/1
Kompetensi Dasar:
Materi Dasar:
1.Anatomi tabel minimal
2.Tabel dengan spanning

1.Menjelaskan anatomi tabel minimal
2.Mendemostrasikan Tabel dengan spanning
A.Petunjuk Praktik
B.Keselamatan Kerja
C.Tujuan
1.Peserta didik dapat Menjelaskan anatomi tabel minimal
2.Peserta didik dapat Mendemostrasikan Tabel dengan spanning

D.Alat dan Bahan:
1.Komputer
E.Langkah kerja
Uji Ketrampilan:
<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>
Apa fungsi tag colspan
<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>
Apa fungsi tag rowspan
<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>
Apa fungsi tag bgcolor
4.Buatlah tabel dengan tampilan sbb:
5.Buatlah tabel dengan tampilan sbb:
F.Hasil Kerja
Jobsheet 3
JOBSHEET PRAKTIKUM
Kelas/semester :X/1
Kompetensi Dasar:
Materi Dasar:
1.tabel dalam tabel
2.desain halaman web dengan konsep tabel

1.Menjelaskan tabel dalam tabel
2.Mendemostrasikantabel dalam tabel
3.Mendemostrasikandesain halaman web dengan konsep tabel
A.Petunjuk Praktik
B.Keselamatan Kerja
C.Tujuan
1.Peserta didik dapat Menjelaskan tabel dalam tabel
2.Peserta didik dapat Mendemostrasikantabel dalam tabel
3.Peserta didik dapat Mendemostrasikan desain halaman web dengan konsep tabel
D.Alat dan Bahan:
1.Komputer
E.Langkah kerja
Uji Ketrampilan:
<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:
F.Hasil Kerja

Bahasa

Jobsheet Pemrograman Web

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Jobsheet Pemrograman Web

Diunggah oleh

Hak Cipta:

Format Tersedia

Jobsheet 1..KD 3.

Tugas Peserta Didik:

2.Peserta didik dapat Mendemostrasikan Tabel dengan spanning

4.Buatlah table dengan output sbb:

Tugas Peserta Didik:

2.Peserta didik dapat Mendemostrasikan Tabel dengan spanning

5.Buatlah tabel dengan tampilan sbb:

Tugas Peserta Didik:

2. Buatlah table dengan output sbb:

Anda mungkin juga menyukai