Spesifikasi Proyek Website

 

Dokumen Spesifikasi Proyek Website

1. Pendahuluan

Website merupakan media digital yang memiliki peran penting dalam menyampaikan informasi, memperluas jangkauan bisnis, serta membangun citra sebuah entitas. Berdasarkan tujuan dan fungsinya, website dapat dibagi menjadi beberapa kategori utama, yaitu: Website Perusahaan (Company Profile), E-Commerce / Online Store, Portal Berita, Blog / Personal Website, Forum / Komunitas Online, dan Landing Page.

Dokumen ini menjelaskan spesifikasi detail masing-masing kategori website sebagai acuan dalam perencanaan dan pengembangan proyek.

---

2. Spesifikasi Proyek Website per Kategori

2.1 Website Perusahaan (Company Profile)

• Tujuan:
  Menyediakan informasi resmi tentang perusahaan/instansi untuk meningkatkan kredibilitas dan kepercayaan publik.

• Fitur Utama:

  • Halaman profil perusahaan

  • Visi & misi

  • Portofolio & klien

  • Produk/jasa yang ditawarkan

  • Kontak & lokasi perusahaan

• Contoh Implementasi:
  Website resmi sekolah, instansi pemerintah, atau perusahaan swasta.

---

2.2 E-Commerce / Online Store

• Tujuan:
  Menjadi platform digital untuk transaksi jual beli produk/jasa.

• Fitur Utama:

  • Katalog produk lengkap dengan deskripsi & foto

  • Keranjang belanja

  • Sistem pembayaran online (payment gateway)

  • Status & pelacakan pesanan

  • Integrasi ekspedisi/logistik

• Contoh Implementasi:
  Tokopedia, Shopee, atau toko online brand tertentu.

---

2.3 Portal Berita / Media Online

• Tujuan:
  Menyajikan informasi aktual, terpercaya, dan cepat dalam berbagai kategori.

• Fitur Utama:

  • Artikel berita terbaru

  • Kategori berita (politik, ekonomi, teknologi, hiburan, dll.)

  • Sistem manajemen konten (CMS)

  • Komentar pembaca

  • Integrasi media sosial untuk berbagi berita

• Contoh Implementasi:
  Detik, Kompas, Tempo.

---

2.4 Blog / Personal Website

• Tujuan:
  Menjadi media personal untuk berbagi opini, pengalaman, atau pengetahuan tematik.

• Fitur Utama:

  • Artikel/blog post dengan kategori

  • Komentar pembaca (opsional)

  • Arsip tulisan

  • Integrasi sosial media

• Contoh Implementasi:
  Blog traveling, blog teknologi, blog pendidikan.

---

2.5 Forum / Komunitas Online

• Tujuan:
  Menjadi ruang interaksi digital bagi komunitas dengan minat atau kebutuhan yang sama.

• Fitur Utama:

  • Registrasi & login anggota

  • Kategori forum dan thread diskusi

  • Sistem komentar & voting

  • Moderasi dan aturan komunitas

  • Profil pengguna & sistem reputasi

• Contoh Implementasi:
  Kaskus, Reddit, forum otomotif, forum teknologi.

---

2.6 Landing Page

• Tujuan:
  Mengarahkan pengunjung agar melakukan tindakan spesifik (konversi), seperti mendaftar, membeli, atau mengikuti event.

• Fitur Utama:

  • Headline & subheadline persuasif

  • Hero image/video sebagai daya tarik

  • Call to Action (CTA) jelas

  • Formulir singkat (misalnya pendaftaran)

  • Testimoni atau social proof

  • Informasi singkat tentang produk/event

• Contoh Implementasi:
  Landing page pendaftaran webinar, promosi event wisata, promo aplikasi digital.

---

3. Persyaratan Teknis Umum

• Desain: Responsif (mobile-friendly), user-friendly, dan konsisten.

• Teknologi: HTML5, CSS3, JavaScript, serta framework (Bootstrap/Tailwind, React, atau CMS sesuai kebutuhan).

• Keamanan: SSL (HTTPS), proteksi data pengguna.

• Integrasi: Media sosial, payment gateway, API eksternal sesuai kategori.

• Optimasi: SEO-friendly, kecepatan loading optimal.

---

4. Kesimpulan

