Jobsheet Permog Web KD 3.4

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 tampilan format multimedia pada halaman web
Materi Dasar:
Format tampilan gambar
Tugas Peserta Didik:

1.Menjelaskan cara memasukkan gambar ke halaman web
2. mendemonstrasikan cara memasukkan gambar ke halaman web
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 dapatMenjelaskan cara memasukkan gambar ke halaman web
2.Peserta didik dapat mendemonstrasikan cara memasukkan gambar ke halaman web
D.Alat dan Bahan:
1.Komputer
E.Langkah kerja
Uji Pengetahuan:
1.Cara memasukkan gambar ke halaman web menggunakan tag apa?
2.Apa fungsi perintah:
a. <img src="foto2.jpg" width="50" height="50" />
b. <img src="foto2.jpg" width="150" height="150" align="left"/>
c. <img src="foto2.jpg" width="80" height="80" align="bottom"/>
d. <font size=5 font color=red>
e. <b>senja di pegunungan Ponorogo Trenggalek</b>
f. <i>senja di pegunungan Ponorogo Trenggalek</i>
Uji Ketrampilan:
1.tulislah html berikut dan Analisalah hasil dari html tersebut.
<html>
<head>
<title> INSERT GAMBAR </title>
</head>
<body>
<H2> Berikut adalah contoh memasukkan gambar dalam halaman web</h2>
<h3> gambar harus tersimpan dalam folder yang sama dengan notepad </h3>
<img src="foto2.jpg" width="150" height="150" align="top"/>
</body>
</html>
2. tulislah html berikut dan Analisalah hasil dari html tersebut.
<html>
<head>
</head>
<body>
<H5> Berikut adalah contoh gambar dengan teks,dimana teks ada diatas posisi sejajar dengan gambar</h5>
<img src="foto2.jpg" width="100" height="100" align="top"/>
<b>senja di pegunungan Ponorogo Trenggalek</b>
<H5> Berikut adalah contoh gambar dengan teks,dimana teks ada dibawahposisi sejajar dengan gambar</h5>
<img src="foto2.jpg" width="80" height="80" align="bottom"/>
<i>senja di pegunungan Ponorogo Trenggalek</i>
<H5> Berikut adalah contoh gambar dengan teks,dimana teks ada di tengah posisi sejajar dengan gambar</h5>
<img src="foto2.jpg" width="50" height="50" align="middle"/>
<font color=red>senja di pegunungan Ponorogo Trenggalek</font>
</body>
</html>
3. tulislah html berikut dan Analisalah hasil dari html tersebut.

<html>
<head>
</head>
<body>
<H5> contoh posisi gambar di kanan </h5>
<img src="foto2.jpg" width="150" height="150" align="right"/>
<font color=blue>
<p>Posisi gambar ada disebelah kanan, Gambar pegunungan yang Indah <br>
dimana senja di pegunungan Ponorogo Trenggalek <br>
merupakan panorama yang harus anda nikmati <br>
tempat yang indah dapat anda temui <br>
di jalan raya trenggalek ponorogo <br>
tepatnya di kecamatan Tugu</p></font>
<H5> contoh posisi gambar di kiri </h5>

<img src="foto2.jpg" width="150" height="150" align="left"/>
<font size=5 font color=red>
<p>Posisi gambar ada disebelah kiri, Gambar pegunungan yang Indah <br>
dimana senja di pegunungan Ponorogo Trenggalek <br>
merupakan panorama yang harus anda nikmati</p></font>
</body>
</html>
F.Hasil Kerja
Jobsheet 2
JOBSHEET PRAKTIKUM
Kelas/semester :X/1
Kompetensi Dasar:
Materi Dasar:

1.Menjelaskan cara memasukkan audio ke halaman web
2. mendemonstrasikan cara memasukkan audio ke halaman web
A.Petunjuk Praktik
B.Keselamatan Kerja
C.Tujuan
1.Peserta didik dapatMenjelaskan cara memasukkan audio ke halaman web
2.Peserta didik dapat mendemonstrasikan cara memasukkan audio ke halaman web
D.Alat dan Bahan:
1.Komputer
E.Langkah kerja
Uji Pengetahuan:
1.Buatlah rangkuman singkat tentang format tampilan file audio
2.Bagaimana cara menyajikan file audio ke halaman web ( menggunakan perintag apa)
Uji Ketrampilan:
1.tulislah html berikut, kemudian analisalah hasil outputnya.
<html>
<head>
<title> INSERT audio </title>
</head>
<body>
<H2> contoh memasukkan audio dalam halaman web <br> file musik atau film harus satu folder</h2>
<h4> lihat browser yang ada di laptop anda, jika file audio tdk jalan kemungkinan browser tdk support<br>
jika browser sdh support dan tetap tdk jalan mungkin cara codding anda salah</h4>
<audio controls>
<source src="file1.ogg" type="audio/ogg">
</audio>
</body>
</html>
2. Buatlah tampilan web dimana didalam web anda terdapat gambar dan di bawah gambar tersebut terdapat lagu yang mengiringi gambar anda.Usahakan
gambar yang anda sisipkan adalah gambar bergerak
F.Hasil Kerja
Jobsheet 3
JOBSHEET PRAKTIKUM
Kelas/semester :X/1
Kompetensi Dasar:
Materi Dasar:

1.Menjelaskan cara memasukkan vidio ke halaman web
2. mendemonstrasikan cara memasukkan vidio ke halaman web
A.Petunjuk Praktik
B.Keselamatan Kerja
C.Tujuan
1.Peserta didik dapatMenjelaskan cara memasukkan vidio ke halaman web
2.Peserta didik dapat mendemonstrasikan cara memasukkan vidio ke halaman web
D.Alat dan Bahan:
1.Komputer
E.Langkah kerja
Uji Pengetahuan:
1.Buatlah rangkuman singkat tentang format tampilan file vidio
2.Bagaimana cara menyajikan file vidio ke halaman web ( menggunakan perintag apa)
Uji Ketrampilan:
1.tulislah html berikut, kemudian analisalah hasil outputnya.
<html>
<head>
<title> INSERT audio </title>
</head>
<body>
<H2> contoh memasukkan vidio dalam halaman web</h2>
<h4> lihat browser yang ada di laptop anda, jika file audio tdk jalan kemungkinan browser tdk support<br>
jika browser sdh support dan tetap tdk jalan mungkin cara codding anda salah</h4>
<h2><font color=blue> berikut adalah contoh insert vidio use browser chrome</font></h2>
<video width="400" height="400" controls>

<source src="vid1.mp4" type="video/mp4">
</body>
</html>
2. Buatlah tampilan web menggunakan tabel sederhana, dimana didalam web anda insert audio dan insert video.
F.Hasil Kerja

Jobsheet Permog Web KD 3.4

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 Permog Web KD 3.4

Diunggah oleh

Hak Cipta:

Format Tersedia

Jobsheet 1. KD 3.

Tugas Peserta Didik:

3. tulislah html berikut dan Analisalah hasil dari html tersebut.

<H5> contoh posisi gambar di kiri </h5>

Tugas Peserta Didik:

Tugas Peserta Didik:

<video width="400" height="400" controls>

Anda mungkin juga menyukai