RPP Pemograman Web

8/11/2019 RPP Pemograman Web

1/112

SMK NEGERI 1 TRENGGALEK

1

RENCANA PELAKSANAAN PEMBELAJARAN

Nama Sekolah : SMK NEGERI 1 TRENGGALEK

Mata Pelajaran : Pemrograman Web

Kelas/Semester : X/1

Alokasi Waktu : 8 x 45 menit

Aspek/materi pokok : Teknologi Aplikasi Web

A. Kompetensi Inti

1. Menghayati dan mengamalkan ajaran agama yang dianutnya

2. Menghayatidan mengamalkan perilaku jujur, disiplin, tanggungjawab, peduli (gotongroyong, kerjasama, toleran, damai) santun, responsif dan pro-aktifdan menunjukan sikap

sebagai bagian dari solusi atas berbagai permasalahan dalam berinteraksi secara efektif

dengan lingkungan sosial dan alam serta dalam menempatkan diri sebagai cerminan

bangsa dalam pergaulan dunia.

3. Memahami, menerapkan, dan menganalisis pengetahuan faktual, konseptual, dan

prosedural berdasarkan rasa ingin tahunya tentang ilmu pengetahuan, teknologi, seni,

budaya, dan humaniora dalam wawasan kemanusiaan, kebangsaan, kenegaraan, dan

peradaban terkait penyebab fenomena dan kejadian dalam bidang kerja yang spesifik

untuk memecahkan masalah.

4. Mengolah, menalar, dan menyaji dalam ranah konkret dan ranah abstrak terkait denganpengembangan dari yang dipelajarinya di sekolah secara mandiri, dan mampu

melaksanakan tugas spesifik di bawah pengawasan langsung.

B. Kompetensi Dasar

1.1 Memahami nilai-nilai keimanan dengan menyadari hubungan keteraturan dankompleksitas alam dan jagad raya terhadap kebesaran Tuhan yang menciptakannya

1.2 Mendiskripsikan kebesaran Tuhan yang menciptakan berbagai sumber energi di alam

1.3 Mengamalkan nilai-nilai keimanan sesuai dengan ajaran agamanya dalam kehidupansehari-hari.

2.1 Menunjukkan perilaku ilmiah (memiliki rasa ingin tahu; objektif; jujur; teliti; cermat; tekun;hati-hati; bertanggung jawab; terbuka; kritis; kreatif; inovatif dan peduli lingkungan) dalamaktivitas sehari-hari sebagai wujud implementasi sikap dalam melakukan percobaan danberdiskusi

2.2 Menghargai kerja individu dan kelompok dalam aktivitas sehari-hari sebagai wujudimplementasi melaksanakan percobaan dan melaporkan hasil percobaan

3.1 Memahami konsep teknologi aplikasi web4.1 Menyajikan pelbagai teknologi pengembangan aplikasi web

C. Indikator Pencapain Kompetensi

Memahami profesi dalam pengembangan aplikasi web Memahami sejarah dan cara kerja web

Memahami alur pengembangan aplikasi web


2/112


2

Memahami perangkat pengembangan aplikasi web

D. Tujuan Pembelajaran

Selama dan setelah proses pembelajaran, siswa memahami profesi dalampengembangan aplikasi web

Selama dan setelah proses pembelajaran, siswa memahami sejarah dan cara kerja web

Selama dan setelah proses pembelajaran, siswa memahami alur pengembanganaplikasi web

Selama dan setelah proses pembelajaran, siswa memahami perangkat pengembanganaplikasi web

E. Materi Pembelajaran

Profesi dalam pengembangan aplikasi web

Sejarah dan cara kerja web

Alur pengembangan aplikasi web

Perangkat pengembangan aplikasi web

Pada tahun 1969, DoD memberi tugas kepada ARPA untuk membangun sebuah mata rantaikomunikasi antara DoD dengan militer yang tidak dapat disabot oleh musuh mereka. Jaringankomunikasi yang diciptakan ini disebut ARPAnet. Pada awalnya, ARPAnet hanyamenghubungkan empat buah situs saja, yaitu :

y of Utah

Pada tahun 1970, penelitian yang dilakukan di Stanford University menghasilkan sebuahprotokol yang disebut TCP/IP. Protokol TCP/IP inilah yang berkembang terus hingga sekarangdan menjadi protokol standar dalam Internet.

Istilah-istilah dalam internet

WWW World Wide Web merupakan suatu bentuk layanan Internet yang

TCP/IP TCP/IP singkatan dari Transfer Control Protocol/Internet Protocolmerupakan jenis protocol yang memungkinkan komputerberkomunikasi dengan komputer lain melalui suatu jaringan yang disebut dengan internet.

URL URL (Uniform Resource Locator) digunakan sebagai penunjuk lokasipada internet. URL dapat dimisalkan dengan alamat yang menunjukpada suatu lokasi.

Homepage Tampilan awal (halaman utama) suatu website yang memuat informasisingkat tentang apa isi dari website tersebut

Situs Suatu alamat di dalam sebuah web

Browser Software yang digunakan untuk surfing atau browsing Internet, seperti

Internet Explorer, Opera, Netscape dll

ISP Internet Service Provider, penyedia jasa layanan Internet, sepertiIndosatnet, Wasantara, Meganet dll


3/112


3

E-mail Electronic Mail, suatu layanan/fasilitas yang disediakan untuk salingberkirim surat lewat internet

Search Engine Mesin pencari, suatu layanan/fasilitas untuk melakukan pencarian diInternet

Nama domainNama domain (domain name) adalah nama unik yang diberikan untuk mengidentifikasi namaserver komputer seperti web server atau email server di jaringan komputer ataupun internet.Nama domain berfungsi untuk mempermudah pengguna di internet pada saat melakukan akseske server, selain juga dipakai untuk mengingat nama server yang dikunjungi tanpa harusmengenal deretan angka yang rumit yang dikenal sebagai alamat IP (192.168.1.1). Namadomain ini juga dikenal sebagai sebuah kesatuan dari sebuah situs web seperti contohnya"wikipedia.org". Nama domain kadang-kadang disebut pula dengan istilah URL, atau alamat

website. Daftar nama-nama domain di bawah ini;

Com Commerce, komersial

net Jaringan (Network)

co Company, perusahaan

org Organization, organisasi

gov;go Government, pemerintah

ac Academic, akademik

edu Education, pendidikan

mil Military, militer

Teknologi webWeb berdasarkan teknologinya terbagi menjadi dua, yaitu Web Statis dan Web Dinamis.Sebelum menuju ke perbedaan web statis dan web dinamis, mari kita bahas persamaannyaterlebih dahulu. Persamaan web statis dan web dinamis yaitu sama-sama keduanyamerupakan suatu website yang menampilkan halaman yang ditampilkan di internet yangmemuat informasi tertentu (khusus).

Perbedaan Web Statis dan Web Dinamis1. Interaksi antara pengunjung dan pemilik web

Dalam web statis tidak dimungkinkan terjadinya interaksi antara pengunjung denganpemilik web. Sementara dalam web dinamis terdapat interaksi antara pengunjungdengan pemilik web seperti memberikan komentar, transaksi online, forum, dll.

2. Bahasa Script yang digunakanWeb statis hanya menggunakan HTML saja, atau paling tidak bisa ditambah denganCSS. Sedangkan web dinamis menggunakan bahasa pemrograman web yang lebihkompleks seperti PHP, ASP dan JavaScript.

3. Penggunaan DatabaseWeb statis tidak menggunakan database karena tidak ada data yang perlu disimpan dandiproses. Sedangkan web dinamis menggunakan database seperti MySQL, Oracle, dlluntuk menyimpan dan memroses data.

4. KontenKonten dalam web statis hanya diberikan oleh pemilik web dan jarang di-update,

sementara konten dalam web dinamis bisa berasal dari pengunjung dan lebih sering di-update. Konten dalam web dinamis bisa diambil dari database sehingga isinya pun bisaberbeda-beda walaupun kita membuka web yang sama.


4/112


4