Dokumen ini merangkum spesifikasi proyek website sesuai dengan kategori utamanya. Setiap kategori memiliki tujuan, fitur, dan implementasi yang berbeda. Dengan acuan ini, proses perancangan, pengembangan, dan implementasi website dapat lebih terarah sesuai kebutuhan pengguna atau organisasi.

PWEB - Landing Page

 

Pengertian

Landing page adalah halaman web tunggal yang dirancang khusus untuk tujuan tertentu, seperti mengumpulkan informasi kontak, mendorong penjualan, atau mengarahkan pengunjung ke tindakan spesifik. 

Landing page biasanya muncul setelah seseorang mengklik sebuah link dari sosial media, google ads, dan link link eksternal lain nya.

Tujuan Landing Page

Tujuan nya adalah seputar marketing atau pemasaran, beberapa penerapan landing page yang sering ditemui diantaranya:

• Memperkenalkan sebuah produk
• Mengumpulkan email subscribers
• Menginformasikan promo spesial dan banyak lain nya.

Karakteristik Landing Page

• Single Page: Hanya satu halaman dengan fokus utama.
• Fokus pada CTA (Call to Action): Misalnya "Daftar Sekarang", "Beli Sekarang", "Download Gratis".
• Minim Navigasi: Agar pengunjung tidak terdistraksi.
• Desain Menarik & Persuasif: Menggunakan visual, testimoni, dan copywriting yang kuat.
• Formulir / Tombol Aksi: Biasanya untuk pendaftaran, pembelian, atau pengumpulan data.

Jenis Landing Page

Lead Generation Landing Page

Mengumpulkan data pengunjung (email, nomor telepon, dll).

Contoh: Halaman pendaftaran webinar.

Click-Through Landing Page

Menjembatani sebelum pengunjung diarahkan ke halaman lain.

Contoh: Halaman penjelasan produk sebelum masuk ke checkout.

Sales Landing Page

Fokus menjual produk/jasa dengan CTA langsung beli.

Contoh: Halaman promosi produk digital.

Elemen Landing Page

Agar tidak terjebak dalam kesalahan tersebut, ada 8 elemen penting yang harus ada di landing page Anda. Dengan memahami elemen-elemen ini, Anda akan lebih mudah menarik perhatian pengunjung dan meyakinkan mereka bahwa produk atau jasa Anda adalah solusi terbaik yang mereka butuhkan.

Struktur Elemen Landing Page

1. Header / Hero Section

• Logo kecil (opsional)

• Judul utama (headline) yang menarik perhatian

• Subjudul yang menjelaskan manfaat/penawaran

• Tombol Call to Action (CTA) → “Daftar Sekarang”, “Beli Sekarang”, “Mulai Gratis”

• Gambar/ilustrasi/hero image

2. Benefit Section

• Judul singkat: “Mengapa Memilih Kami?”

• 3–4 poin keunggulan/fitur utama

• Bisa menggunakan ikon untuk memperjelas

3. Social Proof / Testimoni

• Testimoni pengguna

• Logo perusahaan klien / partner

• Rating / review

4. Detail Produk / Penjelasan Layanan

• Deskripsi singkat tentang produk/jasa

• Gambar atau ilustrasi produk

• Bisa ditambahkan video demo

5. Offer / Promo (opsional)

• Penawaran khusus (diskon, bonus, limited time offer)

• CTA kedua: “Ambil Penawaran Ini”

6. Formulir / Lead Capture

• Form singkat (nama, email, nomor HP)

• Tombol submit (misalnya: “Dapatkan Akses”)

7. FAQ (Frequently Asked Questions)

• 3–5 pertanyaan yang sering ditanyakan calon pengguna

• Jawaban singkat yang meyakinkan

8. Footer

• Kontak singkat (email, telepon)

• Link media sosial

• Hak cipta ©

Kategori Website

1. Website Perusahaan (Company Profile)
   Menampilkan informasi tentang profil perusahaan, visi misi, produk/jasa, portofolio, hingga kontak.
   → Contoh: Website resmi perusahaan atau instansi.

2. E-Commerce / Online Store
   Website untuk menjual produk/jasa secara online lengkap dengan katalog, keranjang belanja, dan pembayaran.
   → Contoh: Tokopedia, Shopee.

