SILABUS MATA KULIAH

Program Studi : Teknik Elektro

Kode Mata Kuliah : TKE 214
Nama Mata Kuliah : Pemrograman Web
Jumlah SKS : 2 SKS
Semester :3
Mata Kuliah Pra Syarat : Dasar Pemrograman Komputer
Deskripsi Mata Kuliah : Dunia internet semakin lama semakin berkembang karena manusia selalu mencari terobosan baru. Meskipun pada awalnya
internet hanya digunakan untuk menampilkan data-data statis, namun dalam perkembangan sebuah sistem informasi jarak
jauh yang memberikan hak akses khusus bagi anggotanya sudah banyak yang menggunakannya. Matakuliah ini membahas
tentang perkenalan desain web yang lebih banyak pada data statis sebagai pengantar pengelolaan web yang dinamis.

Standar Kompetensi
Mahasiswa mengenal internet dan dapat mengetahui, memahami, menguasai dan mampu mengimplementasi teori, konsep dan prinsip pemrograman website
dengan teknologi HTML, CSS dan Java Script

Wakt Alat/Bahan/S
Kompetensi Dasar Indikator Pengalaman Pembelajaran Materi Ajar Penilaian
u umberBelajar
Memahami dan Setelah mengikuti kuliah ini, - Memperkenalkan definisi 1. Pengantar HTML 100’ OHP, Kuis,
memiliki wawasan mahasiswa diharapkan mampu: halaman web - Definisi halaman Projector In Latihan,
tentang pengantar - menguasai cara-cara - Menjabarkan cara kerja Web Focus, Simulasi
HTML dan pengerjaan HTML sebagai halaman web - Cara kerja halaman Laptop.
Pembuatan Halaman tahapan awal. - Menunjukkan tampilan web
Web - Mengerjakan desain awal HTML - Tampilan HTML
halaman web - Mendemokan pembuatan - Pembuatan HTML
HTML dengan Text Editor dengan Text Editor
- Menerangkan Tag-Tag 2. Pembuatan Halaman
yang harus ada di setiap Web
halaman HTML - Tags yang harus ada
- Menerangkan tentang di setiap halaman
Paragraph dan ganti baris HTML
- Menerangkan heading - Paragraphs dan
dalam HTML Ganti baris
- Headings
 Wakt Alat/Bahan/S
Kompetensi Dasar Indikator Pengalaman Pembelajaran Materi Ajar Penilaian
u umberBelajar
- Peeking at Other
Peoples Pages
Memahami dan Setelah mengikuti kuliah ini, - Menunjukkan linking ke 1. Linking ke Halaman 100’ OHP, Kuis,
memiliki wawasan mahasiswa diharapkan mampu: halaman lainnya dan Web yang Lain Projector In Latihan,
tentang Linking ke - Menguasai cara-cara linking diantara halaman sendiri - Linking ke Halaman Focus, Simulasi
halaman web yang halaman web - Mendemokan publishing lainnya Laptop.
lain dan publishing - Mempublikasikan halaman halaman HTML dalam - Linking diantara
halaman HTML web ke disk dan internet Disk dan Internet Halaman Sendiri
- Menjelaskan transfer - Relative Addresse
halaman web ke web 2. Publishing Halaman
server HTML
- Mendemokan peletakan - Publishing Halaman
halaman web dalam Web di Disk
Intranet - Setting Up ke
- Menunjukkan ujicoba Internet Web Site
halaman web - Transferring
Halaman ke Web
Server
- Peletakan Halaman
Web dalam Intranet
- Uji coba Halaman
Web
Memahami dan Setelah mengikuti kuliah ini, - Menerangkan format- 1. Format Text dan 100’ OHP, Kuis,
memiliki wawasan mahasiswa diharapkan mampu: format text dan alignment Alignment Projector In Latihan,
tentang format text, - Menguasai cara-cara format - Menunjukkan, - Emphasizing Text Focus, Simulasi
alignment, kontrol tulisan dan alignment. menjabarkan kontrol font dengan Boldface dan Laptop.
font dan karakter - Menguasai kontrol font dan dan karakter spesial Italics
spesial karakter spesial - Format Character
- Alignment Text
2. Kontrol Font dan
Kaeakter Spesial
- Ukuran Font dan
Warna
 Wakt Alat/Bahan/S