Pengertian HTMLHTML atau Hypertext Marksup Language merupakan salah satu format yang digunakan dalampembuatan dokumen dan aplikasi yang berjalan dihalaman web. Sebenarnya, dokumen HTMLhanyalah sebuah dokumen teks biasa dan disebut sebagai Markup Language yakni bahasayang mengandung tanda (tag) tertentu yang digunakan untuk mengatur format tampilan suatudokumen. Simbol markup yang digunakan oleh HTML ditandai dengan tanda lebih kecil ( < )dan tanda lebih besar ( > ). HTTP atau Hypertext Transfer Protokol merupakan protokol yangdigunakan untuk mentransfer data atau document yang berformat HTML dari web server kebrowser (Internet Explorer, Netscape Navigator, NeoPlanet, dll). Dengan HTTP inilah yangmemungkinkan Anda menjelajah internet dan melihat halaman web

Pengertian Tag pada HTMLSebagai sebuah bahasa markup, HTML membutuhkan cara untuk memberitahu web browserbagaimana suatu text ditampilkan. Apakah text itu ditulis sebagai sebuah paragraf, list, atausebagai link? Dalam HTML, tanda ini dikenal dengan istilah tag. Hampir semua tag dalam

HTML ditulis secara berpasangan, tag pembuka dan tag penutup, dimana objek yang dikenaiperintah tag berada di antara tag pembuka dan tag penutup. Objek disini dapat berupa text,gambar, maupun video. Penulisan tag berada di antara dua kurung siku. Format penulisan tag:objek yang dikenai perintah tag

Struktur penulisan pada html:

Contohnya jika kita ingin membuat suatu text dalam sebuah paragraf di tulis tebal atau miring,dalam HTML dapat ditulis sebagai berikut: Ini adalah sebuah paragraf.Hanya kumpulan beberapa kalimat. Paragraf ini terdiri dari 3 kalimat.Hasil dari sebagian kode HTML diatas, diterjemahkan oleh browser menjadi: Ini adalah sebuahparagraf.Hanya kumpulan beberapa kalimat.Paragraf ini terdiri dari 3 kalimat.

Tag pada kode HTML diatas memberikan perintah kepada browser untuk menampilkan textsecara garis miring (i, singkatan dari italic), dan tag untuk menebalkan tulisan (b, singkatandari bold).

F. Metode PembelajaranPendekatan : Scientific dan PBL

Strategi : Penggalian informasi (Project based learning)

Presentasi

Model pembelajaran : Kooperatif

Metode : Penugasan,tanya jawab,diskusi,demonstrasi,proyek.


5/112


5

G. Kegiatan Pembelajaran

No Aktivitas Alokasi

waktu

Kegiatan Pendahuluan

o Berdoa sebelum pembelajarano Mengaitkan materi pembelajaran sekarang dengan

pengalaman peserta didiko Mengajukan pertanyaan yang ada keterkaitan dengan tema

yang akan dibelajarkano Siswa menerima informasi kompetensi, meteri, tujuan,

manfaat, dan langkah pembelajaran yang akan dilaksanakano Mengajar peserta didik melakukan kegiatan yang berkaitan

dengan materi

30 Menit

Kegiatan Inti

Eksplorasi

Observing /mengamati

o Siswa mengamati tayangan atau paparan disertai gambartentang prosedur cara kerja web dan penawaran layananhosting

Questioning/menanya

o Siswa dengan dibimbing guru diminta untuk bertanyaterkait tentang

cara kerja web hosting aplikasi web

Mengeksplorasi

o Siswa dibagi beberapa kelompok dan berdiskusi tentang Membandingkan berbagai penawaran hosting Aplikasi-aplikasi untuk pengembangan aplikasi web

o Selama kegiatan diskusi berlangsung guru melakukanpengamatan sikap dan mencatat semua hal yang terjadidi kelas

Elaborasi

Mengolah data /Mengasosiasikan

o Dengan diskusi siswa menyimpulkan hal-hal terpentingtentang cara kerja web, hosting dan aplikasipengembangan aplikasi web

Mengumpulkan informasi /Experimenting

o Siswa melaksanakan Keamanan dan Keselamatan Kerja(K3) dalam pengoperasian peralatan

o Siswa memperlihatkan sikap cermat dan teliti dalammenyelesaikan masalah cara kerja web

o Siswa memperlihatkan sikap cermat dan teliti dalammenyelesaikan masalah hosting aplikasi web

o Siswa memperlihatkan sikap cermat dan teliti dalammenyelesaikan masalah Aplikasi-aplikasi untukpengembangan aplikasi web

300 Menit


6/112


6

o Siswa mencoba membuat laporan hasil observasi tentangprosedur cara kerja web, perbandingan pelbagai layananhosting dan penggunaan aplikasi pengembangan web

o Dengan sikap tanggung jawab, peduli, responsif, dansantun siswa berkelompok membaca dan berdiskusi

Konfirmasi

Mengkomunikasikan

o Menyampaikan hasil tentang pencarian dan penyelesaianprosedur cara kerja web, perbandingan pelbagai layananhosting dan penggunaan aplikasi pengembangan web

o Siswa mendengarkan umpan balik dan penguatan dariguru

o Siswa mengumpulkan hasil kerja kelompok.

Kegiatan Penutupo Melakukan refleksi dan mencatat hal-hal penting dalam

bentuk rangkuman dengan melibatkan peserta didiko Menindaklanjuti pembelajaran hari ini dengan melihat hasil

akhir pekerjaan siswa sesuai dengan materi belajar yang barusaja di pelajari

o Siswa menyimak informasi mengenai rencana tindak lanjutpembelajaran

30 Menit

H. Penilaian

a. Penilaian Proses

No Aspek yang dinilaiTeknikPenilaian

WaktuPenilaian

InstrumenPenilaian

Keterangan

1. Religius Pengamatan Proses LembarPengamatan

Hasilpenilaiannomor 1 dan2 untukmasukanpembinaandan informasibagi GuruAgama danGuru PKn

2. Tanggung jawab

3. Peduli

4. Responsif

5. Santun

b.Penilaian Hasil

Indikator PencapaianKompetensi

TeknikPenilaian

BentukPenilaian

Instrumen

Memahami profesidalam

pengembanganaplikasi web

Testertulis

Isian Jelaskan mengenai pengembanganaplikasi web


7/112


7

Memahami sejarahdan cara kerja web

Testertulis

Isian Jelaskan tentang cara kerja web

Memahami alurpengembanganaplikasi web

Testertulis

Isian Jelaskan alur pengembangan aplikasiweb

Memahamiperangkatpengembanganaplikasi web

Testertulis

Isian Jelaskan perangkat pengembanganaplikasi web

Soal;

LEMBAR KERJA SISWA 1( Tugas Perorangan )

I. Pilihan Ganda

1. Apa sebutan halaman Web yang ditempatkan di depan situs web?a.Web Page b. Body c. Home Page d. Link e. Banner

2. Perangkat lunak berikut dapat digunakan untuk membuat Web page, kecuali.....a.HTML b. Ms Word c. Notepad d. Ms FrontPage e.Adope Photoshop

3. Apa format dokumen sebuah halaman Web...a.HTML b.PDF c.DOC d.Text e.GIF

4. Pilihan Page pada View Bar di MS Frontpage digunakan untuk menampilkan.....a. Struktur Web siteb. Lembar kerjac. Hyperlinkd. Menampilkan laporan-laporan tentang kinerja halamane. Semua file di folder tempat kerja

5. Pilihan Folders pada View Bar di MS Frontpage digunakan untuk menampilkan....a. Struktur Web siteb. Lembar kerjac. Hyperlinkd. Menampilkan laporan-laporan tentang kinerja halamane. Semua file di folder tempat kerja

6. Pilihan Reports pada View Bar di MS Frontpage digunakan untuk menampilkan.....a. Struktur Web siteb. Lembar kerjac. Hyperlinkd. Menampilkan laporan-laporan tentang kinerja halamane. Semua file di folder tempat kerja

7. Pilihan Navigators pada View Bar di MS Frontpage digunakan untuk menampilkan.....a. Struktur Web siteb. Lembar kerjac. Hyperlinkd. Menampilkan laporan-laporan tentang kinerja halaman

