MATA KULIAH: WEBSITE FUNDAMENTAL
PERTEMUAN 1: PENGENALAN WEBSITE
Materi Teori:
Definisi Website dan Web Application
Sejarah dan perkembangan web
Komponen dasar dari website (HTML, CSS, JS, Server, Client, Browser)
Jenis-jenis website (statis, dinamis, portal, e-commerce, blog, dsb)
Cara kerja web (HTTP, DNS, Client-Server)
Gambar:
Diagram alur kerja Client-Server
Evolusi Web: Web 1.0, 2.0, 3.0
Materi Praktikum:
Mengenal browser dan alat developer tools
Membuka dan menganalisis struktur HTML dari halaman web
PERTEMUAN 2: HTML DASAR
Materi Teori:
Struktur dasar HTML
Elemen dan atribut HTML
Heading, paragraf, link, image, list, table
Formulir dasar: input, textarea, button, checkbox, radio
Gambar:
Struktur DOM HTML
Contoh halaman HTML dasar
Materi Praktikum:
Membuat halaman HTML sederhana berisi teks, gambar, dan link
Membuat form pendaftaran sederhana
PERTEMUAN 3: HTML LANJUTAN DAN STRUKTUR SEMANTIK
Materi Teori:
Elemen semantik (header, nav, section, article, aside, footer)
iframe, embed, video, audio
Meta tag dan SEO dasar
Gambar:
Layout HTML5 Semantik
Materi Praktikum:
Membuat halaman artikel dengan struktur semantik lengkap
Menyematkan video dan audio
PERTEMUAN 4: PENGENALAN CSS
Materi Teori:
Fungsi dan sintaks CSS
Selektor dasar dan kombinasi
Properti warna, font, background, margin, padding, border
Inline, internal, dan eksternal CSS
Gambar:
Contoh kode CSS dan hasil tampilannya
Materi Praktikum:
Mendesain ulang halaman HTML dengan CSS internal
Eksperimen dengan warna, font, dan layout sederhana
PERTEMUAN 5: CSS LANJUTAN
Materi Teori:
Box model
Display: block, inline, inline-block, none
Positioning: static, relative, absolute, fixed
Float dan clear
Flexbox dasar
Gambar:
Diagram Box Model CSS
Contoh layout menggunakan Flexbox
Materi Praktikum:
Membuat layout artikel menggunakan box model dan flexbox
Eksperimen dengan positioning dan float
PERTEMUAN 6: PENGENALAN JAVASCRIPT
Materi Teori:
Peran JavaScript dalam web
Sintaks dasar: variabel, tipe data, operator
Struktur kontrol: if, loop
Fungsi dasar
Gambar:
Diagram alur kontrol program JS
Materi Praktikum:
Menambahkan script JavaScript ke HTML
Membuat interaksi sederhana (alert, input-output)
PERTEMUAN 7: DOM DAN EVENT HANDLING
Materi Teori:
Document Object Model (DOM)
Manipulasi elemen dengan JavaScript
Event handling: onclick, oninput, onsubmit
Validasi form dasar
Gambar:
Ilustrasi struktur DOM dan cara manipulasi
Materi Praktikum:
Membuat form interaktif dengan validasi JS
Menampilkan pesan dinamis berdasarkan input user
PERTEMUAN 8: MINI PROJECT – WEBSITE PROFIL PRIBADI
Materi Teori:
Perencanaan struktur halaman
Integrasi HTML, CSS, JS dan CMS
Prinsip desain web responsif (pengantar)
Materi Praktikum:
Membuat website profil pribadi lengkap:
Halaman home, tentang saya, kontak
Formulir kontak interaktif
Layout dengan Flexbox
Validasi input
Gambar:
Contoh layout website profil pribadi
Catatan: Semua materi praktik disarankan dikerjakan menggunakan code editor seperti VS Code dan diuji melalui browser modern (Chrome/Firefox).
About the Author
