Tantangan ini meliputi penyelesaian tugas pembuatan website dasar organisasi UKM Informatika & Komputer. File HTML yang disediakan mencakup placeholder yang ditandai dengan komentar TODO. Tugas Anda adalah mengisi placeholder ini dan menyelesaikan tugas berikut:
- Impor file CSS yang disediakan di folder ini menggunakan tag
<link>
di bagian<head>
.
- Isi bagian
<header>
dengan logo organisasi, nama, dan navbar.- Tambahkan logo UKMIK menggunakan tag
<img>
. (Petunjuk: File gambarnya adalah "logo_ukmik.png" di folder ini). - Tambahkan nama organisasi dalam tag
<h1>
dengan teks "UKM Informatika & Komputer". - Buat navbar menggunakan tag
<nav>
dengan daftar item menu menggunakan<ul>
dan<li>
. - Setiap item menu harus menggunakan tag
<a>
dengan atributhref
yang menunjuk keid
bagian terkait.
- Tambahkan logo UKMIK menggunakan tag
- Isi
<section id="about">
dengan informasi tentang organisasi.- Tambahkan tag
<h2>
dengan teks "Tentang Kami". - Sertakan satu atau lebih tag
<p>
dengan deskripsi organisasi.
- Tambahkan tag
- Isi
<section id="departement">
dengan informasi tentang masing-masing departemen.- Tambahkan tag
<h2>
dengan teks "Departemen Kami". - Buat
<div>
terpisah atau tag lain untuk setiap departemen menggunakan kelas "departemen". <div>
setiap departemen harus memiliki dua anak:- Tag
<h1>
untuk nama departemen. - Tag
<p>
dengan penjelasan singkat tentang departemen.
- Tag
- Tambahkan tag
- Isi
<section id="contact">
dengan formulir kontak sederhana.- Tambahkan tag
<h2>
dengan teks "Hubungi Kami". - Buat formulir kontak menggunakan tag
<form>
, termasuk kolom input untuk nama, email, pesan, dan tombol kirim.
- Tambahkan tag
- Tambahkan tag
<footer>
dengan informasi hak cipta dan organisasi.- Sertakan informasi hak cipta dan rincian kontak yang relevan atau informasi lainnya.
- Tambahkan aturan media query untuk layar dengan lebar kurang dari 768px.
- Sesuaikan gaya elemen-elemen berikut agar tampilan website tetap baik pada layar kecil:
- Body
- Header dan logo
- Daftar menu
- Bagian-bagian section
- Departemen
- Formulir kontak
- Tombol dan elemen-elemen lainnya
Contoh aturan media query sudah disediakan di dalam File CSS. Silakan sesuaikan nilai-nilai sesuai dengan desain responsif yang diinginkan.
Jangan ragu untuk menyesuaikan konten dan gaya sesuai kebutuhan. Setelah selesai, Anda harus memiliki struktur website dasar untuk organisasi UKM Informatika & Komputer.
Jika mengalami kesulitan & kendala jangan ragu untuk bertanya ke mentor.
Good Luck!