Sayfa tasarımı nasıl?

Sky_Fly

Femtopat
Katılım
27 Ocak 2021
Mesajlar
57
Yer
BOEING
Merhaba,
  • Tasarım nasıl?
  • Neler eksik?
  • Kodda hata var mı?
Rica etsem bunları cevaplar mısınız?

Register SS.png


Fotoğrafta pek güzel durmuyor isteyen bu dosyayı indirebilir (indirilen dosyaları boş bir klasöre atmanız yeterli):
Kaynak kodu:

Resim:

VirusTotal:

[CODE lang="html" title="Sayfa Kaynak Kodu"]<html>
<head>
<meta charset="utf-8">
<title>Register</title>
<style>
body{
font-family: Helvetica;
background-image: url("bg.jpg");
}

a{
color: dodgerblue;
}

#registerForm{
margin: auto;
width: max-content;
padding: 18px;
background-color: rgba(222, 235, 245, 0.541);
}

#registerForm input{
width: 300px;
height: 40px;
font-size: 17px;
margin-top: 8px;
outline: none;
}

#registerForm input:focus{
box-shadow: 0px 0px 24px 0px yellowgreen;
border: none;
}

</style>
</head>
<body>
<br><br><br>
<form id="registerForm" action="" autocomplete="on" method="POST">
<h2 style="text-align: center;">Register</h2>

<label for="username"><b>Username:</b></label><br>
<input type="text" name="username" autofocus required>
<br><br>

<td><label for="e-mail"><b>E-mail:</b></label><br>
<td><input type="email" name="e-mail" required>
<br><br>

<label for="password"><b>Password:</b></label><br>
<input type="password" name="password" required>
<br><br>

<label for="confirmPassword"><b>Confirm Password:</b></label><br>
<input type="password" name="confirmPassword" required>
<br><br>

<label for="privacy"><input style="width: 20px;height: 20px;" type="checkbox"> I read <a href="">Privacy Policy</a> and I accepted.</label>
<br><br>

<input style="cursor: pointer;background-color:greenyellow;border: none;" type="submit" value="Register">
<br><br>
<b>Do you have an account? <a href="">Login</a></b>

</form>
</body>
</html>[/CODE]
 
Son düzenleyen: Moderatör:
Kodunu git platformlari uzerinden paylasirsan daha rahat edersin, nasilsa ogrenmen gerekecek bir noktada bu islere merakliysan.
 
Kodunu git platformlari uzerinden paylasirsan daha rahat edersin, nasilsa ogrenmen gerekecek bir noktada bu islere merakliysan.
Aslında hesabım var fakat şu anlık hobi amaçlı yapıyorum. Dersler var diye pek ilerleyemem. 🙂

Ama öneriniz için teşekkür ederim. Acemi biri için kod yazımı ve sayfa tasarımı iyi mi peki?😀
Şimdiden bir tane hata gördüm. Checkbox'da label for'a verdiğim isim bulunmuyor.
 
Sayfa güzel ama kodlarda biraz fazla girinti yapmışsın gibi. Bu bir problem değil ama sanırım şu şekilde gözüne daha çok hitap edebilir. Daha rahat çalışabilirsin. Register yazan kısma da bir logo veya alakalı bir transparent görselin daha çok uyacağını düşünüyorum. Bir de bir kısma destek linki eklersen güzel olabilir.

Screenshot_1.png

Screenshot_2.png
 
Kodda hata yok ama çok tavsiye verebilirim:

  1. Inline CSS kullanma (style.css adlı bir dosyaya taşı stillerini)
  2. Her yeni Child bir HTML etiketi açtığında bir tab ileri at kodu ki daha Semantic bir kod ortaya çıksın.
  3. Satır aşağı inmek yerine margin-top değerini kullanabilirsin bloklara. Bu bloklarını aşağı iticektir.(Ya da display flex ile ekranın tam ortasına yerleştirebilirsin.)

İyi çalışmalar 👌
 
