Punya web pribadi bisa jadi cara seru untuk menunjukkan portofolio, menulis blog, atau sekadar menampilkan informasi tentang diri kalian. Kabar baiknya, kalian nggak perlu jadi ahli pemrograman dulu untuk bisa mulai. Pada artikel ini analiswinter.com akan membahas cara membuat project web pribadi dengan HTML secara sederhana tapi menarik.
Kita akan memulai dari struktur dasar HTML, menambahkan elemen penting seperti teks, gambar, dan tautan, hingga menyimpan dan menampilkan hasilnya di browser. Yuk kita bahas langkah-langkah membuat website pribadi kalian sendiri!
Struktur Dasar HTML
Sebelum masuk ke konten, penting banget memahami struktur dasar dari file HTML. Berikut contoh template dasar HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Pribadi Saya</title>
</head>
<body>
<h1>Selamat Datang di Web Pribadi Saya</h1>
<p>Halo! Nama saya Erwin. Ini adalah halaman web pribadi pertama saya.</p>
</body>
</html>
Template di atas adalah kerangka awal halaman HTML. Kalian bisa mengganti teks sesuai kebutuhan.
Menambahkan Elemen Penting
Setelah struktur dasar siap, kita bisa menambahkan elemen lain seperti:
1. Gambar Profil
<img src="profil.jpg" alt="Foto Profil" width="200">
Pastikan file profil.jpg ada di folder yang sama dengan file HTML kalian.
2. Tautan Media Sosial
<p>Temukan saya di:
<a href="https://instagram.com/namakalian" target="_blank">Instagram</a> |
<a href="https://linkedin.com/in/namakalian" target="_blank">LinkedIn</a>
</p>
3. Daftar Kegiatan atau Hobi
<h2>Hobi Saya</h2>
<ul>
<li>Menulis</li>
<li>Fotografi</li>
<li>Ngoding</li>
</ul>
Menyimpan dan Melihat di Browser
Simpan file HTML kalian dengan nama misalnya index.html. Setelah itu, cukup klik dua kali file tersebut atau buka lewat browser untuk melihat hasilnya.
Berikut adalah contoh dalam HTML lengkapnya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Pribadi Saya</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(to right, #ffffff, #f8f9fa);
color: #343a40;
}
header {
background: #1f1f1f;
color: white;
padding: 20px 40px;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.logo {
font-size: 1.8rem;
font-weight: 700;
letter-spacing: 1px;
}
nav {
display: flex;
gap: 25px;
}
nav a {
display: flex;
align-items: center;
gap: 8px;
color: white;
text-decoration: none;
font-weight: 500;
transition: color 0.3s, transform 0.3s;
}
nav a:hover {
color: #00d1b2;
transform: scale(1.05);
}
nav img {
width: 20px;
height: 20px;
}
main {
max-width: 1000px;
margin: 40px auto;
padding: 0 20px;
}
section {
background: white;
padding: 40px;
border-radius: 20px;
margin-bottom: 40px;
box-shadow: 0 15px 40px rgba(0,0,0,0.08);
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
}
section.visible {
opacity: 1;
transform: translateY(0);
}
h2 {
margin-bottom: 15px;
color: #212529;
font-size: 1.6rem;
}
ul li {
margin: 8px 0;
}
footer {
background: #1f1f1f;
color: white;
text-align: center;
padding: 20px;
}
button {
padding: 12px 24px;
background: #00d1b2;
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s, transform 0.3s;
}
button:hover {
background: #00b89c;
transform: scale(1.05);
}
a {
transition: all 0.3s;
}
</style>
</head>
<body>
<header>
<div class="logo">ErwinDev</div>
<nav>
<a href="#tentang">
<img src="https://img.icons8.com/ios-filled/50/user.png" alt="Tentang">
Tentang
</a>
<a href="#portofolio">
<img src="https://img.icons8.com/ios-filled/50/laptop.png" alt="Portofolio">
Portofolio
</a>
<a href="#kontak">
<img src="https://img.icons8.com/ios-filled/50/phone.png" alt="Kontak">
Kontak
</a>
</nav>
</header>
<main>
<section id="tentang">
<h2>Tentang Saya</h2>
<p>Saya adalah pengembang web yang berdedikasi untuk menciptakan pengalaman digital yang menarik dan fungsional. Dengan latar belakang di bidang desain dan pengembangan, saya terus berusaha menggabungkan estetika dan performa dalam setiap proyek.</p>
</section>
<section id="portofolio">
<h2>Portofolio</h2>
<ul>
<li><strong>Website Bisnis:</strong> Membangun situs modern untuk UMKM</li>
<li><strong>Aplikasi To-Do List:</strong> Menggunakan JavaScript untuk interaktivitas</li>
<li><strong>Blog Pribadi:</strong> Menampilkan tulisan dan artikel teknologi</li>
</ul>
</section>
<section id="kontak">
<h2>Kontak Saya</h2>
<p>Email: email@saya.com</p>
<p>Instagram: <a href="https://instagram.com/saya" target="_blank">@saya</a></p>
<button onclick="showAlert()">Hubungi Saya</button>
</section>
</main>
<footer>
© 2025 Website Pribadi Saya. Dibuat dengan ❤️ dan semangat.
</footer>
<script>
function showAlert() {
alert("Terima kasih telah menghubungi! Saya akan segera membalas pesan kalian.");
}
// Animasi ketika scroll
const sections = document.querySelectorAll('section');
const revealOnScroll = () => {
const triggerBottom = window.innerHeight * 0.85;
sections.forEach(sec => {
const top = sec.getBoundingClientRect().top;
if (top < triggerBottom) {
sec.classList.add('visible');
}
});
};
window.addEventListener('scroll', revealOnScroll);
window.addEventListener('load', revealOnScroll);
</script>
</body>
</html>Kesimpulan
Membuat project web pribadi dengan HTML ternyata cukup mudah dan menyenangkan, bukan? Dengan struktur sederhana dan elemen-elemen dasar seperti teks, gambar, dan tautan, kalian sudah bisa membuat web yang mencerminkan diri kalian. Itulah tadi artikel dari analiswinter.com, jika ada hal yang ingin ditanyakan bisa langsung ke kolom komentar!
Komentar