HTML ve CSS Kullanarak Kullanıcı Giriş Sayfası Oluşturma

Blog Gönderisi Resmi

Hizmetlerimiz hakkında bilgi almak için tıklayın.

Merhabalar!

Bu bölümde HTML ve CSS kullanarak bir kullanıcı giriş sayfası oluşturacağız.

HTML Yapısı:


Önceki bölümlerde HTML Yapısı oluşturmayı öğrenmiştik, eğer HTML Yapısı oluşturmayı bilmiyorsanız önceki HTML makalelerini ziyaret edebilirsiniz.

Öncelikle, HTML yapısını oluşturalım. Bu yapı, form elemanlarını ve giriş butonunu içerecek.


 <!DOCTYPE html>
 <html>
 <head>
    <title>Giriş Sayfası</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="login-container">
        <form action="/submit-your-login-form.php" method="post">
            <h2>Giriş Yap</h2>
            <div class="input-group">
                <label for="username">Kullanıcı Adı</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="input-group">
                <label for="password">Şifre</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">Giriş Yap</button>
        </form>
    </div>
</body>
</html>

Yukarıda Ne Yaptık?


Döküman Başlangıcı ve Başlık:

  1. <!DOCTYPE html> ile HTML5 belgesi başlatılır.
  2. <html> etiketi HTML dökümanının başlangıcını gösterir.
  3. <head> bölümünde sayfanın başlığı ve stil dosyasına bağlantı yer alır. Burada <title> etiketi sayfa başlığını tanımlar ve <link> etiketi CSS dosyasını HTML'e bağlar.

Gövde ve Form Yapısı:

  1. <body> etiketi, sayfanın gövdesini tanımlar.
  2. login-container sınıfına sahip bir <div> içinde, form elemanları yer alır.
  3. <form> etiketi, formun başlangıcını ve sonunu gösterir. action özelliği form verilerinin işleneceği sunucu adresini, method özelliği ise veri gönderme yöntemini (burada post ) belirtir.
  4. Form içinde <h2> etiketi başlık için kullanılır.
  5. Kullanıcı adı ve şifre için iki <div> grubu oluşturulur. Her grup bir <label> ve bir <input> içerir. label etiketleri, giriş alanlarını tanımlar, input etiketleri ise kullanıcıdan veri almak için kullanılır.

CSS Yapısı:


Şimdi, bu HTML yapısını stilize edelim. CSS dosyasını (style.css) oluşturun ve aşağıdaki kodları ekleyin.


 body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.login-container {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
}

h2 {
    text-align: center;
    color: #333;
}

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
}

.input-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #5c6bc0;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #3f51b5;
}
 

Yukarıda Ne Yaptık?


Genel Stiller:

  1. body seçicisi ile sayfanın genel arka plan rengi, yazı tipi ve diğer merkezleme stilleri tanımlanır.
  2. Sayfanın tam ortasında içeriği göstermek için display: flex, justify-content: center ve align-items: center gibi Flexbox özellikleri kullanılır.

Login Container Stilleri:

  1. .login-container sınıfı ile formun ana kutusuna stil verilir. Arka plan rengi, padding, kenar yuvarlaklığı ve gölge efekti eklenir.

Form Elemanları Stilleri:

  1. h2 ile form başlığının metin hizalama ve rengi ayarlanır.
  2. .input-group ile her giriş grubunun altındaki boşluk ayarlanır.
  3. label ve input elemanlarına ait stiller tanımlanır. input elemanları için genişlik, padding, kenarlık ve kenar yuvarlaklığı belirlenir.

Buton Stilleri:

  1. button seçicisi ile giriş butonuna stil verilir. Genişlik, padding, arka plan rengi, yazı rengi ve kenarlık ayarları yapılır.
  2. button:hover ile butonun üzerine gelindiğinde arka plan renginin değişmesi sağlanır.

Bu yapının sonucunda, kullanıcıdan kullanıcı adı ve şifre girmesini isteyen, basit ve şık bir giriş sayfası elde edilir. Bu sayfa, kullanıcı girişi için temel bir arayüz sağlar ve ihtiyaçlar doğrultusunda daha da geliştirilebilir.

Bu yapı sonrasında verileri işlemek için action bölümünde bulunan /submit-your-login-form.php dosyasının bulunduğundan emin olun, eğer bir login action php dosyası oluşturmadıysanız ve oluşturmak istiyorsanız PHP bölümünü ziyaret edebilirsiniz.

Sizin İçin Önerdiklerimiz

Blog Resim
HTML Yazı Elementleri ve Kullanım Örnekleri (Ders-5)

HTML

Merhabalar! 5. Bölüme Hoşgeldiniz, bu bölümde HTML yazılarının elementleri ve kullanım örneklerini göstereceğiz. HTML (Hyper Text Markup Language)..

Devamını Oku
Blog Resim
HTML ve CSS Kullanarak Kullanıcı Giriş Sayfası Oluşturma

HTML

Merhabalar! Bu bölümde HTML ve CSS kullanarak bir kullanıcı giriş sayfası oluşturacağız.

Devamını Oku
Blog Resim
HTML Nitelikleri Nelerdir? Nasıl Kullanılır? (Ders-3)

HTML

HTML Derslerinin 3. bölümüne hoşgeldiniz, HTML (Hyper Text Markup Language), web sayfalarının yapısını ve içeriğini oluşturmak için kullanılan..

Devamını Oku
Blog Resim
HTML Alıntı Elementleri ve Kullanım Örnekleri (Ders-6)

HTML

HTML (Hyper Text Markup Language), web sayfalarını oluşturmak için kullanılan en temel dildir. HTML sayfaları, metin, görsel, video, ses vb. çeşitli..

Devamını Oku