Kodda hata yok ama çok tavsiye verebilirim:

  1. Inline CSS kullanma (style.css adlı bir dosyaya taşı stillerini)
  2. Her yeni Child bir HTML etiketi açtığında bir tab ileri at kodu ki daha Semantic bir kod ortaya çıksın.
  3. Satır aşağı inmek yerine margin-top değerini kullanabilirsin bloklara. Bu bloklarını aşağı iticektir.(Ya da display flex ile ekranın tam ortasına yerleştirebilirsin.)

İyi çalışmalar 👌
Hocam mesajınız dikkatimi çekti o yüzden ben de bir şey sormak istedim.

  1. Neden CSS'i ayrı bir dosya olarak oluşturun dediniz?
 
Hocam mesajınız dikkatimi çekti o yüzden ben de bir şey sormak istedim.

  1. Neden CSS'i ayrı bir dosya olarak oluşturun dediniz?
Sayfanin yuklenme suresine etki eder. Ayrica bir web sitesi, css olmadan da kullanilabilir halde olmalidir (javascript dependent olmadigi surece)
 
Hocam mesajınız dikkatimi çekti o yüzden ben de bir şey sormak istedim.

  1. Neden CSS'i ayrı bir dosya olarak oluşturun dediniz?

Extarnal CSS yani ayrı bir dosya oluşturarak CSS kullanmak hem @flayzeraynx hocamın da dediği gibi yüklenme süresine etki eder hem de kodları düzenlerken, okurken kolaylık sağlar.
Ayrıca Extarnal CSS şu şekilde kullanılır:
.html dosyamızın dizininde yeni bir dosya oluşturuyoruz uzantısı ".css" olacak şekilde bu dosyayı kod düzenleyicinizle açtıktan sonra içine CSS kodlarını yazabilirsiniz fakat bunu .html dosyamıza tanımlamamız gerekir bunun için .html kodlarının içine head elementleri arasına şunu yazıyoruz:

[CODE lang="html" title="Extarnal CSS"] <link rel="stylesheet" href="style.css">[/CODE]
Not: "href" kısmını oluşturduğunuz ".css" dosyanızın ismine göre düzenleyiniz (Önerim dosyanızı "style.css" olarak oluşturmanınızdır) ve dosyanın ".html" dosyası ile aynı dizinde olduğundan emin olunuz.
 
Register butonunun rengi çok parlak. Daha koyu bir renk seçmenizi öneririm. Arkaplan rengi de pek uyumlu olmamış. Aslında panelin çok özel bir tasarımı yok. Normal bir panel. Artık çok parlak ve doğal değil, modern ve sade tasarımlar daha ilgi çekici diye biliyorum. Arkaplanı beyaz bırakıp birkaç efekt atabilirsiniz. Tabii paneli de değiştirmeniz gerekecek.
 
Hocam mesajınız dikkatimi çekti o yüzden ben de bir şey sormak istedim.

  1. Neden CSS'i ayrı bir dosya olarak oluşturun dediniz?

Yazılım mimarisine aykırı bir biçimdir. CSS dosyaları ayrı bir yerde JS dosyaları ayrı bir yerde tutulmalıdır ki yazdığımız kod Semantic bir biçimde olsun.

Bir başka sebep ise .css uzantılı dosyalar çoğu servis sağlayıcısı tarafından CACHE yani önbelleğe alınır. CSS dosyaları sizin bilgisayarınızda geçici bir süreliğine depolanır ve oradan tekrar kullanılır. Bu web sitenize giren insanların tekrar tekrar CSS dosyasını yüklemesine engel olur. Bu da sitenizin daha hızlı açılmasına yardımcı olacaktır.

İlk başlarda küçük olan CSS dosyaları parçalanmadığı sürece büyük projelerde binlerce satırı geçebilir. Bu yüzden CSS dosyalarının önbellekte tutulması çok önemlidir.
 

Yeni konular

Geri
Yukarı