Ingin punya website sendiri tapi bingung mulai dari mana? Jangan khawatir! Artikel ini akan memandu Anda cara membuat website sederhana dengan HTML CSS secara step-by-step, bahkan jika Anda seorang pemula sekalipun. Kita akan membahas dari dasar hingga Anda bisa melihat website sederhana Anda online. Yuk, simak panduan lengkapnya!
1. Mengapa Belajar Membuat Website dengan HTML CSS? (Keuntungan dan Dasar-Dasar)
Sebelum kita terjun langsung ke coding, mari kita pahami dulu mengapa HTML dan CSS sangat penting dalam pembuatan website, dan apa saja keuntungan yang bisa Anda dapatkan dengan menguasai keduanya.
- Kontrol Penuh: Dengan HTML dan CSS, Anda memiliki kendali penuh atas tampilan dan struktur website Anda. Tidak perlu bergantung pada template atau builder yang kaku.
- Fleksibilitas Tinggi: Anda bisa membuat website yang unik dan sesuai dengan kebutuhan spesifik Anda. Tidak ada batasan dalam hal desain dan fungsionalitas (walaupun untuk fungsionalitas kompleks, Anda mungkin membutuhkan JavaScript).
- Fondasi Penting: HTML dan CSS adalah fondasi dari semua website. Memahaminya akan memudahkan Anda mempelajari teknologi web lainnya, seperti JavaScript dan framework seperti React, Angular, atau Vue.js.
- Peluang Karir: Kemampuan HTML dan CSS sangat dicari di industri web development. Ini bisa membuka pintu bagi Anda untuk karir yang menarik.
- SEO-Friendly: Dengan struktur HTML yang baik dan CSS yang bersih, website Anda akan lebih mudah diindeks oleh mesin pencari seperti Google, sehingga meningkatkan visibilitas online Anda.
Dasar-Dasar HTML: HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat struktur dan konten website. HTML menggunakan tag untuk menentukan elemen-elemen seperti paragraf, heading, gambar, link, dan lain-lain.
Dasar-Dasar CSS: CSS (Cascading Style Sheets) adalah bahasa style sheet yang digunakan untuk mengatur tampilan dan formatting website. CSS mengatur warna, font, layout, dan aspek visual lainnya.
Singkatnya, HTML adalah kerangka bangunan website, dan CSS adalah cat dan dekorasinya. Tanpa keduanya, website Anda akan terasa kurang lengkap.
2. Persiapan Awal: Editor Kode dan Struktur Folder (Setting Lingkungan Kerja)
Sebelum memulai cara membuat website sederhana dengan HTML CSS, kita perlu mempersiapkan lingkungan kerja kita. Ini termasuk memilih editor kode dan membuat struktur folder yang rapi.
-
Memilih Editor Kode: Editor kode adalah aplikasi yang digunakan untuk menulis dan mengedit kode. Ada banyak editor kode gratis dan berbayar yang tersedia. Beberapa yang populer meliputi:
- Visual Studio Code (VS Code): Gratis, open-source, dan sangat populer dengan banyak ekstensi yang berguna. (Rekomendasi)
- Sublime Text: Berbayar, tetapi menawarkan versi trial gratis. Ringan dan cepat.
- Atom: Gratis dan open-source, dikembangkan oleh GitHub.
- Notepad++ (Windows): Gratis dan ringan, pilihan yang baik untuk pemula.
Pilihlah editor kode yang paling nyaman bagi Anda. VS Code sangat direkomendasikan karena kemudahan penggunaan dan banyaknya ekstensi yang tersedia.
-
Membuat Struktur Folder: Struktur folder yang rapi akan memudahkan Anda mengelola file website Anda. Buatlah folder utama untuk website Anda (misalnya, “website-sederhana”). Di dalam folder ini, buatlah folder-folder berikut:
- css: Untuk menyimpan file CSS.
- images: Untuk menyimpan gambar.
- js: Untuk menyimpan file JavaScript (jika ada).
Di dalam folder utama (misalnya, “website-sederhana”), buatlah file
index.html. Ini akan menjadi halaman utama website Anda.
Dengan lingkungan kerja yang sudah siap, kita siap untuk mulai coding!
3. Membuat Struktur Dasar HTML (Dokumen HTML dan Tag-Tag Penting)
Sekarang, mari kita mulai cara membuat website sederhana dengan HTML CSS dengan membuat struktur dasar HTML. Buka file index.html di editor kode Anda, dan ketikkan kode berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Sederhana Saya</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Konten website akan ditempatkan di sini -->
<h1>Selamat Datang di Website Sederhana Saya!</h1>
<p>Ini adalah paragraf pertama di website saya.</p>
</body>
</html>Mari kita bahas kode di atas:
<!DOCTYPE html>: Mendeklarasikan bahwa dokumen ini adalah dokumen HTML5.<html lang="id">: Element root dari dokumen HTML. Atributlang="id"menentukan bahwa bahasa dokumen adalah Bahasa Indonesia.<head>: Berisi metadata tentang dokumen, seperti judul, karakter set, dan link ke stylesheet.<meta charset="UTF-8">: Menentukan karakter set yang digunakan untuk dokumen. UTF-8 adalah karakter set yang paling umum dan mendukung berbagai bahasa.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Mengatur viewport untuk responsif design. Ini penting agar website Anda terlihat baik di berbagai perangkat.<title>Website Sederhana Saya</title>: Judul website yang akan ditampilkan di tab browser.<link rel="stylesheet" href="css/style.css">: Menghubungkan file HTML ke file CSS (style.css) yang akan kita buat nanti.
<body>: Berisi konten website yang akan ditampilkan kepada pengguna.<h1>Selamat Datang di Website Sederhana Saya!</h1>: Heading level 1, biasanya digunakan untuk judul utama halaman.<p>Ini adalah paragraf pertama di website saya.</p>: Paragraf teks.
Sekarang, simpan file index.html dan buka di browser Anda. Anda akan melihat website sederhana dengan judul dan paragraf teks. Belum ada styling, tapi inilah awal yang baik!
4. Membuat File CSS dan Memberi Style pada Website (Dasar CSS dan Selector)
Selanjutnya, mari kita buat file CSS untuk memberikan style pada website kita. Buatlah file baru bernama style.css di dalam folder css. Kemudian, ketikkan kode berikut:
body {
font-family: sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
h1 {
color: #333;
text-align: center;
padding: 20px;
}
p {
color: #666;
line-height: 1.6;
padding: 10px 20px;
}Mari kita bahas kode di atas:
body: Ini adalah selector yang menargetkan elemen<body>di HTML. Di dalam kurung kurawal{}, kita menentukan properti CSS yang ingin kita ubah.font-family: sans-serif;: Mengatur font untuk seluruh body website menjadi sans-serif.background-color: #f0f0f0;: Mengatur warna background menjadi abu-abu muda.margin: 0;: Menghapus margin default dari body.padding: 0;: Menghapus padding default dari body.
h1: Ini adalah selector yang menargetkan elemen<h1>di HTML.color: #333;: Mengatur warna teks menjadi abu-abu gelap.text-align: center;: Mengatur teks agar berada di tengah.padding: 20px;: Memberikan padding 20px di sekeliling heading.
p: Ini adalah selector yang menargetkan elemen<p>di HTML.color: #666;: Mengatur warna teks menjadi abu-abu sedang.line-height: 1.6;: Mengatur jarak antar baris teks.padding: 10px 20px;: Memberikan padding 10px di atas dan bawah, dan 20px di kiri dan kanan.
Sekarang, simpan file style.css dan refresh browser Anda. Anda akan melihat bahwa website Anda sekarang memiliki styling yang lebih menarik. Inilah kekuatan CSS!
5. Menambahkan Konten: Gambar, Link, dan Daftar (Elemen HTML Tambahan)
Selain heading dan paragraf, kita juga bisa menambahkan elemen lain ke website kita, seperti gambar, link, dan daftar. Mari kita tambahkan beberapa elemen ini ke index.html:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Sederhana Saya</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Selamat Datang di Website Sederhana Saya!</h1>
<p>Ini adalah paragraf pertama di website saya.</p>
<h2>Gambar</h2>
<img src="images/example.jpg" alt="Contoh Gambar" width="300">
<h2>Link</h2>
<a href="https://www.google.com" target="_blank">Kunjungi Google</a>
<h2>Daftar</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>Daftar Berurut</h2>
<ol>
<li>Langkah 1</li>
<li>Langkah 2</li>
<li>Langkah 3</li>
</ol>
</body>
</html><h2>Gambar</h2>: Heading level 2 untuk bagian gambar.<img src="images/example.jpg" alt="Contoh Gambar" width="300">: Menambahkan gambar ke website. Atributsrcmenentukan lokasi gambar,altmemberikan teks alternatif jika gambar tidak dapat ditampilkan, danwidthmengatur lebar gambar. Pastikan Anda memiliki file gambar bernamaexample.jpgdi dalam folderimages.<h2>Link</h2>: Heading level 2 untuk bagian link.<a href="https://www.google.com" target="_blank">Kunjungi Google</a>: Membuat link ke website lain. Atributhrefmenentukan URL tujuan, dantarget="_blank"membuka link di tab baru.<h2>Daftar</h2>: Heading level 2 untuk bagian daftar.<ul>: Membuat daftar tak berurut (unordered list).<li>Item 1</li>: Setiap<li>adalah item dalam daftar.
<h2>Daftar Berurut</h2>: Heading level 2 untuk bagian daftar berurut.<ol>: Membuat daftar berurut (ordered list).<li>Langkah 1</li>: Setiap<li>adalah item dalam daftar.
Sekarang, refresh browser Anda. Anda akan melihat gambar, link, dan daftar di website Anda. Anda bisa menyesuaikan konten dan styling elemen-elemen ini sesuai dengan keinginan Anda.
6. Membuat Navigasi (Menu) Sederhana (Struktur Navigasi dengan HTML dan CSS)
Navigasi atau menu sangat penting untuk memudahkan pengguna menjelajahi website Anda. Mari kita buat navigasi sederhana di bagian atas website kita. Tambahkan kode berikut di dalam <body> di atas <h1>:
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Layanan</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>Ini adalah daftar tak berurut yang berisi link ke halaman-halaman lain di website kita. Tentu saja, halaman-halaman ini belum ada, tetapi kita bisa menggunakan placeholder # sebagai URL sementara.
Sekarang, mari kita berikan style pada navigasi ini menggunakan CSS. Tambahkan kode berikut ke style.css:
nav {
background-color: #333;
color: white;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex; /* Menggunakan flexbox untuk mengatur item secara horizontal */
justify-content: center; /* Mengatur item agar berada di tengah */
}
nav li {
margin: 0 10px;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}nav: Memberikan background color, warna teks, dan padding pada navigasi.nav ul: Menghapus bullet point dari daftar, menghapus margin dan padding default, dan menggunakan flexbox untuk mengatur item secara horizontal.nav li: Memberikan margin di antara item-item navigasi.nav a: Memberikan warna teks dan menghapus garis bawah pada link.nav a:hover: Memberikan garis bawah pada link saat di-hover.
Refresh browser Anda. Anda akan melihat navigasi sederhana di bagian atas website Anda. Anda bisa menyesuaikan warna, font, dan layout navigasi ini sesuai dengan keinginan Anda. Penggunaan display: flex dan justify-content: center sangat membantu untuk membuat menu horizontal yang responsif.
7. Membuat Layout Sederhana dengan Div dan CSS (Penggunaan Div dan Flexbox/Grid)
Layout adalah bagaimana konten di website Anda diatur. Kita bisa menggunakan <div> dan CSS untuk membuat layout yang fleksibel dan responsif. Mari kita buat layout sederhana dengan header, main content, dan footer.
Pertama, ubah index.html menjadi seperti berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Sederhana Saya</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Website Sederhana Saya</h1>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Layanan</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Tentang Kami</h2>
<p>Ini adalah bagian tentang kami. Kami adalah tim yang berdedikasi untuk membuat website yang indah dan fungsional.</p>
</section>
<section>
<h2>Layanan</h2>
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>SEO Optimization</li>
</ul>
</section>
</main>
<footer>
<p>© 2023 Website Sederhana Saya</p>
</footer>
</body>
</html>Kita menggunakan <header>, <main>, <section>, dan <footer> untuk membagi konten website menjadi bagian-bagian yang logis. <header> berisi judul dan navigasi, <main> berisi konten utama, dan <footer> berisi informasi hak cipta. Kita juga menggunakan <section> untuk membagi konten utama menjadi bagian-bagian yang lebih kecil.
Sekarang, mari kita berikan style pada layout ini menggunakan CSS. Tambahkan kode berikut ke style.css:
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}header: Memberikan background color, warna teks, padding, dan mengatur teks agar berada di tengah.main: Memberikan padding pada bagian utama website.section: Memberikan margin di bawah setiap section.footer: Memberikan background color, warna teks, mengatur teks agar berada di tengah, dan memberikan padding.
Refresh browser Anda. Anda akan melihat layout sederhana dengan header, main content, dan footer. Anda bisa menyesuaikan layout ini lebih lanjut menggunakan flexbox atau grid untuk membuat layout yang lebih kompleks dan responsif. Contoh penggunaan Flexbox:
main {
display: flex;
flex-wrap: wrap; /* Membuat section bisa pindah baris jika tidak cukup ruang */
justify-content: space-around; /* Mengatur jarak antar section */
padding: 20px;
}
section {
width: 45%; /* Mengatur lebar section, agar bisa muat dua section dalam satu baris */
margin-bottom: 20px;
border: 1px solid #ccc; /* Menambahkan border untuk membedakan section */
padding: 10px;
box-sizing: border-box; /* Memastikan padding dan border tidak menambah lebar elemen */
}Dengan menambahkan kode di atas, Anda akan melihat bagian “Tentang Kami” dan “Layanan” berdampingan jika layar cukup lebar, dan akan menumpuk ke bawah jika layar lebih kecil. Hal ini menunjukkan salah satu kegunaan flexbox dalam membuat layout yang responsif.
8. Membuat Website Responsif (Media Queries)
Website responsif adalah website yang terlihat baik di berbagai perangkat, mulai dari desktop hingga smartphone. Kita bisa menggunakan media queries untuk membuat website kita responsif. Media queries memungkinkan kita untuk menerapkan style CSS yang berbeda berdasarkan ukuran layar perangkat.
Mari kita tambahkan media query ke style.css untuk membuat website kita responsif:
/* Default styles for larger screens */
body {
font-family: sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
h1 {
color: #333;
text-align: center;
padding: 20px;
}
p {
color: #666;
line-height: 1.6;
padding: 10px 20px;
}
/* Styles for smaller screens (e.g., mobile phones) */
@media (max-width: 768px) {
h1 {
font-size: 24px; /* Mengurangi ukuran font heading */
}
p {
font-size: 14px; /* Mengurangi ukuran font paragraf */
}
nav ul {
flex-direction: column; /* Mengatur item navigasi menjadi vertikal */
align-items: center; /* Memusatkan item navigasi */
}
nav li {
margin: 5px 0; /* Mengurangi margin item navigasi */
}
main {
padding: 10px; /* Mengurangi padding main */
}
section {
width: 100%; /* Membuat section memakan lebar penuh */
}
}Kode @media (max-width: 768px) berarti bahwa style di dalam kurung kurawal hanya akan diterapkan jika lebar layar kurang dari atau sama dengan 768px. Ini adalah ukuran layar yang umum untuk smartphone.
Di dalam media query, kita mengubah ukuran font heading dan paragraf, mengatur item navigasi menjadi vertikal, mengurangi margin item navigasi, mengurangi padding main, dan membuat section memakan lebar penuh.
Sekarang, buka website Anda di browser Anda dan perkecil ukuran jendela browser. Anda akan melihat bahwa website Anda berubah tampilannya saat lebar layar kurang dari 768px. Ini adalah contoh sederhana dari website responsif. Anda bisa menambahkan lebih banyak media queries untuk menyesuaikan tampilan website Anda di berbagai ukuran layar.
9. Validasi HTML dan CSS (Memastikan Kode Valid)
Memastikan kode HTML dan CSS Anda valid sangat penting untuk memastikan website Anda berfungsi dengan baik di semua browser dan perangkat. Anda bisa menggunakan validator online untuk memvalidasi kode Anda.
- HTML Validator: https://validator.w3.org/
- CSS Validator: https://jigsaw.w3.org/css-validator/
Cukup salin dan tempel kode Anda ke validator, dan validator akan memberitahu Anda jika ada kesalahan. Perbaiki kesalahan-kesalahan ini untuk memastikan kode Anda valid.
10. Hosting Website Sederhana (Menyimpan Website Online)
Setelah Anda selesai membuat website sederhana Anda, Anda perlu menghostingnya agar bisa diakses oleh orang lain secara online. Ada banyak pilihan hosting yang tersedia, baik gratis maupun berbayar.
- GitHub Pages: Gratis untuk website statis (HTML, CSS, JavaScript). Cocok untuk proyek sederhana dan portfolio.
- Netlify: Gratis untuk website statis. Mudah digunakan dan menawarkan fitur-fitur seperti continuous deployment.
- Vercel: Gratis untuk website statis. Serupa dengan Netlify.
- Hosting Berbayar: Jika Anda membutuhkan lebih banyak fitur dan kontrol, Anda bisa menggunakan hosting berbayar seperti Niagahoster, Hostinger, atau DomaiNesia.
Pilihlah hosting yang sesuai dengan kebutuhan dan anggaran Anda. Untuk website sederhana, GitHub Pages, Netlify, atau Vercel adalah pilihan yang baik.
11. Tips SEO Sederhana untuk Website Anda (Optimasi Dasar untuk Mesin Pencari)
Meskipun website kita sederhana, kita tetap bisa menerapkan beberapa tips SEO dasar untuk meningkatkan visibilitas website kita di mesin pencari seperti Google.
- Judul Halaman yang Relevan: Pastikan setiap halaman memiliki judul yang relevan dan deskriptif. Gunakan tag
<title>untuk menentukan judul halaman. - Deskripsi Meta: Tambahkan deskripsi meta ke setiap halaman. Deskripsi meta adalah ringkasan singkat tentang konten halaman. Gunakan tag
<meta name="description" content="...">untuk menentukan deskripsi meta. - Heading yang Terstruktur: Gunakan heading (
<h1>hingga<h6>) untuk membagi konten Anda menjadi bagian-bagian yang logis dan terstruktur. Gunakan heading yang relevan dan mengandung kata kunci. - Teks Alternatif pada Gambar: Tambahkan teks alternatif (
alt) pada setiap gambar. Teks alternatif akan ditampilkan jika gambar tidak dapat dimuat, dan juga membantu mesin pencari memahami isi gambar. - URL yang Bersih: Gunakan URL yang bersih dan mudah dibaca. Hindari URL yang panjang dan rumit.
- Link Internal dan Eksternal: Tambahkan link internal ke halaman-halaman lain di website Anda, dan link eksternal ke website lain yang relevan.
- Konten Berkualitas: Buat konten yang berkualitas, informatif, dan relevan bagi target audiens Anda.
- Responsif: Pastikan website Anda responsif dan terlihat baik di berbagai perangkat.
- Kecepatan Website: Optimalkan kecepatan website Anda. Website yang lambat akan menurunkan peringkat di mesin pencari.
- Gunakan Keyword yang Tepat: Penelitian kata kunci yang relevan dengan topik website Anda dan gunakan secara alami dalam konten Anda. Jangan melakukan keyword stuffing.
Dengan menerapkan tips SEO dasar ini, Anda bisa meningkatkan visibilitas website Anda di mesin pencari dan menarik lebih banyak pengunjung.
12. Kesimpulan: Selamat, Anda Telah Membuat Website Sederhana!
Selamat! Anda telah mengikuti panduan cara membuat website sederhana dengan HTML CSS ini dan sekarang memiliki website sendiri. Ini hanyalah permulaan. Dengan terus belajar dan berlatih, Anda bisa membuat website yang lebih kompleks dan menarik. Jangan takut untuk bereksperimen dan mencoba hal-hal baru.
Ingatlah bahwa HTML dan CSS adalah fondasi penting dalam web development. Dengan menguasai keduanya, Anda bisa membuka pintu bagi Anda untuk karir yang menarik di industri web development. Teruslah belajar, dan jangan pernah berhenti berkreasi! Semoga artikel ini bermanfaat dan selamat berkarya!