e. Semua file di folder tempat kerja8. Pilihan Hyperlinks pada View Bar di MS Frontpage digunakan untuk menampilkan.....a. Struktur Web siteb. Lembar kerja


8/112


8

c. Hyperlinkd. Menampilkan laporan-laporan tentang kinerja halamane. Semua file di folder tempat kerja

9. Pilihan Format gambar yang biasa terdapat dalam situs web adalah ....a.JPEG b.RM c.MP3 d.MPEG e.Ogg

10. Apa nama tombol di MS FrontPage yang digunakan untuk melihat tampilan halamanWeb dari kode HTML yang sudah jadi?a. Tombol Normalb. Tombol HTMLc. Tombol Previewd. Tombol Folder Liste. Tombol Navigation

II. Essay1. World Wide Web ( WWW ) atau WEB mempunyai pengertian .2. Universal Resource Locators ( URL ) adalah 3. TAG adalah ..4. TAG digunakan untuk .5. Untuk membuat dokumen HTML diperlukan program editors teks apa dan

bagaimana cara menyimpannya supaya dokumen HTML yang kita buat dapat dibukaoleh web browser ! ( beri contoh sebuah nama file HTML dan ekstensinya )

Pedoman Penskoran1.Soal diatas

No Uraian Skor1. Jawaban Soal Pilihan Ganda :

1. A 2. A 3. A 4. B 5. E 6. D 7. A 8. C 9. A 10. C20

Skor Maximal untuk soal pilihan ganda : 2 x 10 = 20

2. Kunci Jawaban Soal Uraian

Kunci Jawaban Soal No. 01

Sebuah system yang dapat menampilkan informasi berbentuk teks,gambar, suara dan film yang menjadi bentuk hypertext dan dapat

diakses oleh perangkat lunak yang disebut browser.

10


URL merupakan suatu pathname untuk mengidentifikasi sebuahdokumen di web.

10


TAG adalah kode yang digunakan untuk memformat teks yang terdiridari TAG pembuka dan TAG penutup, dan TAG pembuka saja tanpa

penutup.

10



9/112


9

Menandai berbagai elemen dalam suatu dokumen HTML


Editor : notepadSimpan file dalam bentuk HTM / HTMLContoh : webku.htm atau webku. Html

10

Skor maksimal untuk soal uraian : 5 x 10 = 70

Nilai= X 100

2.Test unjuk kerja

1.Rubrik Penilaian Diskusi

No.Nama

Siswa

Aspek pengamatan

Jum

SkorNilai Ket

Kerjasama

Mengkom

unikasikan

pendapat

Toleransi Keaktifan Kreatifitas

Keterangan Skor :

Masing-masing kolom diisi dengan kriteria4 = Baik sekali3 = Baik2 = Cukup1 = Kurang

Nilai = X 100

Kriteria NilaiA = 90-100 : Baik sekali

B = 80-89 : BaikC = 75-79 : CukupD = < 75 : Kurang

Skor perolehan

Skor Maksimal (20)

Skor perolehan

Skor Maksimal (70)


10/112


10

2.Rubrik Penilaian Presentasi

No.Nama

Siswa

Aspek Penilaian JumSkor

Nilai Ket.

KerjasamaSistematika

PenyampaianWawasan Keberanian Antusias

Gesture &

Penampilan

Keterangan Skor :Masing-masing kolom diisi dengan kriteria4 = Baik sekali3 = Baik2 = Cukup1 = Kurang

Nilai = X 100

Kriteria NilaiA = 90-100 : Baik sekaliB = 80-89 : BaikC = 75-79 : CukupD = < 75 : Kurang

3.Format Penilaian Laporan

Struktur Makalah Indikator Nilai

Isi Laporan

1. Orisinalitas deskripsi2. Mendeskripsikan mengenai prosedur cara

kerja web, perbandingan pelbagai layananhosting dan penggunaan aplikasipengembangan web

3. Struktur/logika penulisan disusun denganjelas sesuai metode yang dipakai

4. Bahasa yang digunakan sesuai EYD5. Gambar yang sesuai6. Penemuan terbaru

Bentuk Tulisan7. Sesuai kaidah yang ditetapkan (Kertas,

Spasi, Font)8. Kerapihan ketikan sesuai dengan SOP

Jumlah

Skor perolehan

Skor Maksimal (24)


11/112


11

Kriteria Penilaian untuk masing-masing Indikator :

Sangat sesuai 4

Sesuai 3Cukup 2

Kurang 1

Nilai = X 100

4.Format Jobsheet dan Rubrik penilaian

Kompetensi Dasar : .

Alat : .Bahan : .Langkah Kerja : .Gambar kerja : .Analisa : .


Isi Laporan

1. Orisinalitas deskripsi2. Alat bahan yang sesuai dengan

unjuk kerja

3. Langkah kerja sesuai SOP4. Analisa sesuai

kerusakan/kesalahan yangterjadi

5. Gambar yang sesuai

Bentuk Tulisan6. Kerapihan tulisan7. Ketepatan waktu penyelesaian

tugas

Jumlah


Sangat sesuai 4

Sesuai 3

Cukup 2

Kurang 1

Nilai = X 100

Skor perolehan

Skor Maksimal (32)

Skor perolehan

Skor Maksimal (28)


12/112


12

5.Rubrik penilaian Unjuk kerja/Praktek

Prosentase Bobot Komponen PenilaianNilai Praktik

(NP)

Persiapan ProsesSikapKerja

Hasil Waktu NK

1 2 3 4 5 6

Bobot (%) 10 40 10 30 10

SkorKomponen

NK

I. Sumber Belajar

o Buku Teks Pelajarano Buku Panduan Guruo Pemrograman Web Dengan HTML Revisi Keempat, Betha sidik, Ir., Husni I. Pohan,

Ir., M.Eng., Penerbit Informatika Bandung, Juni 2012o Learning Web Design 4th Edition, Jennifer Niederst Robbins, Penerbit O'Reilly

Media, Inc.: Kanada, 2012o Buku-buku dan referensi lain yang relevano Media cetak/elektroniko Lingkungan sekitar

Trenggalek , 14 Juli 2014Guru Mata Pelajaran

Bambang Haryono, ST

NIP. 19780618 201101 1 006


13/112


13

Lampiran 1 Lembar Pengamatan

LEMBAR PENGAMATAN SIKAP

Mata Pelajaran :..................................................................................................

Kelas/Semester :....................................................................................................

Tahun Ajaran :....................................................................................................

Waktu Pengamatan : ............................................................................................

Indikator perkembangan sikapreligius,tanggung jawab,peduli,responsif, dansantun

1. BT (belum tampak)jika sama sekali tidak menunjukkan usaha sungguh-sungguh dalam

menyelesaikan tugas

2. MT (mulai tampak)jika menunjukkan sudah ada usaha sungguh-sungguh dalam

menyelesaikan tugas tetapi masih sedikit dan belum ajeg/konsisten

3. MB (mulai berkembang)jika menunjukkan ada usaha sungguh-sungguh dalam

menyelesaikan tugas yang cukup sering dan mulai ajeg/konsisten

4. MK (membudaya)jika menunjukkan adanya usaha sungguh-sungguh dalam

menyelesaikan tugas secara terus-menerus dan ajeg/konsisten

Bubuhkan tanda V pada kolom-kolom sesuai hasil pengamatan.

No

.

Nama

Siswa

Religius Tanggug jawab Peduli Responsif Santun

BT MT MB MK BT MT MB MK BT MT MB MK BT MT MB MK BT MT MB MK

1.

2.

3.

4.

5.

...

Keterangan1 = kurang2 = sedang3 = baik4 = sangat baik


14/112


14

Rubrik penilaian laporan hasil observasi

Nama Kelompok :.........................

Tanggal :

No. Kunci/Kriteria jawaban/Aspek yang dinilai Tingkat Skor

1. Isi

2. Organisasi

3. Kosakata dan Diksi

4. Bahasa (Tata Bahasa dan Struktur)

5. Penulisan (Ejaan dan Tanda Baca)

6. Kerapian