3. Portal Berita / Media Online
   Berisi artikel berita, opini, atau informasi terkini.
   → Contoh: Detik, Kompas.

4. Blog / Personal Website
   Website berisi tulisan pribadi, opini, atau artikel tematik.
   → Contoh: Blog teknologi, blog traveling.

5. Forum / Komunitas Online
   Tempat diskusi dan interaksi antar pengguna.
   → Contoh: Kaskus, Reddit.

6. Landing Page
   Website yang  sering dipakai untuk keperluan pemasaran.

Referensi

• https://munasprok.or.id/elemen-wajib-di-landing-page/
• https://ardata.co.id/hero-section-landing-page/
• https://codingstudio.id/blog/cara-buat-landing-page-gratis/#Cara_Buat_Landing_Page_dengan_Figma
• https://glints.com/id/lowongan/struktur-landing-page/
• https://www.jagoanhosting.com/blog/contoh-landing-page/
• https://www.dewaweb.com/blog/contoh-landing-page/
• https://www.seoptimer.com/id/blog/contoh-halaman-landing/
• Hostinger Landing Page

Latihan

Membuat Landing Page Objek Wisata di Surabaya

Membuat Form Pengunjung, Menampilkan tabel pengunjung.

Monitoring Kelas

Form Monitoring

Hasil Monitoring

Absensi

PBO 1 - Konsep OOP

Apa Itu OOP? Dalam bahasa Indonesia, OOP bisa disebut sebagai pemrograman berorientasi objek. OOP adalah metode pemrograman komputer yang menyusun desain perangkat lunak berdasarkan data atau objek, bukan sekadar urutan perintah. Tujuan utama OOP adalah mempermudah proses pengembangan program agar lebih terstruktur dan efisien. 

Di dalam OOP, terdapat variabel (atribut) dan fungsi (metode) yang dibungkus dalam sebuah kelas. Dari kelas tersebut, programmer bisa membuat objek yang saling berhubungan dan dapat berinteraksi untuk menyelesaikan permasalahan dalam program. Dengan cara ini, program yang rumit bisa dipecah menjadi potongan kode yang lebih kecil, sederhana, dan bisa dipakai kembali. 

Jika pada pemrograman konvensional (prosedural) seorang programmer lebih fokus pada logika langkah demi langkah, maka dalam OOP fokusnya ada pada objek yang memiliki atribut dan perilaku tertentu. Pendekatan ini membuat program lebih mudah diatur, diperbarui, dan dipelihara, terutama pada proyek yang besar dan kompleks.

OOP juga bersifat fleksibel karena dapat digunakan di berbagai bahasa pemrograman modern, seperti C++, Java, Python, hingga JavaScript. Melalui konsep kelas, programmer bisa menentukan atribut yang dimiliki oleh sebuah objek (misalnya warna, ukuran, atau karakteristik lain), sehingga proses pengembangan aplikasi menjadi lebih jelas dan terarah.

Sejarah Singkat OOP 

Konsep OOP pertama kali diperkenalkan pada tahun 1960-an melalui bahasa pemrograman Simula, yang dikembangkan di Norwegia. Simula memaparkan ide class dan object yang menjadi dasar OOP hingga kini. 

Selanjutnya, pada 1970-an, tim di MIT mengembangkan bahasa Smalltalk, yang semakin mempopulerkan paradigma berbasis objek. Dari sana, lahirlah bahasa-bahasa modern seperti C++, Java, Python, dan C#, yang mengadopsi prinsip OOP dan menjadi standar utama dalam pengembangan software hingga saat ini. 

Komponen Dasar dalam OOP 

OOP adalah paradigma pemrograman yang fokus pada objek. Agar lebih mudah dipahami, mari kita lihat komponen utama dalam penggunaan OOP: 

Class 

Class adalah bisa dibilang sebagai sebuah template dari objek. Misalnya, kalau kita membuat class Mobil, maka di dalamnya kita bisa mendefinisikan atribut (warna, merk, tahun) dan metode (fungsi jalan, fungsi berhenti). 

Object 

Object adalah hasil nyata dari class. Jika mobil adalah class, maka mobil Toyota Avanza warna merah tahun 2020 adalah objek. Object ini dibuat dari class dan memiliki data spesifik. 

