RPP - RPL - KD 3.2. Menerapkan Format Teks Pada Halaman Web - HTML

RENCANA PELAKSANAAN PEMBELAJARAN (RPP) A.

Identitas Sekolah Satuan Pendidikan Mata Pelajaran Program keahlian Kelas/Semester Tahun Pelajaran Alokasi Waktu Materi

: : : : : : :

SMA Negeri 2 Solok Pemrograman Web dan Perangkat Bergerak Teknik Komputer dan Informatika XI / 1 2018/2019 12 x 45 menit Menerapkan Format Teks pada Halaman Web

B.

Kompetensi Inti 1. Menghayati dan mengamalkan ajaran agama yang dianutnya. 2. Menghayati dan Mengamalkan perilaku jujur, disiplin,tanggungjawab, peduli (gotong royong, kerjasama, toleran, damai), santun, responsif dan proaktif dan 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 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 dengan pengembangan dari yang dipelajarinya di sekolah secara mandiri, dan mampu melaksanakan tugas spesifik di bawah pengawasan langsung. langsung.

C.

Kompetensi Dasar dan Indikator 3.2. Menerapkan Format Teks pada Halaman Web 3.2.1. Menjelaskan struktur dasar pemrograman web dengan HTML; 3.2.2. Menjelaskan berbagai versi HTML 3.2.3. Menjelaskan tata cara penulisan script HTML dengan berbagai editor; 3.2.4. Menjelaskan parameter-prameter dalam HTML; 3.2.5. Menjelaskan tag-tag dalam HTML; 3.2.6. Menjelaskan berbagai tag HTML untuk memformat teks; 3.2.7. Menerapkan format teks dalam script HTML; 4.2. Membuat Kode HTML untuk untuk Menampilkan Teks dalam Format Tertentu Tertentu pada Halaman Web 4.2.1. Merancang program tampilan format teks dalam halaman web; 4.2.2. Membuat program halaman web yang menampilkan teks dengan berbagai format; 4.2.3. Menguji hasil tampilan halaman web dengan berbagai format teks;

D.

Tujuan Pembelajaran 1. Melalui tanya jawab, peserta didik dapat menjelaskan struktur dasar pemrograman web dengan HTML; 2. Melalui penugasan, peserta didik mampu menjelaskan versi HTML; 3. Melalui praktek, peserta didik mampu menjelaskan tata cara penulisan script HTML dengan berbagai editor; 4. Melalui praktek, peserta didik mampu menjelaskan parameter-prameter parameter-prameter dalam HTML; 5. Melalui praktek, peserta didik mampu menjelaskan tag-tag dalam HTML;

6.

Melalui praktek, peserta didik mampu menjelaskan berbagai tag HTML untuk memformat teks; 7. Melalui praktek, peserta didik mampu menerapkan format teks dalam script HTML; 8. Melalui praktek, peserta didik mampu merancang program tampilan format teks dalam halaman web; 9. Melalui praktek, peserta didik mampu membuat program halaman web yang menampilkan teks dengan berbagai format; 10. Melalui praktek, peserta didik mampu menguji hasil tampilan halaman web dengan berbagai format teks; E.

Materi Pembelajaran 1. Struktur dasar HTML; 2. Versi HTML; 3. HTML, head, tittle, body; 4. Tag, syntax, option; 5. Fungsi berbagai tag dalam HTML; 6. Format teks dalam HTML;

F.

Metode Pembelajaran 1. Pendekatan : Scientifict Learning  2. Model : Discovery Learning 3. Metode : Ceramah, tanya jawab dan penugasan

G.

