MULTIMEDIA SMK ISLAM AL-AMAL SURABAYA TA 2021-2022

Kode : JS-DMI02.03 Pelajaran : Desain Multimedia Interaktif Durasi : 9 JP

Aktifitas : Praktikum Tema : Merancang Web Berbasis HTML Sifat : Individu
Kls/Smtr : XII / 5 Topik : Membuat template menggunakan tabel Instruktur : Hisyam

A. Tujuan Praktikum
Melalui percobaan mandiri terstruktur, peserta didik mampu menyajikan sebuah template website
menggunakan bahasa pemrograman HTML dan editor dasar.
B. Indikator Pencapaian
Peserta didik mampu :
1. Menyiapkan alat dan bahan yang diperlukan dengan baik
2. Mengoperasikan perangkat yang sesuai
3. Menuliskan script dasar pembuatan template menggunakan tabel berbasis HTML
4. Memodifikasi script untuk menyesuaikan tampilan secara tepat
5. Menyajikan hasil praktikum melalui browser dengan baik
C. Alat dan Bahan
Alat yang diperlukan adalah : Bahan yang diperlukan adalah :
1. Perangkat komputer 1. Jobsheet JS-DMI02.03
2. Aplikasi HTML Editor (Notepad/Dreamweaver) 2. Buku Modul DMI
D. Prosedur Kerja dan K3
Persiapan :
1. Siapkan (dengan membaca dan memahami) bahan yang diperlukan.
2. Duduk pada komputer yang tersedia dengan memperhatikan K3 dan Ergonomis (kenyamanan).
3. Nyalakan komputer sesuai prosedur / aturan yang benar hingga tampil aplikasi HTML Editor.
4. Pastikan Folder Kerja anda sudah tersedia, jika belum ada, silakan dibuat terlebih dahulu.
5. Buat File baru pada aplikasi HTML Editor yang anda gunakan, lalu simpan dengan aturan penamaan :
UjiCoba03-[Nama].html >> contoh : UjiCoba03-Hisyam.html
Pengerjaan :
6. Ketik contoh script pada Modul 2 bagian I (Membuat tabel), sehingga bisa menampilkan halaman web
seperti Gambar 2.15 (Membuat tabel).
7. Jangan lupa lakukan penyimpanan file/pekerjaan berkala (atau setiap ada perubahan yang signifikan).
8. Jika sudah sesuai, lanjutkan ke langkah 9, namun jika masih belum berhasil, coba perbaiki kembali pada
langkah 6, hingga berhasil.
Penyesuaian :
9. Coba ganti script baris ke-6 dengan script berikut :
Script Awal Script Pengganti
<table width=”100” ……. <table width=”100%” …….
10. Perhatikan perbedaan hasil preview pada Browser. Kemudian tuliskan hasil pengamatan 1 anda pada
bagian Hasil Praktikum.
11. Lakukan kembali penggantian script pada :
Baris ke- Script Awal Script Pengganti
3 <title> Tabel </title> <title> Tabel </title>
8 ….&nbsp;….. ……Navigasi Kiri…..
9 ….&nbsp;….. ……<h1>HEADER</h1>…..
12 ….&nbsp;….. ……<h3>Bagian Content Web</h3>…..
13 ….&nbsp;….. ……Navigasi Kanan…..
16 ….&nbsp;….. ……<marquee>ini Footer yaa</marquee>…..
12. Perhatikan kembali perbedaan hasil preview pada Browser. Kemudian tuliskan hasil pengamatan 2 anda
pada bagian Hasil Praktikum (Jika perlu digambar).
Penyelesaian :
13. Simpan kembali (Save) file final hasil praktikum anda.
14. Tutup semua aplikasi pada komputer anda.
15. Matikan (Shut Down) komputer anda dengan benar.
16. Rapikan kembali meja,kursi, keyboard dan mouse anda (jangan ada sampah/barang tertinggal).
17. Silakan kembali ke kelas dan selesaikan hasil praktikum anda.
E. Hasil Praktikum
Pada bagian ini, anda diminta untuk :
1. Tuliskan hasil pengamatan 1 dan pengamatan 2
2. Menggambarkan hasil preview (tampilan browser) saat anda melakukan Prosedur kerja langkah ke 12.