Baiklah, saya akan memberikan contoh website sederhana menggunakan HTML, CSS, dan JavaScript. Website ini akan memiliki fitur dasar seperti header, navigasi, konten, dan footer.
Struktur Proyek
- index.html
- style.css
- script.js
index.html
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Sederhana</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Selamat Datang di Website Sederhana</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="content">
<h2>Konten Utama</h2>
<p>Ini adalah contoh konten utama dari website.</p>
<button id="changeTextButton">Ubah Teks</button>
</section>
</main>
<footer>
<p>© 2024 Website Sederhana</p>
</footer>
<script src="script.js"></script>
</body>
</html>
style.css
cssbody {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: white;
text-decoration: none;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}
script.js
javascriptdocument.addEventListener('DOMContentLoaded', function() {
const button = document.getElementById('changeTextButton');
const content = document.getElementById('content');
button.addEventListener('click', function() {
content.innerHTML = '<h2>Teks Telah Diubah!</h2><p>Teks ini telah diubah menggunakan JavaScript.</p>';
});
});
Website ini memiliki header dengan navigasi, area konten utama, dan footer. Pada area konten utama, terdapat tombol yang ketika diklik akan mengubah teks di dalam elemen konten menggunakan JavaScript.
Jika Anda memiliki fitur tambahan atau modifikasi yang diinginkan, silakan beritahu saya!
Tidak ada komentar:
Posting Komentar