Langkah-Langkah Pembelajaran Langkah-Langkah Pembelajaran 1. Kegiatan Awal - Guru mengawali kegiatan pembelajaran dengan mengucapkan salam pembuka dan mempersilahkan peserta didik berdoa. Apersepsi - Guru mengabsen dan memeriksa kehadiran Peserta didik. - Mengkondisikan peserta didik agar siap mengikuti pelajaran - Menyampaikan tujuan pembelajaran yang akan dicapai. - Menyampaikan metode pembelajaran yang akan digunakan - Menyampaikan teknik penilaian yang akan digunakan. Motivasi Memberi motivasi kepada peserta didik agar mereka semangat mengikuti materi dengan baik 2. Kegiatan Inti A. Pemberian Stimulus - Guru menayangkan beberapa halaman web; - Siswa diminta mengamati halaman web tersebut; - Setelah melihat halaman web tersebut, siswa diberi pertanyaan : “Apa hubungan gambar dengan pelajaran hari ini..?” - Guru menampilkan kode sumber HTML web dengan mengklik “view page source” - Guru memfasilitasi aktifitas siswa dengan memberikan LKPD;

Waktu

10 Menit

5 Menit

10 Menit

B. Identifikasi Masalah

Guru membantu siswa mencermati langkah-langkah memformat teks pada tampilan web yang didemontrasikan oleh guru;

C. Pengumpulan Data Siswa mencoba mempraktekkan penggunaan format dan Informasi teks pada tampilan web; D. Pembuktian - Guru menghubungkan hasil praktek dengan bahan ajar yang dibagikan; - Guru menyajikan beberapa form halaman HTML, dan mengujikan kepada siswa untuk membuat form tersebut agar terlihat seberapa jauh pemahaman siswa memahami konsep dasar HTML; E. Menarik - Guru menugaskan Peserta didik untuk menyajikan Kesimpulan penjelasan mengenai struktur dasar HTML - Guru dan peserta didik membuat kesimpulan mengenai HTML - Peserta didik mempresentasikan hasil memformat teks pada tampilan web. 3. Kegiatan Penutup - Guru memberikan konfirmasi dan penguatan terhadap kesimpulan dari hasil pembelajaran. - Guru memberikan evaluasi dan menyuruh Peserta didik secara individu untuk mengerjakannya. - Guru mengakhiri kegiatan belajar dengan memberikan pesan pada Peserta didik untuk mempelajari materi berikutnya. - Guru memberikan gambaran materi yang akan dipelajari minggu depan - Guru menyuruh salah satu Peserta didik untuk memimpin doa penutup. H.

Media, Alat, dan Sumber Pembelajaran 1. Media a. Power Point b. Internet 2. Alat/Bahan a. Laptop b. LCD c. Whiteboard d. Komputer e. Software 3. Sumber Belajar Buku Panduan HTML, internet, video tutorial

I.

Penilaian a. Penilaian Sikap 1) Instrumen dan Rubrik Penilaian 2) Indikator Penilaian Sikap b. Penilaian Pengetahuan 1) Kisi-kisi dan soal 2) Opsi Jawaban 3) Instrumen dan Rubrik Penilaian

30 Menit 15 Menit

10 Menit

5 Menit

5 Menit

c. Penilaian Keterampilan 1) Instrumen dan Rubrik Penilaian 2) Indikator Penilaian Keterampilan J.

Tes 1. Tes tertulis bentuk uraian Kisi kisi soal Kompetensi IPK Dasar 3.2. Menerap 3.2.1. Menjelaskan kan struktur dasar Format pemrograman web Teks dengan HTML; pada Halaman 3.2.2. Menjelaskan Web berbagai versi HTML 3.2.3. Menjelaskan tata cara penulisan script HTML dengan berbagai editor;

3.2.4. Menjelaskan tag-tag dalam HTML;

Jenis Soal 1. Peserta didik dapat Tes tertulis menjelaskan struktur dasar pemrograman 2. Peserta didik dapat Indikator Soal









menjelaskan versi HTML Peserta didik dapat menjelaskan tata cara penulisan script HTML Peserta didik dapat menjelaskan tag dalam HTML

Soal

Jelaskan struktur dasar pemrograman (25) Jelaskan versi HTML (25) 3. Jelaskan tata cara penulisan script HTML (25) 4. Jelaskann tag dalam HTML (25)

Kunci jawaban ! Rubrik Nilai Pengetahuan No

Nama Peserta didik

