Pemrograman Web Dasar
Selamat Datang di Kelas Pemrograman Web Dasar
Assalamu 'Alaikum Wr. Wb.
Selamat datang para mahasiswa, Selamat bergabung pada Mata Kuliah Pemrograman Web Dasar. Kami akan mendampingi mata kuliah ini, jika para mahasiswa kesulitan di matakuliah ini silahkan bertanya di forum diskusi dietiap topik yang sudah disiapkan.
Di perkuliahan ini mahasiswa diharapkan dapat memahami dasar teknik pemrograman web dengan menggunakan perkasas web standard (HTML, CSS, JavaScript) dan kerangka-kerja web yang modern seperti React dan Node.js.
Prasyarat :
- Mampu mengoperasikan komputer dengan baik.
- Mata kuliah ini didesain untuk pemula, sehingga tidak ada prasyarat dalam pemahaman pemrograman sebelumnya.
- Anda harus mandiri, berkomitmen, benar-benar punya rasa ingin tahu dan tertarik pada subjek.
- Anda harus gigih, temukan topik yang menarik, bermain-main dan mengotak-atik ilmu yang Anda dapatkan.
- Sebaik apa pun materi struktur kuliah ini, tak akan berguna tanpa keseriusan anda untuk belajar, berlatih, dan mencoba.
Learning Outcome:
Mahasiswa mampu memahami dasar-dasar dalam proses membangun aplikasi web dan terampil dalam mengimplementasikan framework web modern dalam proses pengembangan aplikasi web-nya.
Penilaian:
- Aktivitas mahasiswa selama mengikuti kuliah selesai sesuai dengan waktunya = 10%
- Menyelesikan tugas kuliah = 25 %
- Menyelesaikan quiz setiap topik = 10%
- Ujian Tengah Semester = 15 %
- Ujian Semester = 40 %
Peta Kompetensi:
[01] 06 - 11 Maret 2023: CSS & HTML 1 (Bagian A)
Assalamualaikum, para mahasiswa berjumpa kembali di mata kuliah pertemuan ke 1, semoga kalian diberi kesehatan dan tetap semangat mengikuti mata kiliah ini. Selamat belajar.
HTML & CSS adalah bahasa yang digunakan untuk membuat dan mendesain tampilan situs web Anda.
Di bagian ini kita akan mempelajari dasar-dasar pemrograman web sambil langsung membuat halaman web.
Materi PDF:
Tugas 01: CSS & HTML 1
Membuat akun dan profil lengkap di freeCodeCamp.org. Berikut contoh akun dengan URL: https://www.freecodecamp.org/agusnurwanto
[02] 13 - 18 Maret 2023: CSS & HTML 1 (Bagian B)
Assalamualaikum, para mahasiswa berjumpa kembali di mata kuliah pertemuan ke 2, semoga kalian diberi kesehatan dan tetap semangat mengikuti mata kiliah ini. Selamat belajar.
Dalam pelajaran ini, kita akan mengembangkan halaman arahan untuk sebuah situs web.
Kita akan mempelajari sejumlah teknik advance HTML & CSS untuk menciptakan halaman web yang modern!
Materi PDF:
Tugas 02: CSS & HTML 1
Materi tugas: Google Docs
Jawab:
- https://github.com/agusnurwanto/sibermu/blob/main/memulai-dengan-html.html (Nomor 6 di soal 01)
- https://github.com/agusnurwanto/sibermu/blob/main/judul-dan-paragraf.html (Nomor 8 di soal 02)
- https://github.com/agusnurwanto/sibermu/blob/main/tautan.html (Nomor 5 di soal 03)
- https://github.com/agusnurwanto/sibermu/blob/main/gambar.html (Nomor 7 di soal 04)
- https://github.com/agusnurwanto/sibermu/blob/main/daftar.html (Nomor 6 di soal 05)
[03] 20 - 25 Maret 2023: CSS & HTML 2
Assalamualaikum, para mahasiswa berjumpa kembali di mata kuliah pertemuan ke 3, semoga kalian diberi kesehatan dan tetap semangat mengikuti mata kiliah ini. Selamat belajar.
Pada minggu ini, kita akan mulai belajar dan praktik Bagian: Basic HTML and HTML5 di Kelas: Responsive Web Design (FreeCodeCamp.org).
Dalam pelajaran ini, kita akan membuat web yang Anda kembangkan sendiri dari pelajaran HTML/Study/3.
Ayo kuasai cara mengoptimalkan layout halaman web menggunakan desain web yang responsive!
Materi PDF: DPW-03: CSS & HTML 2
Tugas 03: Basic HTML & HTML5
Jawab: https://docs.google.com/document/d/17l_LVYjZsQUysR3t5DfxACWNKWDBLD8ZalDHJ-cQwvs/edit?usp=sharing
[04] 27 Maret - 01 April 2023: CSS Lanjutan
Assalamualaikum, para mahasiswa berjumpa kembali di mata kuliah pertemuan ke 4, semoga kalian diberi kesehatan dan tetap semangat mengikuti mata kiliah ini (CSS Lanjutan). Selamat belajar.
Setiap bahasa pemrograman ada cara menulisnya sendiri-sendiri.
Seperti HTML, kita harus menulis tag buka dan tutup misal <html>..</html>.
CSS juga punya penulisan syntax sendiri. Lihat gambar berikut:
Keterangan syntax penulisan CSS:
- Selector adalah tag atau poin HTML yang ingin kamu ubah style-nya
- Declaration adalah “apa yang ingin kamu ubah tampilan HTLMnya”. Terdiri dari properti dengan value
- Property adalah jenis tampilan yang ingin di ubah. Misal: color (warna), font-family (jenis font).
- Value adalah nilai dari property. Misal property color dengan value red. Jadi warna huruf color diubah menjadi merah red.
Pelajari CSS dalam bagian mata kuliah ini untuk pemula. CSS, atau Cascading Style Sheet, bertanggung jawab atas gaya dan tampilan situs web.
Dalam bagian ini, kita membahas CSS dari awal. Anda akan mempelajari semuanya, mulai dari keterampilan dasar, seperti mewarnai dan teks, hingga keterampilan tingkat lanjut, seperti animasi khusus.
Anda akan mempelajari:
- Coloring
- Formatting
- Text
- Layout
- Grid
- Flexbox
- Animations
- Transitions
-----------------------------------------------------
# BAGIAN BAWAH INI MOHON DIABAIKAN TERLEBIH DAHULU.
-----------------------------------------------------
ES6 adalah versi JavaScript yang terbaru. Ini adalah standar baru untuk penulisan JavaScript, sebuah bahasa pemrogramman yang populer.
Dalam pelajaran pertama, kita akan membahas sintax dan tata bahasa, termasuk variable, constant, dan statement kondisional!
-----------------------------------------------------
# HINGGA BARIS INI
-----------------------------------------------------
Materi PDF: Menambahkan Tauatan
Tugas 04: CSS Lanjutan
Tugas ke-4 ini secara rinci disampaikan di Google Docs.
Jawab: https://docs.google.com/document/d/1DbFmX_KA6MfQK2EhIN5ETDDw0J0PwF55z92bwK4NZ0I/edit?usp=sharing
[05] 03 - 08 April 2023: Applied Visual Design
Assalamualaikum, para mahasiswa berjumpa kembali di mata kuliah pertemuan ke 5, semoga kalian diberi kesehatan dan tetap semangat mengikuti mata kiliah ini. Selamat belajar.
Pada minggu ini, kita akan mulai belajar dan praktik Bagian: Applied Visual Design di Kelas: Responsive Web Design (FreeCodeCamp.org).
Dalam ES6 Study II, Anda akan mempelajari cara menggunakan "iterasi" untuk mengulangi sebagian code secara efisien.
Dalam pelajaran ini, Anda juga akan mempelajari dasar-dasar array dan object.
Materi PDF: Cara Membuat Tabel dengan Tag
Tugas 05: Applied Visual Design
Jawab:
[06] 10 - 15 April 2023: Applied Accessibility
Assalamualaikum, para mahasiswa berjumpa kembali di mata kuliah pertemuan ke 6, semoga kalian diberi kesehatan dan tetap semangat mengikuti mata kiliah ini. Selamat belajar.
Pada minggu ini, kita akan mulai belajar dan praktik Bagian: Applied Accessibility di Kelas: Responsive Web Design (FreeCodeCamp.org).
Dalam JavaScript Study III, Anda akan mempelajari cara menggabungkan dan menjalankan code secara efisien dengan membuat function.
Anda juga akan mempelajari cara menggunakan arrow function.
Tugas 06: Applied Accessibility
Tugas ke-6 ini secara rinci disampaikan di Google Docs.
Jawab:
[07] 01 - 06 Mei 2023: Responsive Web Design Principles
Assalamualaikum, para mahasiswa berjumpa kembali di mata kuliah pertemuan ke 7, semoga kalian diberi kesehatan dan tetap semangat mengikuti mata kiliah ini. Selamat belajar.
Pada minggu ini, kita akan mulai belajar dan praktik Bagian: Responsive Web Design Principles di Kelas: Responsive Web Design (FreeCodeCamp.org).
SQL adalah bahasa database untuk pengaturan dan analisis data. Dalam pelajaran ini Anda akan mempelajari dasar-dasar pengunaan SQL.
Tugas 07: Responsive Web Design Principles
Tugas ke-7 ini secara rinci disampaikan di Google Docs.
Jawab:
Uji Kompetensi 1 (Pemrograman Web Dasar) Nilai 97,50 dari 100
Soal 1
Elemen HTML yang tepat untuk mendefinisikan teks yang penting (ditulis tebal) adalah?
a. <strong>
b. <marquee>
c. <important>
d. <b>
e. <i>
Jawab: A
Soal 2
Jenis input mana yang mendefinisikan kontrol penggeser (slider)?
a. search
b. range
c. controls
d. length
e. slider
Jawab: B
Soal 3
Kepanjangan dari HTML adalah?
a. Home Tool Markup Language
b. Hyperlinks and Text Markup Language
c. Highspeed Tool Markup Language
d. HyperText Markup Language
e. Hyperlinks and Tool Markup Language
Jawab: D
Soal 4
Elemen HTML <canvas> digunakan untuk?
a. Membuat elemen yang bisa digeser (drag).
b. Memanipulasi data di MySQL.
c. Menggambar grafik.
d. Memanipulasi data di penyimpanan lokal peramban web.
e. Menampilkan rekaman basis data.
Jawab: C
Soal 5
Baris kode HTML yang tepat untuk menyisipkan gambar latar adalah?
a. <body style="background-image:url(background.gif)">
b. <background src="background.gif">
c. <body style="background.gif">
d. <body bg="background.gif">
e. <background img="background.gif">
Jawab: A
Soal 6
Elemen HTML yang mana yang tepat untuk heading dengan ukuran terbesar?
a. <head>
b. <h6>
c. <heading>
d. <h1>
e. <header>
Jawab: D
Soal 7
Elemen HTML mana yang digunakan untuk menentukan footer untuk dokumen atau bagian?
a. <document>
b. <section>
c. <footer>
d. <button>
e. <bottom>
Jawab: C
Soal 8
Elemen HTML mana yang tepat untuk menyisipkan jeda baris?
a. <line>
b. <lb>
c. <linebreak>
d. <break>
e. <br>
Jawab: E
Soal 9
Atribut global HTML: contenteditable digunakan untuk?
a. Memberikan nilai-balikan posisi kemunculan konten yang pertama kali ditemukan di dalam string.
b. Memperbarui konten dari server.
c. Menentukan apakah konten suatu elemen harus dapat diedit atau tidak.
d. Memperbarui konten dari sesi web.
e. Menentukan menu konteks untuk sebuah elemen. Menu muncul ketika pengguna mengklik kanan pada elemen.
Jawab: C
Soal 10
Dalam HTML, atribut mana yang digunakan untuk menentukan bahwa kolom input tersebut harus (wajib) diisi?
a. confirmed
b. required
c. formvalidate
d. placeholder
e. validate
Jawab: B
Soal 11
Elemen HTML yang tepat untuk memutar file audio adalah?
a. <audio>
b. <play>
c. <mp3>
d. <media>
e. <sound>
Jawab: A
Soal 12
Pada HTML, onblur dan onfocus merupakan?
a. Atribut CSS.
b. Atribut event.
c. Atribut JavaScript.
d. Atribut HTML.
e. Atribut style.
Jawab: B
Soal 13
Grafik yang dibangun oleh SVG didefinisikan di dalam format?
a. CSV
b. HTML
c. CSS
d. JavaScript
e. XML
Jawab: E
Soal 14
Elemen HTML mana yang digunakan untuk menampilkan pengukuran skalar (scalar measurement) dalam suatu rentang?
a. <range>
b. <measure>
c. <meters>
d. <gauge>
e. <meter>
Jawab: E
Soal 15
Bagaimana Anda bisa membuat daftar berpoin?
a. <ul>
b. <ol>
c. <il>
d. <list>
e. <dl>
Jawab: A
Soal 16
Sebuah <iframe> digunakan untuk menampilkan halaman web di dalam halaman web.
Pilih satu:
a. Benar
b. Salah
Jawab: A
Soal 17
Baris kode HTML yang tepat untuk membuat area teks adalah?
a. <textarea>
b. <input type="text">
c. <input type="textbox">
d. <input type="box">
e. <input type="textarea">
Jawab: A
Soal 18
Baris kode HTML yang tepat untuk menyisipkan gambar adalah?
a. <img src="image.gif" alt="MyImage">
b. <image src="image.gif" alt="MyImage">
c. <img href="image.gif" alt="MyImage">
d. <img alt="MyImage">image.gif</img>
e. <image href="image.gif" alt="MyImage">
Jawab: A
Soal 19
Manakah dari elemen-elemen ini yang merupakan elemen <table>?
a. <thead><tr><tt>
b. <table><head><tfoot>
c. <thead><body><tr>
d. <table><tr><td>
e. <table><tr><tt>
Jawab: D
Soal 20
Dalam HTML, apa yang didefinisikan oleh elemen <aside> ?
a. Daftar navigasi yang akan ditampilkan di sisi kanan halaman.
b. Daftar navigasi yang akan ditampilkan di sisi kiri halaman.
c. Daftar navigasi yang akan ditampilkan di sisi kiri halaman.
d. Konten selain dari konten halaman.
e. Kumpulan karakter ASCII; untuk mengirim informasi antar komputer di Internet.
Jawab: D
Soal 21
Baris kode HTML yang tepat untuk membuat kolom input teks adalah?
a. <textinput type="textfield">
b. <input type="text">
c. <textinput type="text">
d. <textfield>
e. <input type="textfield">
Jawab: B
Soal 22
Elemen HTML mana yang mendefinisikan tautan navigasi?
a. <navigation>
b. <navigate>
c. <links>
d. <navbar>
e. <nav>
Jawab: E
Soal 23
Bagaimana cara membuat daftar bernomor?
a. <dl>
b. <ul>
c. <ol>
d. <list>
e. <il>
Jawab: C
Soal 24
Organisasi mana yang menentukan standard teknologi web?
a. Microsoft
b. Google
c. Apple
d. Word Wide Web (WWW) Consortium
e. Mozilla
Jawab: D
Soal 25
Baris kode HTML yang tepat untuk membuat kotak centang adalah?
a. <check>
b. <input type="checkbox">
c. <input type="checked">
d. <checkbox>
e. <input type="check">
Jawab: B
Soal 26
Dalam HTML, Anda dapat menyematkan elemen SVG langsung ke halaman HTML.
Pilih satu:
a. Benar
b. Salah
Jawab: A
Soal 27
Elemen HTML yang tepat untuk mendefinisikan teks yang difokuskan (ditulis miring) adalah?
a. <l>
b. <italic>
c. <em>
d. <marquee>
e. <i>
Jawab: E
Soal 28
Elemen inline biasanya ditampilkan tanpa memulai baris baru.
Pilih satu:
a. Benar
b. Salah
Jawab: A
Soal 29
Elemen block biasanya ditampilkan tanpa memulai baris baru.
Pilih satu:
a. Benar
b. Salah
Jawab: B
Soal 30
Jenis doctype mana yang tepat untuk HTML5?
a. <!DOCTYPE 5>
b. <!DOCTYPE html>
c. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0//EN" "http://www.w3.org/TR/html5/strict.dtd">
d. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0//EN">
e. <!DOCTYPE html5>
Jawab: B
Soal 31
Atribut HTML mana yang menentukan teks alternatif untuk gambar, jika gambar tidak dapat ditampilkan?
a. href
b. src
c. lengdesc
d. title
e. alt
Jawab: E
Soal 32
Baris kode HTML yang tepat untuk membuat daftar drop-down adalah?
a. <input type="dropdown">
b. <input type="list">
c. <select>
d. <list>
e. <input type="select">
Jawab: C
Soal 33
Baris komentar HTML diawali dengan <!-- dan diakhiri oleh --> .
Pilih satu:
a. Benar
b. Salah
Jawab: A
Soal 34
Baris Baris kode HTML yang tepat untuk menambahkan warna latar belakang adalah?
a. <bg>yellow</bg>
b. <background>yellow</background>
c. <body background="yellow">
d. <body bg="yellow">
e. <body style="background-color:yellow;">
Jawab: E
Soal 35
Elemen HTML mana yang digunakan dalam menentukan header untuk dokumen atau bagian laman web?
a. <h>
b. <top>
c. <head>
d. <section>
e. <header>
Jawab: E
Soal 36
Elemen HTML yang tepat untuk memutar file video adalah?
a. <auidio>
b. <movie>
c. <video>
d. <media>
e. <play>
Jawab: C
Soal 37
Elemen HTML mana yang tepat untuk mendefinisikan judul dokumen adalah?
a. Semua salah.
b. <head>
c. <doctitle>
d. <title>
e. <document>
Jawab: D
Soal 38
Baris Baris kode HTML yang tepat untuk membuat hyperlink adalah?
a. <a href="http://sibermu.ac.id">SiberMu</a>
b. <a>http://sibermu.ac.id</a>
c. <a url="http://sibermu.ac.id">SiberMu</a>
d. <hyperlink>ttp://sibermu.ac.id</hyperlink>
e. <a name="http://sibermu.ac.id">sibermu.ac.id</a>
Jawab: A
Soal 39
Karakter mana yang digunakan untuk menunjukkan tag akhir (penutup)?
a. ~
b. ^
c. *
d. /
e. <
Jawab: D
Soal 40
Baris Baris kode HTML yang tepat agar pengguna bisa membuka tautan di tab/jendela browser yang baru?
a. <a href="url" new>
b. <a href="url" target="new">
c. <a href="url" target="tab">
d. <a href="url" target="window">
e. <a href="url" target="_blank">
Jawab: E
[09] 15 - 20 Mei 2023: CSS Flexbox
Assalamualaikum, para mahasiswa berjumpa kembali di mata kuliah pertemuan ke 8, semoga kalian diberi kesehatan dan tetap semangat mengikuti mata kuliah ini. Selamat belajar.
Dalam pelajaran ini, kita akan mempelajari cara menggunakan function agregat dan pengelompokan. Kita akan menggunakan teknik SQL untuk menganalisis kebiasaan belanja!
Tetap SEMANGAT!
Rekaman Tatap-Maya: Pemrograman Web Dasar, 2023-05-18 07:53 GMT+7: https://drive.google.com/file/d/1o1iOOgg0AqvqfUgAWYEfHAPJ0s6jK_dh/view?usp=sharing
Materi PDF: Pengenalan JS
Komentar
Posting Komentar
Semoga bermanfaat dunia dan akhirat