Kompetensi Dasar Indikator Pengalaman Pembelajaran Materi Ajar Penilaian
u umberBelajar
- Pemilihan Tipe
Tampilan
- Karakter Spesial
- Future of Web Fonts
Memahami dan Setelah mengikuti kuliah ini, - Menerangkan deret tulisan 1. Deret Text dalam Lists 100’ OHP, Kuis,
memiliki wawasan mahasiswa diharapkan mampu: dalam list - Tiga tipe list dalam Projector In Latihan,
tentang deret tulisan - Menguasai format-format - Menerangkan tiga tipe list HTML Focus, Simulasi
dalam list dan intra- dan tipe list dalam HTML dalam HTML - Lists Within Lists Laptop.
page serta email - Menguasai penggunaan - Menunjukkan kemampuan 2. Intra-Page dan E-mail
links intra-page dan email linking list dalam list Links
- Mendemokan penggunaan - Penggunaan Named
intra-page dan link email Anchors
- Linking ke bagian
khusus di halaman
lain
- Linking alamat E-
mail ke halaman
Web
Memahami dan Setelah mengikuti kuliah ini, - Menunjukkan cara 1. Peletakan Images 100’ OHP, Kuis,
memiliki wawasan mahasiswa diharapkan mampu: meletakkan image dalam dalam Halaman Web Projector In Latihan,
tentang cara-cara - Menguasai peletakan image halaman web - Peletakan Image Focus, Simulasi
peletakan image dalam halaman web - Menunjukkan cara dalam Halaman Web Laptop.
dalam halaman web - Menguasai cara-cara pelabelan image - Pelabelan Image
dan pembuatan web pembuatan image halaman - Menunjukkan metode - Horizontal Image
page image web horizontal dan vertical Alignment
image alignment - Vertical Image
- Menunjukkan image yang Alignment
berhubungan - Images yang
- Mendemokan pemilihan berhubungan
graphic software 2. Pembuatan Web Page
- Memperkenalkan dasar Images
grafis - Pemilihan Graphics
- Menerangkan persiapan Software
 Wakt Alat/Bahan/S
Kompetensi Dasar Indikator Pengalaman Pembelajaran Materi Ajar Penilaian
u umberBelajar
photographic images - Dasar Graphics
- Menerangkan pembuatan - Persiapan
banner dan button Photographic Images
- Menerangkan pengurangan - Controlling JPEG
bilangan warna Compression
- Mendemokan antarmuka - Pembuatan Banners
GIFs dan Progressive dan Buttons
JPEGs - Pengurangan
Bilangan Warna
- Antarmuka GIFs dan
Progressive JPEGs
Memahami dan Setelah mengikuti kuliah ini, - Menunjukkan pembuatan 1. Pembuatan Tampilan 100’ OHP, Kuis,
memiliki wawasan mahasiswa diharapkan mampu: tampilan halaman secara Halaman Secara Cepat Projector In Latihan,
tentang pembuatan - Menguasai cara-cara cepat - Penyeimbangan Focus, Simulasi
tampilan halaman pembuatan tampilan halaman - Mendemokan Ukuran File Image Laptop.
secara cepat dan secara cepat, mampu penyeimbangan ukuran file dan Kualitas
pembuatan grafik menyeimbangkan ukuran file image dan kualitas - Pengkhususan lebar
animasi image dan kualitas gambar - Mendemokan dan tinggi Image
- Menerapkan pengkhususan pengkhususan lebar dan - Penyediaan Preview
lebar dan tinggi gambar tinggi image Image
- Mengaplikasikan penyediaan - Menerangkan penyediaan 2. Pembuatan Animated
preview image preview image Graphics
- Menguasai pembuatan - Menunjukkan pembuatan - Pembuatan GIF
animated grafik grafik animasi Animation
- Multiple Animations
dalam Satu Halaman
- A Hand-Crafted
Animation
- Transparent
Animations
- Melakukan
perulangan
Memahami dan Setelah mengikuti kuliah ini, - Menerangkan background 1. Backgrounds dan 100’ OHP, Kuis,
 Wakt Alat/Bahan/S
Kompetensi Dasar Indikator Pengalaman Pembelajaran Materi Ajar Penilaian
u umberBelajar
memiliki wawasan mahasiswa diharapkan mampu: dan kontrol warna Kontrol Warna Projector In Latihan,
tentang background - Menguasai metode - Menerangkan transparan - Background dan Focus, Simulasi
dan kontrol warna, background dan kontrol image Kontrol Text Laptop.
serta desain halaman warna serta menentukan - Mendemokan background - Background Image
dan layout background yang baik halaman yang baik Tiles
- Menerapkan desain halaman - Menjelaskan desain - Transparent Images
dan layout halaman dan layout - Pembuatan
- Mengaplikasikan trik lama - Mendemokan trik lama Backgrounds
tentang background banner tentang background banner - Penentuan
Backgrounds yang
baik
2. Desain Halaman dan
Layout
- Desain Halaman
Web
- Image Spacing dan
Borders
- Trik Lama tentang
Background Banner
- Customizing
Horizontal Rules
Memahami dan Setelah mengikuti kuliah ini, - Menerangkan peta gambar 1. Image Maps 100’ OHP, Kuis,
memiliki wawasan mahasiswa diharapkan mampu: - Menerangkan layout - Mapping Regions Projector In Latihan,
tentang image maps - Menguasai metode tentang dengan table lebih lanjut dalam Image Focus, Simulasi
dan layout dengan image maps - Mendemokan cara - Client-Side Image Laptop.
table lebih lanjut - Menerapkan layout dengan pembuatan table sederhana Maps
table secara lebih lanjut - Menunjukkan pengaturan - Image Maps with
ukuran table Non-rectangular
- Menunjukkan alignment Regions
dan spanning - Server-Side Image
Maps
- Kombinasi
Client/Server Image
 Wakt Alat/Bahan/S