Total


15/112


15






Aspek/mater pokok : Format Teks Halaman Web

A. KompetensiInti

1. Menghayati dan mengamalkan ajaran agama yang dianutnya2. Menghayati dan mengamalkan perilaku jujur, disiplin, tanggungjawab, peduli (gotong

royong, kerjasama, toleran, damai) santun, responsif dan pro-aktifdan menunjukan sikap









4. Mengolah, menalar, dan menyaji dalam ranah konkret dan ranah abstrak terkait dengan

pengembangan dari yang dipelajarinya di sekolah secara mandiri, dan mampu


B. Kompetensi Dasar






3.2 Memahami format teks pada halaman web4.2 Menyajikan teks dalam format tertentu pada halaman web


Memahami anatomi dokumen web

Memahami pemformatan teks dan paragraph Memahami pembuatan list minimal

Memahami pembuatan list kombinasi


16/112


16


Selama dan setelah proses pembelajaran, siswa memahami anatomi dokumen web

Selama dan setelah proses pembelajaran, siswa memahami pemformatan teks danparagraph

Selama dan setelah proses pembelajaran, siswa memahami pembuatan list minimal

Selama dan setelah proses pembelajaran, siswa memahami pembuatan list kombinasi


Anatomi dokumen web

Pemformatan teks dan paragraph

Pembuatan list minimal

Pembuatan list kombinasi

Daftar tag pada html adalah sbb:

Dokumen Header Judul dokumen Isi dokumen Judul paragraf

Paragraf ,,,, Atribut
Ganti baris Font ,, Enumerasi

Garis mendatar Gambar Link (kaitan/rujukan) Tabel Komentar ,, Frame (bingkai) Formulir isian ,, Komponen isian pada formulir Link berdasar area pada gambar , Pengelompokan elemen dokumen

Pengaturan paragraph

Tag

, Digunakan untuk pindah alinea atau membuat paragraf baru. Tag ini bisa diberiakhiran
tapi juga bisa tidak diberi. Dalam tag ini juga bisa digunakan untuk mengaturperataan kiri, tengah, kanan dan kiri-kanan, yaitu dengan attribut ALIGN. Attribut alignmempunyai nilai: LEFT, RIGHT, CENTER dan JUSTIFY
ATRIBUT FUNGSI

align Merupakan posisi vertikal garis pemisah. Nilainya adalah LEFT, RIGHT,atau CENTER

width Digunakan untuk menentukan ketebalan garis.

size Digunakan untuk menentukan panjang garis dalam satuan pixel.noshade Menonaktifkan efek tiga dimensi.

color Menentukan warna garis batas.


17/112


17

Contoh (Save dengan nama horisontal.html) :

Membuat Garis Horisontal Ahlan Wa Sahlan www.smk-mediainformatika.sch.id

Tag . ..Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 - 6 atauantara sampai , dengan merupakan ukuran terbesar dan merupakanukuran terkecil.

Contoh (Save dengan nama hn.html) : Membuat Heading Dokumen HTML Headng Tingkat 1 Headng Tingkat 2 Headng Tingkat 3 Headng Tingkat 4 Headng Tingkat 5 Headng Tingkat 6

Tag ,membuat tampilan dokumen HTML pada browser sama dengan tampilan pada tekseditor. Dengan tag , maka tag

dan tag
jadi tidak diperlukan lagi.Contoh (Save dengan nama free.html): Web Sederhana

Tampilan ini sma dengan tampilan di teks editor. klasemenTeam Main Menang Seri Kalah

==============================================Team A 3 2 1 0Team B 3 2 0 1Team C 3 1 1 1==============================================kode program : for i = 1 to 10For j = 1 to 5A(i,j)=i*jnextnext


18/112


18

LISTDaftar/list adalah merupakan kumpulan teks yang disusun sedemikian rupa sehingga item-itemyang ada memiliki nomor urut atau bisa juga berupa tanda-tanda khusus/symbol. Ada duamacam daftar, yaitu UNORDERED lists (ul) dan ORDERED lists (ol).

tag untuk membuat daftar item tidak berurut

Disc : Bulatan hitam ()Square : Kotak ()Circle : Bulatan kosong ()

Contoh (Save dengan nama unordered.html):

Order List (numbering)

Urutan 1Urutan 2Urutan 3

Urutan 1Urutan 2

Urutan 3


Urutan 1Urutan 2

Urutan 3



19/112


19

1 : Angka latinA : Huruf Aa : Huruf aI : Angka romawi

Contoh (Save dengan nama ordered.html):

Unorder (bullet)






Presentasi




20/112


20


No Aktivitas Alokasiwaktu






dengan materi

45 Menit

Kegiatan Inti

Eksplorasi


o Siswa mengamati tayangan atau paparan disertai gambar

berbagai jenis format teks dan hasilnya terhadap halaman

web

Questioning/menanya

o

Siswa dengan dibimbing guru diminta untuk bertanyatentang tanyangan atau paparan Berbagai tampilan format teks pada halaman web penerapan format teks yang sesuai dari suatu halaman

webMengeksplorasi

o Siswa dibagi beberapa kelompok dan berdiskusi tentang Berbagai tampilan format teks pada halaman web penerapan format teks yang sesuai dari suatu halaman

webo Selama kegiatan diskusi berlangsung guru melakukan

pengamatan sikap dan mencatat semua hal yang terjadi

di kelas

Elaborasi


o Dengan diskusi siswa menyimpulkan hal-hal terpentingtentang hubungan antara format teks dengan halamanweb yang dihasilkan

o Dengan diskusi siswa menyimpulkan hal-hal terpentingtentang kemiripan hasil penerapan format teks denganhalaman web aslinya

o Dengan diskusi siswa menyimpulkan hal-hal terpenting

tentang penerapan format teks pada halaman webMengumpulkan informasi /Experimenting

o Siswa melaksanakan Keamanan dan Keselamatan Kerja

450 Menit


21/112


21

(K3) dalam pengoperasian peralatano Siswa memperlihatkan sikap cermat dan teliti dalam

menyelesaikan masalah penerapan prosedur hubunganantara format tabel dengan tampilannya pada halamanweb

o Siswa memperlihatkan sikap cermat dan teliti dalammenyelesaikan masalah dalam penerapan prosedurformat tabel untuk mendapatkan desain layout halamanweb yang sesuai

o Siswa mencoba membuat laporan hasil observasi tentangpenerapan format tabel pada halaman web


Konfirmasi

Mengkomunikasikano Menyampaikan hasil tentang, pemecahan masalah

menggunakan percobaan berbagai format tabel padahalaman web kelompok lain merespon atau menanggapidengan responsif dan santun



Kegiatan Penutup

o Melakukan refleksi dan mencatat hal-hal penting dalambentuk rangkuman dengan melibatkan peserta didik

o Menindaklanjuti pembelajaran hari ini dengan melihat hasilakhir pekerjaan siswa sesuai dengan materi belajar yang barusaja di pelajari


45 Menit

H. Penilaiana. Penilaian Proses

No Aspek yang dinilai TeknikPenilaian

WaktuPenilaian

InstrumenPenilaian

Keterangan



2. Tanggung jawab

3. Peduli

4. Responsif

5. Santun


22/112


22

b. Penilaian Hasil


TeknikPenilaian

BentukPenilaian

Instrumen

Memahami anatomidokumen web

Testertulis

Isian Buatlah anatomi dokumen web

Memahamipemformatan teks danparagraph

Testertulis

Isian Jelaskan pemformatan teks danparagraph dalam halaman web

Memahami pembuatanlist minimal

Testertulis

Isian Buatlah list minimal halaman web

Memahami pembuatanlist kombinasi

Testertulis

Isian Buatlah list kombinasi halaman web

Soal Tulis

1. Jelaskan fungsi tag

2. Ada 3 macam pengaturan paragraf, sebutkan dan tuliskan tag nya3. Uraian tentang fungsi heading4. Jelaskan fungsi tag

Jawaban

1. Tag

, Digunakan untuk pindah alinea atau membuat paragraf baru. Tag ini bisa