Skor setiap nomor soal No.1 No.2 No.3 No.4

Nilai

1 2 3 Pedoman penskoran No. 1

2

3

Aspek yang dinilai Ketepatan jawaban

Kelengkapan jawaban

Penyusunan kalimat

Skor/Keterangan 1 = tidak tepat 2 = kurang tepat 3 = tepat 1 = tidak lengkap 2 = kurang lengkap 3 = lengkap 1 = tidak tepat 2 = kurang tepat 3 = tepat

Skor maksimal 5

5

5

4

Pengembangan Pengembangan materi

1 = hanya berdasarkan buku 2 = berdasarkan buku dan hasil observasi 3 = berdasarkan buku, lapangan la pangan dan sumber lainnya Skor maksimal per soal

10

25

Pedoman penilaian : Jika penjelasan benar skor maksimum 25 Nilai akhir merupakan penjumlahan skor x 4 = 100 2.

Bentuk dan instrumen penilaian: Penilaian Sikap ( terlampir )

No 1

Aspek yang dinilai Sikap

2

Pengetahuan

3

Keterampilan

Penilaian Pengetahuan (Tes Tertulis) Penilaian Keterampilan ( Penilaian projek ) Teknik Penilaian Waktu Penilaian Pengamatan Selama pembelajaran dan saat diskusi Pengamatan dan Penyelesaian tugas individu dan Tes tertulis Kelompok Pengamatan

Penyelesaian tugas (baik individu maupun kelompok) dan saat diskusi

Mengetahui Kepala SMAN 2 Solok

Padang, September 2018 Guru Mata Pelajaran

Dra. NURBAITI. J NIP. 19660120 199203 2 003

AFDHAL BASER, S.Pd NIP. 19850311 200901 1 003

K.

Materi Ajar A. Struktur dasar HTML; HTML (HyperText (HyperText Markup Language)  Language)   adalah salah satu bahasa pemprograman web design dan juga biasa di sebut script untuk menyusun dokumen-dokumen Web. Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag yang memerintahkan web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan. Struktur dasar HTML

-

Dari struktur dasar HTML di atas dapat dijelaskan sebagai berikut: a) Tag Adalah teks khusus (markup (markup)) berupa dua karakter "<" dan ">", sebagai contoh  adalah  adalah tag dengan nama body. Tag harus ditulis secara berpasangan, berpasangan, yang terdiri atas tag pembuka tag penutup (ditambahkan karakter "/" setelah karakter "<") Sebagai contoh  ini  ini adalah tag pembuka isi pembuka isi dokumen HTML, dan  ini  ini adalah tag penutup isi penutup isi dokumen d okumen HTML.  

b)

Element Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. penutup. Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser digunakan element title, title, dimana:  ini  ini adalah tag penutup judul dokumen d okumen HTML Tag-tag yang ditulis secara berpasangan pada suatu element HTML, tidak boleh saling tumpang tindih dengan pasangan tag-tag lainnya.

Contoh penulisan tag-tag yang benar

Catatan : Jika penulisan script salah, maka script tidak terbaca sempurna (ERROR) sehingga dapat mengganggu mengganggu penampilan dan dinamika web itu sendiri c)

Attribute Attribute mendefinisikan property property dari suatu element HTML, yang terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut:

Secara umum nilai attribute harus berada dalam tanda petik satu atau dua. Sebagai contoh, untuk membuat warna teks menjadi kuning dan latarbelakang halaman web menjadi hitam, penulisannya adalah B.

Versi HTML; Versi HTML1 Ini adalah versi awal html, pada masa ini html hanya bisa digunakan untuk membuat: heading, hypertext, cetak tebal (bold), cetak miring (italic), list dan paragraph. Pada versi ini sebuah web hanya bisa berisi satu atau dua gambar saja. saj a. Karena minimnya penggunaan gambar gambar maka biasanya website dahulu hanya berisi teks saja. Versi HTML2 HTML2 dirilis pada tanggal 14 Januari 1996 dengan beberapa penambahan fitur baru salah satunya adalah fitur form. Versi HTML ini dapat dikatakan sebagai awal untuk membuat sebuah web iinteraktif. nteraktif.      

