Membuat website itu lebih mudah dari yang kamu kira! Kamu bisa mulai dengan tools dasar, dan dalam waktu kurang dari 1 jam, kamu sudah punya halaman web pertamamu.
🎯 Apa yang Akan Kamu Pelajari:
- Struktur dasar HTML
- Menambahkan style dengan CSS
- Membuat halaman responsive (bisa dibuka di HP)
- Menyimpan dan membuka file lokal
- Langkah lanjut: Hosting website ke internet
🧱 1. Struktur Dasar Website (HTML)
HTML adalah bahasa yang digunakan untuk menyusun struktur konten halaman web.
htmlCopyEdit<!DOCTYPE html>
<html>
<head>
<title>Website Pertamaku</title>
</head>
<body>
<h1>Halo Dunia!</h1>
<p>Ini adalah website pertama saya.</p>
</body>
</html>
💡 Simpan file ini dengan nama: index.html
Lalu buka di browser — voila! Kamu sudah bikin halaman web!
🎨 2. Menambahkan Warna dan Style (CSS)
CSS membuat tampilan website jadi menarik. Tambahkan ini di bagian <head>:
htmlCopyEdit<style>
body {
background-color: #f0f0f0;
font-family: Arial;
text-align: center;
}
h1 {
color: #333;
}
p {
font-size: 18px;
}
</style>
📱 3. Responsive Web (Bisa Dibuka di HP)
Tambahkan meta tag berikut di <head> agar web responsif:
htmlCopyEdit<meta name="viewport" content="width=device-width, initial-scale=1.0">
Kamu juga bisa mulai belajar CSS Flexbox untuk membuat layout yang rapi:
htmlCopyEdit<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
🧪 4. Simpan dan Coba Sendiri
Langkah:
- Buka Notepad / VS Code.
- Salin semua kode HTML di atas.
- Simpan dengan nama
index.html. - Klik dua kali untuk membuka di browser.
☁️ 5. Hosting Web ke Internet (Opsional)
Kalau kamu mau websitemu bisa diakses semua orang:
Opsi Gratis:
Langkah-langkah biasanya seperti ini:
- Upload file HTML ke GitHub
- Hubungkan ke Netlify/GitHub Pages
- Website kamu akan online dengan URL sendiri!
📌 Tips Tambahan untuk Belajar Web Development
- Pelajari HTML, CSS, dan JavaScript satu per satu.
- Gunakan VS Code sebagai editor (gratis & powerful).
- Cari inspirasi desain di:
- Gunakan template dari https://html5up.net untuk belajar struktur web.
✨ Bonus: Template Website Sederhana
Berikut contoh website mini dengan tombol dan link:
htmlCopyEdit<!DOCTYPE html>
<html>
<head>
<title>Portofolio Nofal</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { font-family: sans-serif; text-align: center; background: #fafafa; }
.btn { padding: 10px 20px; background: #007BFF; color: white; border: none; border-radius: 5px; }
</style>
</head>
<body>
<h1>Selamat Datang!</h1>
<p>Ini adalah website portofolio saya.</p>
<a href="https://instagram.com/" target="_blank">
<button class="btn">Kunjungi Instagram</button>
</a>
</body>
</html>
