Website Sederhana
Halo Ges balik lagi pada kesempatan kali ini saya akan memberikan contoh code untuk membuat sebuah website sederhana dengan menggunakan HTML dan CSS Yang bisa kamu coba sendiri.
Kamu Bisa Menggunakan Sublime Text Maupun Visual Studio Code.
Website ini akan memiliki header, menu navigasi, konten utama, dan footer. Berikut adalah langkah-langkahnya:
1.Buat file HTML dengan nama “index.html” dan simpan di folder yang diinginkan.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Website</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<header>
<h1>Contoh Website</h1>
</header>
<nav>
<ul>
<li><a href=”isi sendiri”>Beranda</a></li>
<li><a href=”isi sendiri”>Tentang</a></li>
<li><a href=”isi sendiri”>Kontak</a></li>
</ul>
</nav>
<main>
<h2>Selamat Datang di Contoh Website!</h2>
<p>Ini adalah contoh website sederhana yang dibuat menggunakan HTML dan CSS.</p>
<p>Website ini memiliki header, menu navigasi, konten utama, dan footer.</p>
</main>
<footer>
<p>Apa Coba.</p>
</footer>
</body>
</html>
2.Buat file CSS dengan nama “style.css” dan simpan di folder yang sama dengan file “index.html”.
body {
font-family: Arial, sans-serif;
margin: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 10px;
}
nav li:last-child {
margin-right: 0;
}
nav a {
color: #333;
display: block;
padding: 10px;
text-decoration: none;
}
nav a:hover {
background-color: #333;
color: #fff;
}
main {
margin: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
3.Buka file “index.html” pada browser untuk melihat hasilnya.
Itulah contoh code untuk membuat sebuah website sederhana dengan menggunakan HTML dan CSS. Kamu dapat mengubah warna, font, dan konten sesuai dengan keinginan. Semoga bermanfaat
