Belajar Kode HTML
TKode dasar HTML untuk membuat halaman depan website sederhana. Anda bisa menyalin kode ini dan menyimpannya sebagai file dengan nama, misalnya, index.html.
Kode HTML Halaman Depan Dasar
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman Depan Website Saya</title>
<style>
/* Gaya CSS dasar untuk tampilan yang lebih baik */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #333;
color: white;
padding: 1em 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
}
nav ul li a {
color: white;
text-decoration: none;
padding: 0 15px;
display: block;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
padding: 20px 0;
}
.main-content {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em 0;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Selamat Datang di Website Saya</h1>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="tentang.html">Tentang Kami</a></li>
<li><a href="layanan.html">Layanan</a></li>
<li><a href="kontak.html">Kontak</a></li>
</ul>
</nav>
</header>
<div class="container">
<section class="main-content">
<h2>Tentang Kami</h2>
<p>Ini adalah paragraf pengantar singkat tentang website atau perusahaan Anda. Ceritakan tentang tujuan dan nilai-nilai Anda di sini.</p>
<h2>Fitur Unggulan</h2>
<p>Kami menawarkan berbagai fitur menarik seperti:</p>
<ul>
<li>Pelayanan Cepat dan Ramah.</li>
<li>Produk Berkualitas Tinggi.</li>
<li>Dukungan Pelanggan 24/7.</li>
</ul>
<p>Untuk memulai, silakan <a href="kontak.html">hubungi kami</a> atau jelajahi bagian <a href="layanan.html">layanan</a>.</p>
</section>
</div>
<footer>
<p>© 2025 Nama Website Anda. Semua Hak Cipta Dilindungi.</p>
</footer>
</body>
</html>
Penjelasan Singkat Bagian Kode
<!DOCTYPE html>dan<html lang="id">: Mendefinisikan dokumen sebagai HTML5 dan mengatur bahasa utama ke Bahasa Indonesia (id).<head>: Berisi metadata tentang halaman, bukan konten yang terlihat.<meta charset="UTF-8">: Mengatur encoding karakter untuk mendukung semua jenis teks.<title>: Teks yang akan muncul di tab browser.<style>: Blok ini berisi kode CSS dasar untuk memberikan sedikit gaya agar halaman tidak terlihat polos.
<body>: Berisi semua konten yang terlihat oleh pengunjung.<header>: Biasanya berisi judul (logo) dan navigasi utama (menu).<nav>: Berisi tautan navigasi ke halaman lain.
<div class="container">: Digunakan untuk membatasi lebar konten agar terlihat rapi di tengah halaman.<section class="main-content">: Berisi konten utama halaman (judul, paragraf, daftar).<h2>,<p>,<ul>,<li>: Tag untuk judul sub-bagian, paragraf, daftar tak berurutan, dan item daftar.<a href="...">: Tag untuk membuat tautan (link).
<footer>: Berisi informasi di bagian bawah halaman, seperti hak cipta.
Anda dapat memodifikasi teks, menambah, atau menghapus bagian sesuai kebutuhan website Anda! Untuk tampilan yang lebih canggih, Anda akan memerlukan CSS eksternal dan mungkin JavaScript.
Komentar
Posting Komentar