Deskripsi & Skenario Proyek
Anda ditugaskan untuk membuat sebuah "Mini Website Pribadi" yang terdiri dari dua halaman: halaman Beranda dan halaman Kontak. Proyek ini bertujuan untuk mengaplikasikan semua pengetahuan dasar HTML dan sedikit CSS yang telah dipelajari untuk membuat sebuah produk web yang fungsional dan terstruktur dengan baik.
Website ini akan menjadi portofolio pertama Anda yang menunjukkan kemampuan Anda dalam menyusun konten menggunakan HTML dan memberikan gaya dasar menggunakan CSS.
Tugas & Langkah Pengerjaan
Langkah 1: Persiapan Struktur Proyek
Buat sebuah folder utama untuk proyek Anda (misal: mini-website). Di dalamnya, buat dua file HTML: index.html (untuk halaman Beranda) dan kontak.html (untuk halaman Kontak).
Langkah 2: Halaman Beranda (index.html)
Isi file index.html dengan konten berikut:
- Struktur HTML5 yang lengkap.
- Sebuah
<header>yang berisi judul utama website (<h1>). - Sebuah
<nav>(navigasi) yang berisi link ke "Beranda" (index.html) dan "Kontak" (kontak.html). - Sebuah
<main>yang berisi foto diri Anda (<img>), sub-judul "Tentang Saya" (<h2>), dan beberapa paragraf deskripsi diri. - Sebuah
<footer>dengan teks hak cipta (contoh: © 2024 Nama Anda).
Tampilan Hasil (Tanpa CSS)
Website Pribadi Saya
Tentang Saya
Halo! Nama saya [Nama Anda]. Saya adalah seorang siswa di [Nama Sekolah] dengan jurusan PPLG. Saya sangat tertarik dengan dunia pemrograman dan desain web.
Langkah 3: Halaman Kontak (kontak.html)
Salin struktur dasar dari index.html ke kontak.html. Ubah konten di dalam <main> menjadi:
- Sub-judul "Hubungi Saya" (
<h2>). - Sebuah daftar tidak berurut (
<ul>) yang berisi informasi kontak Anda, contohnya: Email, Instagram, dan LinkedIn. Buat teks Instagram dan LinkedIn menjadi link aktif ke profil Anda.
Langkah 4: Menambahkan Gaya (Internal CSS)
Di dalam tag <head> di kedua file, tambahkan tag <style>. Di dalamnya, tulis aturan CSS untuk:
- Mengubah warna latar belakang
bodymenjadi warna gelap. - Memberi warna teks yang kontras (terang).
- Membatasi lebar konten utama dan menempatkannya di tengah halaman.
- Memberi gaya pada link navigasi (menghilangkan garis bawah, memberi warna, dan efek
:hover). - Membuat gambar profil Anda memiliki sudut yang membulat (
border-radius).
Tampilan Hasil Akhir (Dengan CSS)
Website Pribadi Saya
Tentang Saya
Halo! Nama saya [Nama Anda]. Saya adalah seorang siswa di [Nama Sekolah] dengan jurusan PPLG. Saya sangat tertarik dengan dunia pemrograman dan desain web.
Format Pengumpulan & Penilaian
Kumpulkan seluruh folder proyek Anda dalam bentuk file .PDF "nama_nisn_tugas-web dan kirimkan sesuai instruksi yang diberikan oleh guru.
Kriteria Penilaian:
- Struktur HTML (40%): Penggunaan tag HTML5 yang benar dan semantik.
- Konten (20%): Kelengkapan konten sesuai dengan yang diminta.
- Styling CSS (25%): Penerapan gaya dasar berhasil dan membuat halaman terlihat lebih baik.
- Fungsionalitas Link (15%): Semua link navigasi berfungsi dengan benar untuk berpindah antar halaman.