-

-

-

Versi HTML3 Dirilis pada tanggal 18 Desember 1997 dengan tetap konsisten menambahkan fitur terbarunya salah satu fitur yang terkenal pada masa ini adalah fitur tabel didalam paragraph. HTML3 dikenal juga dengan HTML+ karena banyak penambahan fitur yang lebih fleksibel untuk membuat web yang intraktif. HTML3.2 Merupakan perkembangan dari HTML3 yang menambahkan sedikit kekurangan atau kesalahan pada HTML3. HTML4 Dirilis pada tahun 1999 tepatnya tanggal 24 Desember. Dengan menambahkan fitur seperti imagemaps, link dan sebagainya. Pada masa ini web sudah semakin interaktif dan lebih mementingkan tampilan yang menarik serta nyaman kepada pengguna. HTML5 Ini adalah versi html yang diperbaharui hingga sekarang yang secara resmi dirilis pada tahun 2009 yang menjadi standar terbaru sebuah web saat ini. HTML5 merupakan proyek kerjasama antara W3C (World Wide Web Consurtium) dan WHATG (Web Hypertext Application Technology Group).   

-

C.

HTML, head, tittle, body; 1) Element HTML Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML. Sintaks: 2)

Element HEAD Merupakan kepala dari dokumen HTML. Tag  dan  dan tag  terletak  terletak di antara tag  dan  dan tag . Sintaks:

3)

Element TITLE Merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela browser. Tag  terletak  terletak di antara tag  dan  dan tag .

Sintaks: 4)

Element BODY Element ini untuk menampilkan isi dokumen HTML. Tag dan tag terletak di bawah tag dan tag . Element BODY mempunyai attributeattribute yang menspesifikasikan khususnya warna dan latarbelakang dokumen yang akan ditampilkan pada browser. Sintaks: text bgcolor background link alink vlink

: : : : : :

memberikan warna pada teks memberikan warna pada latarbelakang dokumen HTML memberikan latarbelakang dokumen HTML dalam bentuk gambar memberikan warna untuk link memberikan warna untuk link yang sedang aktif memberikan warna untuk link yang telah dikunjungi.

D.

Tag, syntax, option; a) Tag Teks khusus (markup (markup)) berupa dua karakter "<" dan ">", sebagai contoh  adalah  adalah tag dengan nama body. b) Syntax Perintah khusus untuk c) Option Pilihan

E.

Fungsi berbagai tag dalam HTML; Berikut ini saya akan menyebutkan berbagai macam kode HTML dasar yang perlu diketahui. 1.
Turun satu baris kebawah(enter) / Kursor dan kalimat dibelakangnya turun 1 baris kebawah 2. isi isi tulisan tulisan Membuat tulisan menjadi sedikit lebih besar 3. isi tulisan purple 4.   Menambah 1 spasi karena ada kemungkinan penggunaan 2 spasi tidak akan terbaca pada beberapa beberapa engine blog 5. isi tulisan pada no. 2 tidak sesuai 6. isi isi Mengganti ukuran tulisan. Bisa digunakan apabila kode

tulisan tulisan atau isi isi tulisan tulisan 7.

8. 9. 10. 11.

isi isi tulisan tulisan isi isi tulisan tulisan isi isi tulisan tulisan

isi 
isi tulisan
 tulisan

12. isi isi tulisan tulisan 13. isi isi tulisan tulisan F.

pada no. 2 tidak sesuai dengan d engan keinginan kita Kursor dan kalimat dibelakangnya turun satu setengah baris kebawah Membuat garis bawah tulisan Membuat tulisan menjadi sedikit lebih kecil Membuat garis mencoret pada tulisan Membuat tulisan tetap pada keadaan yang kita inginkan, misalnya untuk urutan berjejer kebawah Membuat tulisan berada di tengah halaman Membuat tulisan tampak berkedip

Format teks dalam HTML; Nama Tag Basic