Atribut 

Atribut adalah data atau variabel yang dimiliki oleh sebuah objek. Contoh pada objek mobil, atributnya bisa berupa warna = merah, merk = Toyota, tahun = 2020. 

Metode (Method) 

Metode adalah fungsi atau perilaku yang bisa dilakukan oleh objek. Contoh, objek mobil memiliki metode jalan() atau berhenti(). Dengan metode, objek bisa melakukan aksi sesuai kebutuhan.

Konsep OOP 

Secara proses teknis, OOP memiliki kaidah khusus berupa empat prinsip dasar seperti enkapsulasi, abstraksi, pewarisan, dan polimorfisme. Berikut kami uraikan empat prinsip dasar untuk membantu Anda memahami dasar-dasar program komputer OOP dan memahami kerangka kerja umum tentang cara kerjanya! 

1. Encapsulation Encapsulation atau pengkapsulan adalah konsep tentang pengikatan data atau metode berbeda yang kemudian disatukan, atau istilah gampangnya “dikapsulkan”, hingga menjadi satu unit data. Ringkasnya, berbagai macam objek yang ada dalam kelas tersebut bisa berdiri sendiri tanpa terpengaruh oleh yang lain.  Programmer tidak harus mengetahui informasi yang disajikan secara rinci karena semua sudah menjadi satu kesatuan. Itulah mengapa proses enkapsulasi justru mempermudah dalam penggunaan sebuah objek dari suatu kelas, atau singkatnya, encapsulation mempermudah pembacaan kode. 

2. Abstraction Abstraction dalam konsep OOP adalah menyembunyikan detail latar belakang dan hanya mewakili informasi yang diperlukan untuk dunia luar saja. Jadi, programmer cukup memerintahkan suatu fungsi, tanpa perlu memiliki pengetahuan soal bagaimana fungsi itu bekerja. Sama seperti ketika memakai gadget, Anda cukup memberi suatu perintah, tanpa harus tahu bagaimana proses terlaksananya perintah itu. Konsep ini merupakan proses penyederhanaan konsep dunia nyata menjadi komponen yang sangat diperlukan.  

3. Inheritance Inheritance merupakan kemampuan membentuk kelas baru yang mempunyai fungsi turunan atau serupa dengan fungsi yang sebelumnya sudah ada. Sistem dalam konsep ini berjenjang, sehingga semakin jauh subclass atau turunannya, semakin sedikit pula kesamaan fungsinya.  

4. Polymorphism Pertanyaan “Apa itu OOP?” sebenarnya dapat dijawab dengan satu kata, yakni polymorphism, karena salah satu ciri utama OOP adalah adanya polymorphism. Suatu pemrograman tidak dapat dikatakan sebagai OOP tanpa adanya polymorphism. Sederhananya, polymorphism dalam OOP adalah konsep di mana suatu objek yang berbeda dapat diakses melalui interface yang sama.  Contoh penggunaan polymorphism dalam kehidupan sehari-hari bisa dilihat ketika Anda mempunyai fungsi untuk menghitung luas suatu benda, padahal benda itu berbentuk segitiga, lingkaran, serta persegi. Fungsi dari polymorphism adalah ketika Anda memasukkan fungsi perhitungan luas ketiga benda tersebut, dimana setiap benda memiliki metode perhitungannya sendiri. Hal ini akan mempermudah perintah yang sama untuk beberapa class dan subclass tertentu, bukan?

Contoh

https://blog.rumahweb.com/oop-adalah/

Absensi

PBO - Materi Pemrograman Berbasis Obyek

 

RENCANA PEMBELAJARAN SEMESTER (RPS) 

PEMROGRAMAN BERBASIS OBYEK

=============================================================

A. Capaian Pembelajaran Lulusan (CPL) Program Studi

1. CPL Pengetahuan: Menguasai konsep dasar ilmu komputer, algoritma, dan pemrograman.

2. CPL Keterampilan Umum: Mampu berpikir kritis, memecahkan masalah, dan bekerja dalam tim.

3. CPL Keterampilan Khusus: Mampu merancang, mengimplementasikan, dan menguji program berbasis objek.

B. Capaian Pembelajaran Mata Kuliah (CPMK)