Kompetensi Dasar Indikator Pengalaman Pembelajaran Materi Ajar Penilaian
u umberBelajar
Maps
2. Layout dengan Tables
lebih lanjut
- Pembuatan Table
Sederhana
- Ukuran Table
- Alignment dan
Spanning
- Backgrounds dan
Spacing
- Nested Tables
Memahami dan Setelah mengikuti kuliah ini, - Mendemokan layout 1. Layout Interactive 100’ OHP, Kuis,
memiliki wawasan mahasiswa diharapkan mampu: interaktif dengan frame dengan Frames Projector In Latihan,
tentang layout - Menguasai metode tentang - Menerangkan definisi - Definisi Frames Focus, Simulasi
interaktif dengan layout interaktif dengan frame - Pembuatan Frameset Laptop.
frame dan frames - Mendemokan pembuatan Document
pembuatan formulir - Menerapkan pembuatan frameset dokumen - Tag <FRAME>
formulir dengan HTML - Menjelaskan tag <frame> - Linking antara
- Menerangkan linking Frames dan
antara frames dan windows Windows
- Menerangkan frames - Margins, Borders,
bersarang dan Scrolling
- Mendemokan pembuatan - Nested Frames
formulir dalam HTML - Supporting
- Menunjukkan cara kerja Frameless Browsers
formulir HTML 2. Pembuatan Formulir
HTML
- Cara kerja Formulir
HTML
- Pembuatan Formulir
- Masukan Text
- Identifikasi tiap
bagian data formulir
 Wakt Alat/Bahan/S
Kompetensi Dasar Indikator Pengalaman Pembelajaran Materi Ajar Penilaian
u umberBelajar
- Check Boxes
- Radio Buttons
- Selection Lists
- Text Areas
- Submit
- Pembuatan Custom
Submit Button
- Including Hidden
Data
Memahami dan Setelah mengikuti kuliah ini, - Menjelaskan konsep dasar - Dasar Konsep CSS 100’ OHP, Kuis,
memiliki wawasan mahasiswa diharapkan mampu: CSS - Values Projector In Latihan,
tentang konsep dasar - Menguasai konsep dasar - Menerapkan Selectors, - Selectors, Pseudo- Focus, Simulasi
CSS, penilaian, CSS Pseudo-Classes, Pseudo- Classes, Pseudo- Laptop.
Selectors, Pseudo- - Memberikan nilai pada Elements dan semua Elements, dan At-
Classes, Pseudo- masing-masing komponen elemen dalam CSS Rules
Elements - Menguasai Selectors,
Pseudo-Classes, Pseudo-
Elements
Memahami dan Setelah mengikuti kuliah ini, - Menjelaskan tentang visual - Visual Media Styles 100’ OHP, Kuis,
memiliki wawasan mahasiswa diharapkan mampu: media styles - Paged Media Styles Projector In Latihan,
tentang visual media - Menjelaskan tentang visual - Menjelaskan paged media - Aural Media Styles Focus, Simulasi
style, paged media media styles styles Laptop.
style, dan aural - Menjelaskan paged media - Menjelaskan aural media
media style styles styles
- Menjelaskan aural media
styles
Memahami dan Setelah mengikuti kuliah ini, - Menjelaskan pelekatan 1. Embedding 100’ OHP, Kuis,
memiliki wawasan mahasiswa diharapkan mampu: multimedia dalam halaman Multimedia in Web Pages Projector In Latihan,
tentang embedding - Menguasai pelekatan web - Peletakan Video Focus, Simulasi
multimedia dalam multimedia dalam halaman - Mendemokan peletakan dalam halaman web Laptop.
halaman web dan web video dalam halaman web - Multimedia the Old-
Scripting, Applets, - Menguasai scripting, applets, - Mendemokan beberapa fashioned Way
and ActiveX dan ActiveX dalam halaman metode multimedia yang - Embedding Video
 Wakt Alat/Bahan/S
Kompetensi Dasar Indikator Pengalaman Pembelajaran Materi Ajar Penilaian
u umberBelajar
web lainnya the Microsoft Way
- Menjelaskan tentang - Microsoft
Scripting, Applets dan Background Sounds
ActiveX - Multimedia the
- Menunjukkan penggunaan Netscape Way
javascript - Trying to Please
Everybody
- Multimedia the New
Way
2. Scripting, Applets, and
ActiveX
- The Old Way
- Plug-in Power
- Internet
Programming for the
Rest of Us
- Strong Java
- ActiveX Controls