diberi akhiran
tapi juga bisa tidak diberi. Dalam tag ini juga bisa digunakan untuk
mengatur perataan kiri, tengah, kanan dan kiri-kanan, yaitu dengan attribut ALIGN

2. Rata tengah , tag nya adalah :

Rata kanan, tag nya adalah :

Rata kiri, tag nya adalah : < p align =left>

3. Tag . ..Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 - 6

atau antara sampai , dengan merupakan ukuran terbesar dan

merupakan ukuran terkecil.

4. Tag ,membuat tampilan dokumen HTML pada browser sama dengan tampilanpada teks editor. Dengan tag , maka tag

dan tag
jadi tidak diperlukanlagi.


23/112


23

Tes Praktek

Jawab

tugas 3

mengatur paragraf

pengaturan paragraf adalah
salah satu hal yang perlu dilakukan agar paragraf tersusun rapi

ada beberapa pilihan pengaturan, yaitu:

rata kanan

Pedoman Penskoran1.Soal nomor 1 sampai 4

Aspek Skor

Siswa menjawab dengan benar dan lengkap 4

Siswa menjawab benar sedikit tidak lengkap 3

Siswa menjawabb enar tetapi tidak lengkap 2

Siswa menjawab salah 1

SKOR MAKSIMAL


24/112


24

2.Test unjuk kerja


No.Nama

Siswa

Aspek pengamatan

Jum

SkorNilai Ket

Kerjasama

Mengkomu

nikasikan

pendapat



Nilai = X 100



No.Nama

Siswa

Aspek PenilaianJum

Skor Nilai Ket.



Gesture &

Penampilan

Skor perolehan

Skor Maksimal (20)


25/112


25


Nilai = X 100

Kriteria NilaiA = 90-100 : Baik sekaliB = 80-89 : BaikC = 75-79 : Cukup

D = < 75 : Kurang



Isi Laporan

1. Orisinalitas deskripsi2. Mendeskripsikan mengenai

pemecahan masalahmenggunakan berbagai format teks

3. Struktur/logika penulisan disusundengan jelas sesuai metode yang

dipakai4. Bahasa yang digunakan sesuai

EYD5. Gambar yang sesuai6. Penemuan terbaru

Bentuk Tulisan7. Sesuai kaidah yang

ditetapkan(Kertas,Spasi, Font)8. Kerapihan ketikan sesuai dengan

SOP

Jumlah

Kriteria Penilaian untuk masing-masing Indikator :Sangat sesuai 4

Sesuai 3

Cukup 2

Kurang 1

Nilai = X 100

Skor perolehan

Skor Maksimal (24)

Skor perolehan

Skor Maksimal (32)


26/112


26


Kompetensi Dasar : .Alat : .Bahan : .Langkah Kerja : .Gambar kerja : .Analisa : .


Isi Laporan

1. Orisinalitas deskripsi2. Alat bahan yang sesuai

dengan unjuk kerja3. Langkah kerja sesuai SOP4. Analisa sesuai



Bentuk Tulisan6. Kerapihan tulisan7. Ketepatan waktu

penyelesaian tugas

Jumlah


Sangat sesuai 4

Sesuai 3

Cukup 2

Kurang 1

Nilai = X 100

Skor perolehan

Skor Maksimal (28)


27/112


27


Prosentase Bobot Komponen Penilaian Nilai Praktik(NP)


Hasil Waktu NK

1 2 3 4 5 6

Bobot (%) 10 40 10 30 10

SkorKomponen

NK

I. Sumber Belajar





Bambang Haryono, STNIP. 19780618 201101 1 006


28/112


28



Mata Pelajaran :..................................................................................................

Kelas/Semester :....................................................................................................

Tahun Ajaran :....................................................................................................




menyelesaikan tugas








No

.

Nama

Siswa



1.

2.

3.

4.

5.

...



29/112


30/112


30






Aspek/mater pokok : Format Tabel Halaman Web

A. KompetensiInti














B. Kompetensi Dasar






3.3 Memahami format tabel pada halaman web4.3 Menyajikan tabel pada halaman web


Memahami anatomi tabel minimal

Memahami tabel dengan spanning Memahami tabel di dalam table

Memahami desain halaman web dengan konsep tabel


31/112


31


Selama dan setelah proses pembelajaran, siswa memahami anatomi tabel minimal

Selama dan setelah proses pembelajaran, siswa memahami tabel dengan spanning

Selama dan setelah proses pembelajaran, siswa memahami tabel di dalam table

Selama dan setelah proses pembelajaran, siswa memahami desain halaman webdengan konsep tabel


Anatomi tabel minimal

Tabel dengan spanning

Tabel di dalam table

Desain halaman web dengan konsep tabel

Menggunakan TableTable merupakan cara untuk menampilkan informasi dalam halaman web dengan bentuk kolom

dan baris.Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table, yaitu:, , dan .Yang perlu diingat adalah bahwa tag dan harus terletak di antara tag dan.

1.

Digunakan untuk mendefinisikan pembuatan tabel. Memiliki attribut:- perataan: rata kiri (left), tengah (center) atau kanan (right).

mengatur bentuk perataan secara vertikal

mengatur warna latar belakang (background) dari tabel.

menentukan gambar yang digunakan sebagai background tabel

Untuk mengatur warna suatu sel dalam tabel

menentukan ukuran border tabel (dalam pixel).

menggabungkan beberapa baris

menggabungkan beberapa kolom

- jarak antara isi cell dengan batas cell (dalam pixel).

mengatur spasi/jarak antar cell (dalam pixel).

menentukan lebar tabel dalam pixel atau percent.

Menentukan tinggi tabel

2.

Tag ini digunakan untuk membuat baris baru(pada tabel). Terdiri dari atribut:- perataan: rata kiri (left), tengah (center) atau kanan (right).

- warna latar belakang dari baris.

- perataan vertikal: top, middle atau bottom.

3.

Tag ini digunakan untuk membuat kolombaru pada tabel. Attributnya adalah:untuk menentukan perataan kolom

untuk menentukan image yang digunakan sebagai latar belakang darikolom.

untuk menentukan warna latar belakang


32/112


32

- lihat gambar contoh

untuk mengatur ukuran tinggi cell dalam pixels.

untuk membuat supaya isi dari kolom tetap berada pada satu baris.

- lihat gambar contohuntuk mengatur perataan vertikal: top, middle atau bottom.

untuk menentukan lebar kolom dalam pixel atau percen.

Contoh (save dengan nama tabel1.html ): Pembuatan Table


33/112


33

judul baris tabel.Judul tabel atau biasa disebut CAPTION terletak dibagian luar tabel yang bisa berada dibawahatau diatas tabel. Secara default caption diletakkan dibagian atas suatu tabel, tetapi juga dapatdiletakkan dibawah suatu tabel dengan menambahkan atribut ALIGN=BOTTOM pada elemencaption tersebut.Judul kolom atau judul baris dibuat dengan elemen yang sama yaitu elemen TABLE HEADER.Judul kolom terletak pada sel disebelah kiri atau kolom pertama suatu tabel, sedangkan judulbaris terletak pada baris pertama suatu tabel. Judul baris atau judul kolom akan tercetak tebal.Contoh:

Pembuatan Table

Daftar Alamat

Ini contoh tabel sederhana dengan border

No.NamaAlamat1.WahyuBekasi2.

LesmonoKranji

Mengatur Lebar dan Tinggi Suatu Tabel

Lebar tabel diatur dengan menggunakan atribut WIDTH dan untuk mengatur tinggi tabledengan atribut HEIGHT.Jika atribut WIDTH dan HEIGHT digunakan dalam elemen TABLE nilainya menunjukkan

lebar dan tinggi tabel terhadap BROWSER sedangkan


34/112


34

jika digunakan pada elemen TH dan TD, nilainya merupakan lebar dan tinggi dari suatutabel.Nilai atribut mengunakan ukuran % (max 100%) dan ukuran pixel.

Contoh: Mengatur Lebar dan Tinggi TabelDaftar Alamat

No.Nama

Alamat1.WahyuBekasi

Perataan dalam TabelPerataan dalam tabel dikenal dua macam, yaitu perataan secara horizontal dengan

