İşte HTML, CSS ve JavaScript kullanan basit bir web sitesi arayüz kodu örneği:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Simple Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Welcome to My Simple Website</h1>
<div id="content">
<p>Please enter your name:</p>
<input type="text" id="name-input">
<button id="submit-button">Submit</button>
<p id="greeting"></p>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
body {
font-family: Arial, sans-serif;
text-align: center;
}
#content {
margin: 0 auto;
width: 400px;
text-align: left;
}
JavaScript:
const nameInput = document.getElementById("name-input");
const submitButton = document.getElementById("submit-button");
const greeting = document.getElementById("greeting");
submitButton.addEventListener("click", function() {
const name = nameInput.value;
greeting.textContent = "Hello, " + name + "!";
});
Bu kod, metin giriş alanı ve gönder düğmesi olan basit bir web sitesi oluşturur. Gönder düğmesine tıklandığında, JavaScript kodu metin girişinin değerini alır ve sayfada giriş değeriyle birlikte bir selamlama görüntüler.
Bunun sadece basit bir örnek olduğunu ve bir web sitesi arayüz kodu yazmanın başka birçok yolu olduğunu unutmayın. Bu kod, daha karmaşık ve dinamik web siteleri oluşturmak için genişletilebilir ve özelleştirilebilir.
