Cara membuat website dalam berupa kode program HTML,Css, dan JavaScript
Berikut adalah contoh kode program sederhana untuk membuat suatu website menggunakan HTML, CSS, dan JavaScript:
HTML (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 Saya</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">Tentang</a></li>
<li><a href="#contact">Kontak</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h1>Selamat Datang di Website Saya!</h1>
<p>Ini adalah contoh website sederhana.</p>
</section>
<section id="about">
<h2>Tentang Saya</h2>
<p>Saya adalah seorang pengembang web.</p>
</section>
<section id="contact">
<h2>Kontak</h2>
<p>Anda dapat menghubungi saya melalui email atau media sosial.</p>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
```
CSS (style.css)
```
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 1em;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
display: flex;
flex-direction: column;
align-items: center;
padding: 2em;
}
section {
background-color: #f7f7f7;
padding: 1em;
margin-bottom: 1em;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
```
JavaScript (script.js)
```
// Contoh kode JavaScript untuk menambahkan interaksi pada website
document.addEventListener("DOMContentLoaded", function () {
const navLinks = document.querySelectorAll("nav a");
navLinks.forEach((link) => {
link.addEventListener("click", function (event) {
event.preventDefault();
const targetId = link.getAttribute("href");
const targetElement = document.querySelector(targetId);
targetElement.scrollIntoView({ behavior: "smooth" });
});
});
});
```
Kode program di atas hanya contoh sederhana untuk membuat suatu website. Anda dapat menambahkan fitur-fitur lain seperti responsif, animasi, dan lain-lain untuk membuat website lebih menarik dan interaktif.
Komentar
Posting Komentar