SILABUS MATA PELAJARAN
|
Nama Sekolah Bidang Keahlian Kompetensi Keahlian Kelas/Semester Mata Pelajaran Standar Kompetensi Durasi (Waktu) |
: : : : : : : |
SMK Islam Madani Teknologi Informasi dan Komunikasi Rekayasa Perangkat Lunak XII / Ganjil Pemrograman Web Tingkat Dasar 5. Web Fundamental 14 x 200 Menit |
|
Kompetensi Dasar |
Indikator Pencapaian Kompetensi |
Materi Pokok |
Alokasi Waktu (JP) |
Kegiatan Pembelajaran |
Penilaian |
|
5.1. Membuat struktur dokumen dengan bahasa
HTML
|
- Mengetahui dan mampu membuat dokumen
HTML yang dilengkap head & title, - Mengetahui cara dan membuat body pada
dokumen, menambahkan teks dan paragraf sesuai kebutuhan. |
- Apa itu HTML - HTML Tag - HTML Element - Web Browser dan Editor - HTML Page Structure - HTML Version - Penjelasan fungsi - Pendeklarasian <!DOCTYPE> - Penulisan HTML dengan HTML Editor - <html>, <head>,
<body>, <h1>, <h2>, <p>,
<b>, <i>, <u>, <font ….> - Membuat Dokumen Baru di editor. - Menyimpan dan membuka dokumen - Menampilkan file dalam browser |
200 Menit |
- Menjelaskan pembuatan dokumen HTML,
dilengkapi dengan head dan title. - Menjelaskan pembuatan body pada dokumen,
menambahkan teks dan paragraph sesuai kebutuhan. |
- Pengamatan - Tes Tulis & praktik - Tanya Jawab |
|
5.2.
Membuat struktur
dokumen dengan bahasa HTML - Lanjutan |
- Mampu melaksanakan cara membuat format
dokumen web yang menarik dan mudah di baca, - Mampu melaksanakan cara menampilkan dan
menambahkan simbol khusus pada browser/platform, dan melaksanakan cara
menyimpan dokumen sesuai dengan penamaan standar. |
- Link ke File - Link ke Web - Email - Define an image - Define an image-map - Define a clickable area inside an
image-map - <a href = url> - Penggunaan “target” - Penggunaan “mailto” - <img src = ..> - Penggunaan “alt” - Penggunaan “width” dan - “height” - Penggunaan “<map>” - Penggunaan “<area>” |
200 Menit |
- Menjelaskan cara membuat format dokumen
menarik dan mudah di baca - Menjelaskan cara menambahkan dan
menampilkan simbol khusus pada browser/platform secara tepat - Menjelaskan cara menyimpan dokumen
sesuai dengan penanaman standar |
- Pengamatan - Tes Tulis - Tanya Jawab - Pekerjaan Rumah |
|
5.3.
Memformat
dokumen dan menambahkan obyek |
- Mampu memformat teks untuk memenuhi
persyaratan penyajian pengguna, - Mampu memasang background warna atau
gambar yang sesuai / menurut persyaratan pengguna (logo perusahaan, buku
pedoman perusahaan), - Mampu membuat posisi setiap elemen pada
halaman di buat lebih menarik. |
- Table Without Border - Table Header - Table with Caption - Span - Cell Padding - Cell Spacing - Membuat List - Membuat Layout - (header, Content, - Footer) dengan menggunakan <div> - Penjelasan tag table meliputi <table>, <tr>, <td>,
<th>, <caption>, <colgroup>,
<col>, <thead>, <tbody>, <tfoot> - <div>, <ul>, <li> |
200 Menit |
- Menjelaskan cara format teksuntuk
memenuhi persyaratan penyajian pengguna - Menjelaskan cara memasang background
warna atau gambar yang sesuai menurut persyaratan pengguna (logo perusahaan,
buku pedoman perusahaan) - Menjelaskan cara membuat posisi setiap
elemen pada halaman di buat lebih menarik |
- Pengamatan - Tes Tulis - Tanya Jawab - Pekerjaan Rumah |
|
5.4.
Memformat
dokumen dan menambahkan obyek - Lanjutan |
- Mampu membuat inden teks dan list
(ordered, unordered dan nested), - Mampu menyisipkan gambar (GIF, JPEG atau
embedded image) dan memformat dokumen sesuai persyaratan. |
- Color Value Color - Names - Inline Style, Internal Style, External
Style - Warna dengan RGB(..,..,…) - Warna dengan “Color Hex” - Warna dengan menggunakan nama warna - Menjelaskan penggunaan stylel dalam HTML
element - Menggunakan <style> element pada <head> - section - Menggunakan External CSS - contoh stye : color, - background-color, - fontfamily, font-size |
200 Menit |
- Menjelaskan cara membuat inden teks dan
list (ordered, unordered dan nested) di buat - Menjelaskan cara menyisipkan gambar
(GIF, JPEG atau embedded image) dan dokumen di format sesuai persyaratan |
- Pengamatan - Tes Tulis - Tanya Jawab - Pekerjaan Rumah |
|
5.5.
Membuat tabel |
- Mampu membuat tabel untuk dasar konten
halaman sesuai site map dokumen dan posisi pada halaman, - Mampu menset lebar table dan format sel
menurut kebutuhan site map dokumen, - Mampu membuat border pada table dan
beberapa nested table. |
- <form>, <input tye =..> - Text field - Password Field - Radio Button - CheckBox - Button - Drop down - TextArea - Submit dan Reset button - Menjelaskan penggunaan - <input
checked="checked"> - <input readonly="readonly"> - <input
disabled="disabled"> - <option selected="selected"> |
200 Menit |
- Menjelaskan cara membuat tabel untuk
dasar konten halaman sesuai site map dokumen dan posisi pada halaman - Menjelaskan cara menset lebar table dan
format sel menurut kebutuhan site
map dokumen - Menjelaskan cara membuat borders pada
table dan beberapa nested table |
- Pengamatan - Tes Tulis - Tanya Jawab - Pekerjaan Rumah |
|
5.6.
Membangkitkan
link |
- Mampu melengkapi dokumen dengan link
pada teks dan gambar, - Mampu membuat link ke situs FTP atau
HTTP, - Mampu membagi sebuah gambar menjadi
bagian yang dapat di klik menggunakan tag HTML sebagai link ke halaman lain. |
- CSS Syntax - CSS Comment - CSS “Id” dan “Class” - CSS Background - CSS Text - CSS Font - CSS Link - CSS List - CSS Table - Menjelaskan syntax CSS meliputi “Selector”, “Declaration”, “Property”, “Value” - Penggunaan atribut “#” - Penggunaan atribut “.” - Menerapkan CSS dengan metode “ID” dan
“CLASS” meliputi penggunaan Text, Font, Color, Link, List dan Table |
200 Menit |
- Menjelaskan cara melengkapi dokumen
dengan link pada teks dan gambar. - Menjelaskan cara membuat link ke situs
FTP atau HTTP - Menjelaskan cara membagi sebuah gambar
menjadi bagian yang dapat di klik menggunakan tag HTML sebagai link ke
halaman lain. |
- Pengamatan - Tes Tulis - Tanya Jawab - Pekerjaan Rumah |
|
5.7.
Menguji dan
menyimpan dokumen |
- Mampu menguji link-link, warna dan
format halaman di uji menggunakan platform/ browser yang berbeda, - Mampu mengukur waktu akses dokumen untuk
memperoleh waktu akses yang optimal, - Mampu menyimpan dokumen dalam
folder/direktori yang tepat untuk akses pengguna. |
- Penjelasan pengertian - Multimedia - Browser Support - Video Format - Sound Format - Penggunaan <object> Element <param name=”” value=””> - <embed scr=””> - <video> … </video> |
200 Menit |
- Menjelaskan cara menguji link-link,
warna dan format halaman di uji menggunakan platform/browser yang berbeda - Menjelaskan cara mengukur waktu akses
dokumen untuk memperoleh waktu akses yang optimal, - Menjelaskan cara menyimpan dokumen dalam
folder/direktori yang tepat untuk akses pengguna. |
- Pengamatan - Tes Tulis - Tanya Jawab - Pekerjaan Rumah |
|
5.8.
Integrasi html
dan Javascript |
- Peserta belajar memahami pembuatan
halaman web dengan menggunakan Javascript - Peserta Belajar memahami penggunaan Variable, aritmatic operator dan pencetakan text atau variable |
- Penjelasan penggunaan <script> elament dalam <head> section - Contoh pembuatan Javascript dalam extension “.js” - Pemanggilan file javascript (“.js”) kedalam HTML file - Declarasi Variable Javascript Aritmathic (“+”, “- “, “*”, “/”, “%”, “++”, “—“ - Document.write - Alert |
200 Menit |
- Penjelasan apa itu Javascipt, Fungsi Javascript,
dan bagaimana memulai penulisan JavaScript - Penjelasan jenis Variable, Aritmatic
Operator, Sysmbol - Pencetakan nilai pada halaman web |
- Pengamatan - Tes Tulis - Tanya Jawab - Pekerjaan Rumah |
|
5.9.
Menggunakan
function pada Javascript |
- Peserta Belajar mampu membuat javascript
dengan menggunakan Function |
- Function Syntax - Function with - Parameter - Function with a - Return Value |
200nit |
- Membuat Function tanpa parameter - Membuat Function dengan parameter - Memanggil Function tanpa parameter - Memanggil Fanction dengan Parameter - Memanggil Function dengan pengembalian nilai |
- Pengamatan - Tes Tulis - Tanya Jawab - Pekerjaan Rumah |
|
5.10.
Menggunakan
event attribut pada Javascript |
- Peserta Belajar mampu menggunakan event
Attribut pada javascript |
- onload - onunload - onclick - onchange - onmouseover - onmouseout - onmousedown - onmouseup - onfocus - onkeydown - onkeyup |
200 Menit |
- Menjelaskan Pengguaan - Event untuk element HTML seperti “button”, “text”, “dropdown”, “check”, “radio” - Berikan Penugasan untuk penerapan |
- Pengamatan - Tes Tulis - Tanya Jawab - Pekerjaan Rumah |
|
5.11.
Menggunakan condition
dan comparison pada Javascrtipt |
- Peserta Belajar mampu menggunakan
Condition dan Comparison |
- Penjelasan operasi perbandingan “==”,
“===”, “!=”, “!==”, “>”, “<”, “>=”, “<=” - Menjelaskan syntax IF - If statement - If .. else statement - If .. else if … else … statement switch statement |
200 Menit |
- Comparison Operator - Condition Statement |
- Pengamatan - Tes Tulis - Tanya Jawab - Pekerjaan Rumah |
|
5.12.
Javascript
looping |
- Peserta belajar mampu menggunakan
Pengulangan dalam Javascript |
- for - for (x in y) - while - do .. while - break |
200 Menit |
- Menjelaskan perbedaan penggunaan for
dengan for / in - Menjelaskan penggunaan while dengan do
.. while - Penggunaan break dalam loop |
- Pengamatan - Tes Tulis - Tanya Jawab - Pekerjaan Rumah |
|
5.13.
Javascript Array |
- Peserta belajar mampu menggunakan variable
Array dalam javascript |
- Pendeklarasian variable Array - Penggunaan Variable Array |
200 Menit |
- Penerapan Array kedalam table - Penerapan Array kedalam Dropdown |
- Pengamatan - Tes Tulis - Tanya Jawab - Pekerjaan Rumah |
|
5.14.
Javascript
output & statement |
- Peserta Belajar mampu menggunakan
Javascript Output dan Javascript Statement |
- Penggunaan “getElementById” - Penggunaan “innerHTML” - Pengguaan “value” |
200 Menit |
- Penggunaan ID pada object html - Pemberian nilai pada object html sesuai
ID - Pengambilan nilai pada object html sesuai
ID |
- Pengamatan - Tes Tulis - Tanya Jawab - Pekerjaan Rumah |
Password: webdasar.farihinmuhamad
