Temel HTML, CSS ve Javascript Bilgileriyle Website Örneği

Merhaba arkadaşlar bu yazımda aşağıdaki ekran fotoğrafı görülen websitenin arayüzünün kodlarını açıklayacağım. Aşağıdaki websitenin önce iskelet kısmı için html kodlarını yazıyorum.

//html kodları vscode editörü içerisinde oluşturduğum index.html sayfasına ekliyorum
!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kişisel Web Sitesi</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Header -->
    <header class="header">
        <h1>Adınız Soyadınız</h1>
        <nav class="nav">
            <a href="#about">Hakkımda</a>
            <a href="#projects">Projeler</a>
            <a href="#contact">İletişim</a>
        </nav>
    </header>

    <!-- About Section -->
    <section id="about" class="section">
        <h2>Hakkımda</h2>
        <p>Merhaba! Ben [Adınız], bir web geliştiricisiyim. Kendimi sürekli geliştirmek ve yeni projeler üretmek için çalışıyorum.</p>
    </section>

    <!-- Projects Section -->
    <section id="projects" class="section">
        <h2>Projeler</h2>
        <div class="projects">
            <div class="project">
                <h3>Proje 1</h3>
                <p>Bu proje bir blog uygulamasıdır.</p>
            </div>
            <div class="project">
                <h3>Proje 2</h3>
                <p>Bu proje bir e-ticaret platformudur.</p>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="section">
        <h2>İletişim</h2>
        <form id="contactForm">
            <label for="name">Adınız:</label>
            <input type="text" id="name" name="name" required>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
            <label for="message">Mesajınız:</label>
            <textarea id="message" name="message" rows="5" required></textarea>
            <button type="submit">Gönder</button>
        </form>
    </section>

    <footer class="footer">
        <p>&copy; 2024 Adınız. Tüm hakları saklıdır.</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>

Ardından style.css dosyasını oluşturup aşağıdaki özellikleri tanımlıyorum. Ve head etiketleri içerisine style.css klasörünü üstteki html sayfasında olduğu gibi yazılıp yazılmadığını kontrol ediyorum. Yanlış olması durumunda css dosyasını görmez.

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* Header */
.header {
    background: #333;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}

.header h1 {
    margin: 0;
}

.nav a {
    color: #fff;
    text-decoration: none;
    margin: 0 15px;
    font-size: 1.2rem;
}

.nav a:hover {
    text-decoration: underline;
}

/* Bölümler */
.section {
    padding: 2rem;
    text-align: center;
}

.section h2 {
    margin-bottom: 1rem;
    color: #333;
}

/* Projeler */
.projects {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.project {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 1rem;
    width: 300px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.project h3 {
    color: #333;
}

/* İletişim Formu */
form {
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
}

label {
    display: block;
    margin: 10px 0 5px;
}

input, textarea, button {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

button {
    background: #333;
    color: #fff;
    border: none;
    cursor: pointer;
}

button:hover {
    background: #555;
}

/* Footer */
.footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    margin-top: 20px;
}

Ekstra olarak form alanında uyarı, etkileşim için script.js dosyasını oluşturuyorum. script dosyasını html dosyasının görmesi için body etiketinin içine, en altına ekliyorum  <script src=”script.js”></script> şeklinde

// İletişim formunu kontrol et
document.getElementById("contactForm").addEventListener("submit", function (event) {
    event.preventDefault(); // Formun varsayılan gönderimini engelle

    const name = document.getElementById("name").value;
    const email = document.getElementById("email").value;
    const message = document.getElementById("message").value;

    if (!name || !email || !message) {
        alert("Lütfen tüm alanları doldurunuz.");
    } else {
        alert(`Teşekkürler, ${name}! Mesajınız başarıyla gönderildi.`);
        this.reset(); // Formu sıfırla
    }
});

Ve ctrl-s yaptıktan sonra masaüstüne kaydetmiş olduğunuz index.html uzantılı dosyanıza tıklayın , basit ve kişisel web sitesi taslağınız hazır olmuş olur.

Write a Reply

English Translate »