atribut ALIGN dan perataan vertikal dengan atribut VALIGN, serta untuk membuat suatu tabelposisinya menjadi ditengah-tengah layar browser.Contoh:

Mengatur Lebar dan Tinggi TabelDaftar Alamat

No.NamaAlamat

1.WahyuBekasi


35/112


35

Membuat Warna Pada Tabel

Didalam pewarnaan tabel kita dapat mengatur warna latar belakang dan teks serta warnabordernya.Untuk menentukan warna latar belakang pada suatu tabel, gunakan atribut BGCOLOR

sedangkan untuk warna border dapat menggunakan beberapa atribut sbb:

Contoh:

Mengatur Lebar dan Tinggi TabelDaftar Alamat

No.Nama

Alamat

1. WahyuBekasi


36/112


36



Presentasi





waktu



pengalaman peserta didik

o Mengajukan pertanyaan yang ada keterkaitan dengan temayang akan dibelajarkano Siswa menerima informasi kompetensi, meteri, tujuan,


dengan materi

60 Menit

Kegiatan Inti

Eksplorasi


o Siswa mengamati tayangan atau paparan disertai gambar Berbagai jenis format tabel dan hasilnya terhadap

halaman web Desain layout dalam format tabel untuk suatu halaman

webQuestioning/menanya

o Siswa dengan dibimbing guru diminta untuk bertanyatentang tanyangan atau paparan berbagai Berbagai jenis format tabel dan hasilnya terhadap

halaman web Desain layout dalam format tabel untuk suatu halaman

web

Mengeksplorasio Siswa dibagi beberapa kelompok dan berdiskusi tentang

berbagai

600 Menit


37/112


37

Berbagai jenis format tabel dan hasilnya terhadaphalaman web

Desain layout dalam format tabel untuk suatu halamanweb


Elaborasi


o Dengan diskusi siswa menyimpulkan hal-hal terpentingtentang berbagai jenis format tabel dan hasilnya terhadaphalaman web


tentang desain layout dalam format tabel untuk suatuhalaman web

o Dengan diskusi siswa menyimpulkan hal-hal terpentingtentang penerapan menyimpulkan penerapan format tabelpada halaman web



o Siswa memperlihatkan sikap cermat dan teliti dalammenyelesaikan masalah berbagai jenis format tabel danhasilnya terhadap halaman web

o Siswa memperlihatkan sikap cermat dan teliti dalam

dalam menyelesaikan masalah desain layout dalamformat tabel untuk suatu halaman web

o Siswa mencoba membuat laporan hasil observasi tentangpenerapan format tabel pada halaman web


Konfirmasi

Mengkomunikasikan

o Menyampaikan hasil tentang penerapan format tabel padahalaman web, kelompok lain merespon atau menanggapi

dengan responsif dan santuno Siswa mendengarkan umpan balik dan penguatan dari

guruo Siswa mengumpulkan hasil kerja kelompok.

Kegiatan Penutup



o Siswa menyimak informasi mengenai rencana tindak lanjut

pembelajaran

60 Menit


38/112


38



WaktuPenilaian

InstrumenPenilaian

Keterangan



2. Tanggung jawab

3. Peduli

4. Responsif

5. Santun

b. Penilaian Hasil


TeknikPenilaian

BentukPenilaian

Instrumen

Memahami anatomitabel minimal

Testertulis

Isian Buatlah anatomi tabel minimal

Memahami tabeldengan spanning

Testertulis

Isian Jelaskan membuat langkah tabeldengan spanning

Memahami tabel di

dalam table

Tes

tertulis

Isian Jelaskan membuat tabel di dalam

table

Memahami desainhalaman web dengankonsep tabel

Testertulis

Isian Rancanglah desain halaman webdengan konsep tabel

Soal Tulis

1. Jelaskan fungsi tag dan tag pada tabel.2. Jelaskan perbedaan perintah Caption dan TH pada tabel.

3. Uraikan cara membuat background warna pada tabel

Jawaban1.

Tag ini digunakan untuk membuat baris baru(pada tabel). Terdiri dari atribut:- perataan: rata kiri (left), tengah (center) atau kanan (right).

- warna latar belakang dari baris.- perataan vertikal: top, middle atau bottom.

Tag ini digunakan untuk membuat kolombaru pada tabel

2. Judul tabel atau biasa disebut CAPTION terletak dibagian luar tabel yang bisa berada

dibawah atau diatas tabel. Secara default caption diletakkan dibagian atas suatu tabel,tetapi juga dapat diletakkan


39/112


39

Judul kolom atau judul baris dibuat dengan elemen yang sama yaitu elemen TABLE

HEADER .

3. Didalam pewarnaan tabel kita dapat mengatur warna latar belakang dan teks serta

warna bordernya.Untuk menentukan warna latar belakang pada suatu tabel, gunakan atribut BGCOLOR

Contoh: No.

Tes Praktek

Tulislah html dibawah ini

Jawab Mengatur Lebar dan Tinggi TabelDaftar Alamat

No.NamaAlamat

1. WahyuBekasi


40/112


40


Aspek Skor





SKOR MAKSIMAL

2.Test unjuk kerja


No.Nama

Siswa

Aspek pengamatan

Jum

Skor Nilai Ket

Kerjasama

Mengkom

unikasikan

pendapat



Nilai = X 100


Skor perolehan

Skor Maksimal (20)


41/112


41


No.Nama

Siswa

Aspek Penilaian JumSkor

Nilai Ket.



Gesture &

Penampilan


Nilai = X 100




Isi Laporan

1. Orisinalitas deskripsi2. Mendeskripsikan mengenai penerapan

format tabel pada halaman web3. Struktur/logika penulisan disusun dengan

jelas sesuai metode yang dipakai4. Bahasa yang digunakan sesuai EYD5. Gambar yang sesuai6. Penemuan terbaru



Jumlah

Skor perolehan

Skor Maksimal (24)


42/112


42


Sangat sesuai 4

Sesuai 3

Cukup 2Kurang 1

Nilai = X 100


Kompetensi Dasar : .Alat : .

Bahan : .Langkah Kerja : .Gambar kerja : .Analisa : .


Isi Laporan

1. Orisinalitas deskripsi2. Alat bahan yang sesuai

dengan unjuk kerja3. Langkah kerja sesuai SOP

4. Analisa sesuaikerusakan/kesalahan yangterjadi


Bentuk Tulisan6. Kerapihan tulisan7. Ketepatan waktu

penyelesaian tugas

Jumlah


Sangat sesuai 4

Sesuai 3

Cukup 2

Kurang 1

Nilai = X 100

Skor perolehan

Skor Maksimal (32)

Skor perolehan

Skor Maksimal (28)


43/112


43



(NP)


Hasil Waktu NK

1 2 3 4 5 6

Bobot (%) 10 40 10 30 10

SkorKomponen

NK

I. Sumber Belajar







44/112


44



Mata Pelajaran :..................................................................................................

Kelas/Semester :....................................................................................................

Tahun Ajaran :....................................................................................................




menyelesaikan tugas








No

.

Nama

Siswa



1.

2.

3.

4.

5.

...



45/112


45


Nama Kelompok :.........................

Tanggal :


1. Isi

2. Organisasi




6. Kerapian

Total


46/112


46






Aspek/mater pokok : Multimedia pada Halaman Web

A. KompetensiInti














B. Kompetensi Dasar



1.3 Mengamalkan nilai-nilai keimanan sesuai dengan ajaran agamanya dalam kehidupan

sehari-hari.2.1 Menunjukkan perilaku ilmiah (memiliki rasa ingin tahu; objektif; jujur; teliti; cermat; tekun;

hati-hati; bertanggung jawab; terbuka; kritis; kreatif; inovatif dan peduli lingkungan) dalamaktivitas sehari-hari sebagai wujud implementasi sikap dalam melakukan percobaan danberdiskusi


3.4 Memahami tampilan format multimedia pada halaman web4.4 Menyajikan tampilan format multimedia pada halaman web

C. Indikator Pencapain Kompetensi Memahami format tampilan gambar

Memahami format tampilan file audio


