Membuat Project Web Pribadi dengan HTML
Pada latihan kali ini, kita akan mencoba membuat proyek web sederhana. Tujuan dari latihan ini
adalah untuk memahami langkah-langkah dalam membuat sebuah website serta melatih
keterampilan dasar pengembangan web.
Step 1 – Membuat Desain Web
Pembuatan web dimulai dengan desain. Kalau tidak ada desain, nanti kita akan kesulitan dan
tidak akan tahu mau buat apa.
Biasanya desain web dikerjakan oleh desainer, setelah itu diserahkan ke programmer untuk
diubah menjadi HTML.
Pada project ini, kita akan membuat tiga halaman web, yakni home, contact, dan about. Desain
yang digunakan adalah desain dalam bentuk wireframe atau sketsa.
Berikut ini desain untuk tiap-tiap halaman:
1. Desain Halaman Home
Halaman home adalah halaman utama yang akan dibuka pertama kali saat pengunjung
membuka website. Halaman ini berisi menu, foto, teks, dan tabel.
2. Desain Halaman Contact
Halaman contact adalah halaman yang berisi form untuk menghubungi pemilik website.
3. Desain Halaman About
Halaman about adalah halaman yang berisi informasi lengkap tentang website.
Step 2 – Memulai Project Web
Silakan buat folder baru dengan nama websiteku.
Setelah itu buat folder image dan video di dalam folder websiteku. Folder image akan kita
gunakan untuk menyimpan gambar dan video untuk menyimpan video.
Sehingga nanti struktur folder kita akan menjadi seperti ini:
File yang perlu kamu persiapkan di tahapan ini adalah foto-profile.jpg dan video-about.webm.
Berikutnya, kita akan mulai menulis kode. Silakan buka folder websiteku dengan SublimeText.
Step 3 – Membuat Halaman Home
Silakan buat file baru bernama index.html di dalam folder websiteku.
Setelah itu, isi dengan kode berikut:
Jika kita coba membuka file index.html, maka hasilnya akan seperti ini:
Step 4 – Membuat Halaman About Me
Buatlah file HTML baru dengan nama about.html
Kemudian isi dengan kode berikut:
Sama seperti halaman home, halaman ini juga memiliki konten berupa video untuk ditampilkan.
Step 5 – Membuat Halaman Contact
Buatlah file baru dengan nama contact.html.
Form contact ini belum bisa berfungsi, karena kita belum membuat kode untuk mengirim data.
Step 6 – Membuat Fitur Download CV
Fitur ini adalah yang paling mudah dibuat. Kita hanya perlu menambahkan file cv-irfan.pdf ke
dalam folder websiteku.
Step 7 – Membuat Ikon untuk Web
Agar websitenya terlihat menarik, kita akan membuat ikon atau favicon. Silakan buka
https://www.favicon-generator.org kemudian pilih gambar yang akan dijadikan ikon. Setelah itu,
kita akan mendapatkan link download dan juga kode HTML yang harus ditambahkan ke dalam
tag <head> agar ikon bisa ditampilkan. Setelah kita mendapatkan ikon, simpan ikonnya ke
dalam folder websiteku.
Selanjutnya, tugas kita tinggal membuat kode HTML untuk menampilkan ikon. Silakan copy kode
berikut:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
Kemudian paste di dalam tag <head> pada setiap halaman.
Step 8 – Membuat Kode Css
Tambahkan folder dengan css di dalam folder websiteku, kemudian buat file css dengan nama
main.css seperti berikut :
setelah itu buat kode css seperti di bawah ini :
Hasil akhir website pribadi seperti pada gambar di bawah ini :
