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
Web Sitelesine Sosyal İkonlar Ekleme Kodu

HTML

Sosyal medya, modern çevrimiçi varlığın ayrılmaz bir parçasıdır ve web sitelerine sosyal medya ikonları eklemek, ziyaretçilerin markanızla sosyal platformlarda etkileşime girmesini teşvik eder.

Devamını Oku
Blog Resim
HTML (Hypertext Markup Language) Nedir?

HTML

HTML, web sayfalarının tasarlanması ve tanımlanması için kullanılan bir etiket dili olarak tanımlanabilir. HTML, web sayfalarındaki metinleri, ..

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

HTML

HTML renkleri, önceden tanımlanmış renk adlarıyla veya RGB, HEX, HSL, RGBA veya HSLA değerleriyle belirtilir. HTML'de, bir renk adı kullanılarak:..

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