47/112


47

Memahami format tampilan file video dan animasi

Memahami format tampilan gambar dengan map

D. Tujuan Pembelajaran Selama dan setelah proses pembelajaran, siswa memahami format tampilan gambar

Selama dan setelah proses pembelajaran, siswa memahami format tampilan file audio

Selama dan setelah proses pembelajaran, siswa memahami format tampilan file videodan animasi

Selama dan setelah proses pembelajaran, siswa memahami format tampilan gambardengan map


Format tampilan gambar

Format tampilan file audio

Format tampilan file video dan animasi Format tampilan gambar dengan map

Element gambar ( Element img)Element IMG befungsi untuk menampilkan gambar. Element ini tidak mempunyai tag penutupdan mempunyaiattribute yaitu:align, alt (teks alternatif jika gambar tidak tampil),

border, height, width, hspace (jarak kosong posisi horizontal,vspace (jarak kosong posisi vertikal), src (lokasi dari gambar itu disimpan beserta nama filenya).

Sintaks:

Latihan 1:Tampilkan gambar image027.jpg dengan ukuran width dan height 160pixel dan border 8pixel :Nama file: latihan5_1.html

Latihan5-1kenanganwaktu dijtm park


48/112


48

Tugas tambahan:Letakkan gambar tersebut ke kanan, setelah itu ke kiri.Latihan 2:Dari Latihan 1 ubah gambar menjadi yang terdapat dalam direktori /images dengan namaimage050.jpgNama file: latihan5_2.htmlLatihan5-1



Presentasi





waktu






dengan materi

60 Menit

Kegiatan Inti

Eksplorasi


o Siswa mengamati tayangan atau paparan disertai gambarberbagai tampilan format multimedia pada halaman web

Questioning/menanya

o Siswa dengan dibimbing guru diminta untuk bertanyatentang tanyangan atau paparan berbagai berbagaitampilan format multimedia pada halaman web

Mengeksplorasio Siswa dibagi beberapa kelompok dan berdiskusi tentang

berbagai

600 Menit


49/112


49

Format tampilan gambar Format tampilan file audio Format tampilan file video dan animasi Format tampilan gambar dengan map


Elaborasi


o Dengan diskusi siswa menyimpulkan hal-hal terpentingtentang berbagai berbagai tampilan format multimediapada halaman web


o Siswa melaksanakan Keamanan dan Keselamatan Kerja

(K3) dalam pengoperasian peralatano Siswa memperlihatkan sikap cermat dan teliti dalam

menyelesaikan masalah berbagai jenis format tampilangambar

o Siswa memperlihatkan sikap cermat dan teliti dalammenyelesaikan masalah berbagai jenis format tampilanfile audio

o Siswa memperlihatkan sikap cermat dan teliti dalammenyelesaikan masalah berbagai jenis format tampilanfile video dan animasi

o Siswa memperlihatkan sikap cermat dan teliti dalammenyelesaikan masalah berbagai jenis format tampilangambar dengan map

o Siswa mencoba membuat laporan hasil observasi tentangberbagai tampilan format multimedia pada halaman web


Konfirmasi

Mengkomunikasikan

o Menyampaikan hasil tentang penerapan berbagaitampilan format multimedia pada halaman web ,kelompok lain merespon atau menanggapi dengan

responsif dan santuno Siswa mendengarkan umpan balik dan penguatan dari

guruo Siswa mengumpulkan hasil kerja kelompok.

Kegiatan Penutup




60 Menit


50/112


50



WaktuPenilaian

InstrumenPenilaian

Keterangan



2. Tanggung jawab

3. Peduli

4. Responsif

5. Santun

b. Penilaian Hasil


TeknikPenilaian

BentukPenilaian

Instrumen

Memahami formattampilan gambar

Testertulis

Isian Jelaskan langkah-langkah formattampilan gambar

Memahami formattampilan file audio

Testertulis

Isian Jelaskan langkah-langkah formattampilan file audio

Memahami formattampilan file videodan animasi

Testertulis Isian Jelaskan langkah-langkah formattampilan file video dan animasi

Memahami formattampilan gambardengan map

Testertulis

Isian Jelaskan langkah-langkah formattampilan gambar dengan map

Soal Tulis

1. Apa yang kamu ketahui tentang tag < img src=image1>2. Sebutkan 3 atribut elemen image3. Tuliskan sintag penulisan image pada html

Jawaban1. Element IMG befungsi untuk menampilkan gambar. Element ini tidak mempunyai tag

penutup dan mempunyai

2. attribute yaitu:

align, alt (teks alternatif jika gambar tidak tampil),

border, height, width, hspace (jarak kosong posisi horizontal,

vspace (jarak kosong posisi vertikal), src (lokasi dari gambar itu disimpan beserta nama

filenya).3. Sintaks:


51/112


51

alt="text"

border="pixel"

width="pixel"|"%"

height="pixel"|"%"hspace="pixel"

vspace="pixel"

src="uri">

Tes Praktek

Jawaban

latihan gambar

Buat program berikut dlm waktu 1 jp

ULANGAN PRAKTEK MULTIMEDIA 2ULANGAN PRAKTEK MULTIMEDIA 2ULANGAN PRAKTEK MULTIMEDIA 2ULANGAN PRAKTEK MULTIMEDIA 2

nama file gambar 1.jpg ********************************nama file gambar 2.jpg


52/112


52


Aspek Skor





SKOR MAKSIMAL

2.Test unjuk kerja


No.Nama

Siswa

Aspek pengamatan

Jum

SkorNilai Ket

Kerjasama

Mengkom

unikasikan

pendapat



Nilai = X 100


Skorperolehan

Skor Maksimal (20)


53/112


53


No. NamaSiswa

Aspek Penilaian

JumSkor Nilai Ket.



Gesture &

Penampilan


Nilai = X 100




Isi Laporan

1. Orisinalitas deskripsi

2. Mendeskripsikan mengenai penerapanberbagai tampilan format multimediapada halaman web

3. Struktur/logika penulisan disusundengan jelas sesuai metode yangdipakai

4. Bahasa yang digunakan sesuai EYD5. Gambar yang sesuai6. Penemuan terbaru



Jumlah

Skor perolehan

Skor Maksimal (24)


54/112


54


Sangat sesuai 4

Sesuai 3

Cukup 2

Kurang 1

Nilai = X 100


Kompetensi Dasar : .Alat : .Bahan : .Langkah Kerja : .Gambar kerja : .Analisa : .


Isi Laporan

1. Orisinalitas deskripsi

2. Alat bahan yang sesuai denganunjuk kerja3. Langkah kerja sesuai SOP4. Analisa sesuai



Bentuk Tulisan6. Kerapihan tulisan7. Ketepatan waktu penyelesaian

tugas

Jumlah


Sangat sesuai 4

Sesuai 3

Cukup 2

Kurang 1

Nilai = X 100

Skor perolehan

Skor Maksimal (32)

Skorperolehan

Skor Maksimal (28)


55/112


55



(NP)


Hasil Waktu NK

1 2 3 4 5 6

Bobot (%) 10 40 10 30 10

SkorKomponen

NK

I. Sumber Belajar







56/112


56



Mata Pelajaran :..................................................................................................

Kelas/Semester :....................................................................................................

Tahun Ajaran :....................................................................................................




menyelesaikan tugas








No

.

Nama

Siswa



1.

2.

3.

4.

5.

...



57/112


57


Nama Kelompok :.........................

Tanggal :


1. Isi

2. Organisasi




6. Kerapian

Total


58/112


58






Aspek/mater pokok : Hyperlink Halaman Web

A. Kompetensi Inti














B. Kompetensi Dasar






3.5 Memahami format kaitan pada halaman web4.5 Menyajikan format kaitan pada halaman web


Memahami anatomi link

Memahami format link antar isi pada satu halaman web

Memahami format link antar halaman web untuk membentuk sitemap

Memahami format target link, email dan telepon


59/112


59


Selama dan setelah proses pembelajaran, siswa memahami anatomi link

Selama dan setelah proses pembelajaran, siswa memahami format link antar isi padasatu halaman web

Selama dan setelah proses pembelajaran, siswa memahami format link antar halamanweb untuk membentuk sitemap

Selama dan setelah proses pembelajaran, siswa memahami format target link, emaildan telepon


Anatomi link

Format link antar isi pada satu halaman web

Format link antar halaman web untuk membentuk sitemap

Format target link, email dan telepon

Menggunakan LinkLink merupakan suatu gambar atau teks yang terkait dengan suatu alamat tertentu. Jika Linkdiklik maka dokumen HTML akan menuju ke alamat tersebut. Ditandai dengan Anchor, yaitu tag.Tag mempunyai dua atribut, yaitu href dan name.Atribut href digunakan jika sebuah anchor akan digunakan sebagai link,sedangkan atribut name digunakan jika anchor akan digunakan sebagai tujuan.

Link ke dokumen lain

Untuk membuat link/penghubung dengan target ke dokumen/halaman yang berbeda, andaharus membuat dokumen yang dituju/target dan disimpan dalam direktori tertentu, baik padadirektori yang sama atau berbeda dengan dokumen yang aktif sekarang. Untuk mencoba kitaakan membuat 3 file yang saling berhubungan. Sebelumnya supaya file-file yang dibuat terlihatrapi kita buat folder tabel terlebih.dahulu jadi nanti file link yang kita buat tersimpan di dalam folder tabel.

Contoh link-utama.html Halaman Utama

Ini adalah halaman utama.Klik, ke halaman utama.Klik, ke halaman satu.

Contoh link.hal1.html Halaman Satu

Ini adalah halaman utama.


60/112


60

Klik, ke halaman utama.Klik, ke halaman satu.

Link ke bagian tertentu dalam dokumen yang samaUntuk membuat link ke bagian tertentu dalam dokumen yang sama, harus diberikan namaanchor. Perbedaan dengan link yang berbeda dokumen adalah tujuan/target link, jika dalamdokumen yang sama yang dituju adalah nama anchor tetapi kalau dokumen yang beda yangdituju adalah nama file/dokumen yang bersangkutan. Untuk memberi nama anchor, atribut yangdipakai adalah NAME pada tag anchor dan untuk membuat link cukup memberikan tanda #setelah nama file dalam URL. Misal: Bab 1 atau dapat ditulis lengkap: Bab 1 dan untuk nama anchornya: Ada apa

dengan PHP?

Link ke alamat URL atau Website

Contoh: buatlah link sehingga hasil nya sbb:Untuk membuat link ke alamat URL adalah dengan menambahkan: http://nama_URL.Contoh:www.dikti.orgwww.smkn1-kbks.com

Jawab:Latihan6-1Link:

yahoogooglemateri

Link ke Alamat EmailLink email adalah membuat link pada teks, jika teks tersebut diklik maka akan menampilkanprogram pengiriman email yang terdapat pada komputer yang dipakai untuk mengakses data

atau teks tersebut secara otomatis. Untuk membuat link ke alamat email hanya menambahkanatribut mailto:alamat_email ke dalam tag Misalnya: Kirim email


61/112


61

Link File yang akan didownloadLink file dalam hal ini adalah apabila dikik pada teks tersebut maka proses selanjutnya adalahmendownload file yang tercantum pada dokumen tersebut. Format penulisannya adalah Misal: Download anti virus Download latihan Html Download MYSQL



Presentasi





waktu






dengan materi

60 Menit

Kegiatan Inti

Eksplorasi


o Siswa mengamati tayangan atau paparan disertai gambar

berbagai tampilan jenis link dan hasilnya terhadaphalaman web

Questioning/menanya

o Siswa dengan dibimbing guru diminta untuk bertanya

tentang tanyangan atau paparan berbagai tampilan jenis

link dan hasilnya terhadap halaman web

Mengeksplorasi

o Siswa dibagi beberapa kelompok dan berdiskusi tentangberbagaiAnatomi link Format link antar isi pada satu halaman web

Format link antar halaman web untuk membentuksitemap

Format target link, email dan telepon

600 Menit


62/112


62


Elaborasi



tentang berbagai jenis link dan hasilnya terhadap

halaman web



o Siswa memperlihatkan sikap cermat dan teliti dalammenyelesaikan masalah berbagai anatomi link

o Siswa memperlihatkan sikap cermat dan teliti dalammenyelesaikan masalah berbagai format link antar isipada satu halaman web

o Siswa memperlihatkan sikap cermat dan teliti dalammenyelesaikan masalah berbagai jenis format link antarhalaman web untuk membentuk sitemap

o Siswa memperlihatkan sikap cermat dan teliti dalammenyelesaikan masalah berbagai jenis format target link,email dan telepon

o Siswa mencoba membuat laporan hasil observasi tentang

berbagai jenis link dan hasilnya terhadap halaman web


Konfirmasi

Mengkomunikasikan

o Menyampaikan hasil tentang penerapan berbagai jenislink dan hasilnya terhadap halaman web, kelompok lainmerespon atau menanggapi dengan responsif dan santun



Kegiatan Penutup




60 Menit


63/112


63


No Aspek yang dinilaiTeknik

Penilaian

Waktu

Penilaian

Instrumen

Penilaian

Keterangan



2. Tanggung jawab

3. Peduli

4. Responsif

5. Santun

b. Penilaian Hasil


TeknikPenilaian

BentukPenilaian

Instrumen

Memahami anatomilink

Testertulis

Isian Jelaskan tentang anatomi link

Memahami formatlink antar isi padasatu halaman web

Testertulis

Isian Jelaskan langkah-langkah format linkantar isi pada satu halaman web

Memahami formatlink antar halaman

web untukmembentuk sitemap

Testertulis

Isian Jelaskan langkah-langkah format linkantar halaman web untuk membentuk

sitemap

Memahami formattarget link, email dantelepon

Testertulis

Isian Jelaskan langkah-langkah formattarget link, email dan telepon


64/112


65/112


65

Ini adalah teks bagian kedua dalam dokumen ini.

Ini adalah teks bagian ketiga dalam dokumen ini.

Ini adalah teks bagian keempat dalam dokumen ini.Ini adalah teks bagian keempat dalam dokumen ini.
Ini adalah teks bagian keempat dalam dokumen ini.


Ini adalah teks bagian kelima dalam dokumen ini.

Ini adalah teks bagian keenam dalam dokumen ini.Ini adalah teks bagian keenam dalam dokumen ini.Ini adalah teks bagian keenam dalam dokumen ini.

Ini adalah teks bagian keenam dalam dokumen ini.Ini adalah teks bagian keenam dalam dokumen ini.Ini adalah teks bagian keenam dalam dokumen ini.Ini adalah teks bagian keenam dalam dokumen ini.

kebagian pertama


Aspek Skor





SKOR MAKSIMAL


66/112


66

2.Test unjuk kerja


No.Nama

Siswa

Aspek pengamatan

Jum

SkorNilai Ket

Kerjasama

Mengkom

unikasikan

pendapat



Nilai = X 100



No.Nama

Siswa

Aspek PenilaianJum

SkorNilai Ket.



Gesture &

Penampilan

Skor perolehan

Skor Maksimal (20)


67/112


67


Nilai = X 100

Kriteria NilaiA = 90-100 : Baik sekaliB = 80-89 : BaikC = 75-79 : Cukup

D = < 75 : Kurang



Isi Laporan

1. Orisinalitas deskripsi2. Mendeskripsikan mengenai

penerapan berbagai jenislink dan hasilnya terhadaphalaman we

3. Struktur/logika penulisandisusun dengan jelassesuai metode yang dipakai

4. Bahasa yang digunakansesuai EYD

5. Gambar yang sesuai6. Penemuan terbaru

Bentuk Tulisan

7. Sesuai kaidah yangditetapkan (Kertas, Spasi,Font)

8. Kerapihan ketikan sesuaidengan SOP

Jumlah


Sangat sesuai 4

Sesuai 3

Cukup 2

Kurang 1

Nilai = X 100

Skor perolehan

Skor Maksimal (24)

Skor perolehanSkor Maksimal (32)


68/112

RPP Pemograman Web

Documents