Setelah mengikuti mata kuliah ini, mahasiswa mampu:

1. Menjelaskan prinsip dasar Pemrograman Berbasis Objek.

2. Mengimplementasikan konsep class, object, enkapsulasi, inheritance, polymorphism, dan abstraction.

3. Menggunakan OOP untuk membangun aplikasi sederhana dengan modularisasi, exception handling, collection, dan file I/O.

4. Mendesain dan mengembangkan mini project aplikasi berbasis OOP.

C. Deskripsi Mata Kuliah

Mata kuliah ini membahas prinsip dan penerapan Pemrograman Berbasis Objek (PBO) dengan menggunakan bahasa pemrograman berorientasi objek (Java/Python/C#). Materi meliputi konsep dasar class dan object, enkapsulasi, inheritance, polymorphism, abstraction, modularisasi program, collection, exception handling, file I/O, hingga implementasi dalam bentuk mini project.

D. Bahan Kajian (Pokok Bahasan)

1. Konsep dasar OOP: class, object, atribut, method.

2. Enkapsulasi, constructor, overloading.

3. Inheritance & hierarki class.

4. Polymorphism & overriding.

5. Abstraction: abstract class, interface.

6. Modularisasi dengan package.

7. Exception handling.

8. Collection & Generic.

9. File I/O & serialisasi objek.

10. GUI sederhana.

11. Mini project berbasis OOP.

E. Strategi Pembelajaran

• Metode: Ceramah interaktif, diskusi, demonstrasi coding, praktikum, project-based learning, presentasi.

• Media: Laptop, IDE (NetBeans/Eclipse/IntelliJ atau VS Code), projector, LMS.

• Evaluasi: Quiz, tugas individu, project kelompok, UTS, UAS.

F. Rencana Pembelajaran Semester (RPS Detail)

Minggu	CPMK/Sub-CPMK	Materi/Pokok Bahasan	Bentuk & Metode Pembelajaran	Penilaian & Bobot
1	Memahami perbedaan prosedural & OOP	Pengantar PBO, class & object	Ceramah, diskusi, studi kasus	Tugas individu (2%)
2	Membuat class & object	Struktur class, constructor	Demo coding, praktikum	Quiz (2%)
3	Menerapkan enkapsulasi	Modifier, getter & setter	Praktikum	Tugas coding (3%)
4	Menggunakan overloading	Method & constructor overloading	Praktikum	Quiz (2%)
5	Membuat hierarki class	Inheritance	Diskusi, praktikum	Tugas coding (3%)
6	Menggunakan polymorphism	Overriding, up/downcasting	Praktikum	Quiz (2%)
7	Menggunakan abstraction	Abstract class & interface	Praktikum	Tugas coding (3%)
8	Integrasi konsep dasar OOP	UTS (teori & praktik)	Ujian	UTS (20%)
9	Modularisasi program	Package & import	Praktikum	Tugas coding (3%)
10	Menangani error	Exception handling	Demo, praktikum	Quiz (2%)
11	Menggunakan collection	List, Map, Set, Generic	Praktikum	Tugas coding (3%)
12	Membaca/menyimpan data	File I/O, serialisasi objek	Demo, praktikum	Tugas coding (3%)
13	Membuat GUI sederhana	GUI, event handling	Praktikum	Tugas coding (3%)
14	Mendesain aplikasi OOP	Mini project design, UML	Diskusi, bimbingan	Draft project (5%)
15	Mempresentasikan project	Presentasi mini project	Presentasi kelompok	Presentasi (10%)
16	Membangun aplikasi OOP mini	UAS (teori & praktik)	Ujian	UAS (30%)

G. Penilaian

• Tugas & Quiz: 25%

• UTS: 25%

• Mini Project : 25%

• UAS: 35%

H. Referensi

1. Barnes, D. J., & Kölling, M. (2017). Objects First with Java. Pearson.

2. Horstmann, C. (2018). Object-Oriented Design & Patterns. Wiley.

3. Schildt, H. (2021). Java: The Complete Reference. McGraw Hill.

4. Freeman, E., & Robson, E. (2004). Head First Design Patterns. O’Reilly.

5. Oracle Java Documentation (https://docs.oracle.com/javase/tutorial/java/concepts/).

6. https://docs.oracle.com/javase/tutorial/java/concepts/

7. https://docs.python.org/3/tutorial/classes.html

8. https://agussuratna.net/2023/01/tutorial-java-pengenalan-bahasa-pemrograman-java/

9. https://www.petanikode.com/java-oop/

Pemrograman Web 2 - HTML Dasar

https://www.binar.co.id/blog/belajar-html-dasar

https://www.rumahweb.com/journal/belajar-html/

Tujuan Pembelajaran

Setelah mengikuti pertemuan ini, mahasiswa mampu:

1. Menjelaskan struktur dasar dokumen HTML.

2. Menggunakan elemen-elemen HTML dasar: heading, paragraph, list, link, image, table, dan form.

3. Membuat halaman profil sederhana menggunakan HTML.

Materi Pembelajaran

1. Struktur Dokumen HTML

Setiap halaman web berbasis HTML memiliki struktur umum:

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman</title>
</head>
<body>
    <!-- Konten halaman ditulis di sini -->
</body>
</html>

• <!DOCTYPE html> → deklarasi tipe dokumen HTML5.

• <html> → pembungkus seluruh dokumen HTML.

• <head> → bagian untuk metadata, judul, link CSS, dsb.

• <body> → bagian yang ditampilkan di browser.

2. Elemen Dasar HTML

a. Heading

Untuk judul dan subjudul, mulai dari <h1> (besar) sampai <h6> (kecil).

<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h3>Judul Kecil</h3>

b. Paragraph

Menuliskan teks dalam paragraf:

<p>Ini adalah sebuah paragraf. HTML digunakan untuk membuat struktur dasar halaman web.</p>

c. List

• Ordered List (bernomor):

<ol>
    <li>Pertama</li>
    <li>Kedua</li>
</ol>

• Unordered List (bullet):

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

d. Link (Hyperlink)

Mengarahkan pengguna ke halaman lain.

<a href="https://www.google.com" target="_blank">Kunjungi Google</a>

• href = alamat tujuan

• target="_blank" = membuka di tab baru

e. Image (Gambar)

Menampilkan gambar pada halaman.

<img src="images/foto.jpg" alt="Foto Profil" width="200">

• src = lokasi file gambar

• alt = deskripsi alternatif

• width/height = ukuran gambar

f. Table (Tabel)

Untuk menampilkan data dalam bentuk baris dan kolom.

<table border="1">
    <tr>
        <th>Nama</th>
        <th>Jurusan</th>
    </tr>
    <tr>
        <td>Ani</td>
        <td>Informatika</td>
    </tr>
    <tr>
        <td>Budi</td>
        <td>Sistem Informasi</td>
    </tr>
</table>

g. Form (Formulir)

Untuk input data pengguna.

<form>
    <label>Nama:</label><br>
    <input type="text" name="nama"><br><br>

    <label>Email:</label><br>
    <input type="email" name="email"><br><br>

    <label>Jenis Kelamin:</label><br>
    <input type="radio" name="gender" value="Laki-laki"> Laki-laki
    <input type="radio" name="gender" value="Perempuan"> Perempuan<br><br>

    <label>Hobi:</label><br>
    <input type="checkbox" name="hobi" value="Membaca"> Membaca
    <input type="checkbox" name="hobi" value="Olahraga"> Olahraga<br><br>

    <input type="submit" value="Kirim">
</form>

Latihan : Membuat Halaman Profil Sederhana

Instruksi:

1. Buat folder bernama profil di dalam htdocs (XAMPP) atau www (Laragon).

2. Buat file index.html di dalam folder tersebut.

3. Ketik kode berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Profil Saya</title>
</head>
<body>
    <!-- Heading -->
    <h1>Profil Mahasiswa</h1>

    <!-- Paragraf -->
    <p>Halo! Nama saya <b>Andi Setiawan</b>. Saya seorang mahasiswa jurusan Teknik Informatika 
    yang tertarik pada pengembangan web dan pemrograman.</p>

    <!-- Gambar -->
    <img src="images/foto.jpg" alt="Foto Profil" width="200">

    <!-- List -->
    <h2>Hobi Saya:</h2>
    <ul>
        <li>Membaca</li>
        <li>Olahraga</li>
        <li>Koding</li>
    </ul>

    <!-- Tabel -->
    <h2>Pendidikan</h2>
    <table border="1" cellpadding="5">
        <tr>
            <th>Tahun</th>
            <th>Sekolah</th>
        </tr>
        <tr>
            <td>2018 - 2021</td>
            <td>SMA Negeri 1 Surabaya</td>
        </tr>
        <tr>
            <td>2021 - Sekarang</td>
            <td>Universitas XYZ</td>
        </tr>
    </table>

    <!-- Form -->
    <h2>Kontak Saya</h2>
    <form>
        <label>Nama:</label><br>
        <input type="text" name="nama"><br><br>

        <label>Email:</label><br>
        <input type="email" name="email"><br><br>

        <label>Pesan:</label><br>
        <textarea name="pesan" rows="4" cols="30"></textarea><br><br>

        <input type="submit" value="Kirim">
    </form>

    <!-- Link -->
    <p>Kunjungi <a href="https://github.com">GitHub</a> saya untuk melihat project.</p>
</body>
</html>

4. Buka browser, lalu akses http://localhost/profil/index.html.

Tugas Individu

1. Modifikasi halaman profil dengan menambahkan:

   • Foto diri (gunakan gambar apapun sementara).

   • Tabel pengalaman organisasi (minimal 2 baris).

   • Form pendaftaran teman dengan input nama, email, dan hobi.

2. Kumpulkan file index.html dan buatlah dokumentasinya kemudian kirim ke google form tugas

Proyek

1. Halaman Biodata Sederhana

• Buat halaman biodata.html.

• Tampilkan: nama, tempat & tanggal lahir, alamat, jurusan, hobi.

• Gunakan heading untuk judul dan paragraf untuk deskripsi.

2. Daftar Hobi dengan List

• Buat halaman hobi.html.

• Tampilkan daftar hobi menggunakan unordered list dan ordered list.

• Contoh:

  • Unordered → Hobi harian (Membaca, Olahraga, Bermain Musik).

  • Ordered → Hobi favorit (1. Koding, 2. Traveling, 3. Menulis).

3. Navigasi Antar Halaman

• Buat 3 halaman: home.html, about.html, contact.html.

• Tambahkan link di bagian atas halaman agar bisa berpindah antar halaman.

• Contoh: [Home] [About] [Contact].

4. Galeri Foto

• Buat halaman galeri.html.

• Tampilkan minimal 4 gambar menggunakan tag <img>.

• Tambahkan atribut alt dan atur ukuran gambar agar seragam.

5. Tabel Jadwal Kuliah

• Buat halaman jadwal.html.

• Tampilkan tabel berisi jadwal kuliah (Hari, Mata Kuliah, Jam, Dosen).

• Gunakan <table>, <tr>, <th>, <td>.

6. Form Kontak

• Buat halaman kontak.html.

• Buat form dengan input: nama, email, pesan.

• Tambahkan tombol submit.

7. Curriculum Vitae (CV)

• Buat halaman cv.html.

• Tampilkan: data diri, pendidikan, pengalaman organisasi, skill.

• Gunakan heading, paragraf, list, tabel, dan link (misalnya ke LinkedIn/GitHub).

8. Artikel Sederhana

• Buat halaman artikel.html.

• Buat artikel pendek tentang topik bebas (misalnya teknologi, pendidikan, hobi).

• Gunakan heading untuk judul, paragraf untuk isi, dan link ke sumber referensi.

9. Daftar Menu Restoran

• Buat halaman menu.html.

• Tampilkan daftar makanan & minuman dengan harga.

• Gunakan tabel dengan kolom: Nama Menu, Kategori (Makanan/Minuman), Harga.

10. Profil dengan Semua Elemen

• Buat halaman profil.html.

• Isi harus memuat:

• Judul profil (heading)

• Paragraf deskripsi diri

• Foto profil (image)

• Daftar hobi (list)

• Tabel riwayat pendidikan

• Form kontak sederhana

• Link ke media sosial

Pengumpulan Tugas

Form Monitoring Tugas

Hasil Monitoring

Link Absen

Link Summary https://docs.zoom.us/doc/ShQiOO7dRt-fnNnP0wJcvg?from=doc_share&skipCheck=1

https://youtu.be/11AvAtd5zhg