İçindekiler
Günümüz e-ticaret sitelerinde kullanıcı deneyimi en önemli unsurlardan biridir. Kullanıcıların ürünleri detaylı inceleyebilmesi, seçenekler arasında hızlıca karar verebilmesi ve kolay bir şekilde alışveriş yapabilmesi gerekir. İşte yukarıda gördüğümüz HTML CSS kodları, tam da bu ihtiyaca yönelik tasarlanmış bir “Ürün Detay Sayfası” oluşturuyor.
Bu yazıda, kodun her bölümünü detaylı bir şekilde inceleyerek sayfanın nasıl çalıştığını adım adım açıklayacağız. Ayrıca SEO uyumu açısından sayfanın performansını nasıl artırabileceğimize de değineceğiz.
HTML Yapısının İncelenmesi
HTML dosyamızın iskeleti <!DOCTYPE html> bildirimiyle başlıyor. Ardından <html lang="tr"> etiketi sayfanın dilinin Türkçe olduğunu belirtiyor.
Head Bölümü: Sayfanın Başlangıcı
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Ürün detay sayfasında, farklı renk ve beden seçenekleriyle birlikte ürünün tüm bilgilerine ulaşabilirsiniz.">
<title>Ürün Detay Sayfası | Modern E-Ticaret Tasarımı</title>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;500&display=swap" rel="stylesheet">
</head>
Bu bölümde sayfanın karakter seti UTF-8 olarak belirlenmiş, mobil uyumluluk için viewport meta etiketi eklenmiş ve Google Fonts aracılığıyla özel bir yazı tipi (Josefin Sans) yüklenmiş. SEO açısından önemli olan meta açıklaması da eklenerek, sayfanın arama motorlarında daha iyi sıralanması sağlanmıştır.
Body Bölümü: Sayfanın Gövde Yapısı
Sayfanın ana içeriği <body> etiketi içinde yer alıyor. Burada en dikkat çeken yapı .container sınıfına sahip olan ana kutu. Bu, tüm içeriği çerçeveleyen bir alan oluşturuyor.
<div class="container">
Bu kutunun içinde iki ana kolon bulunuyor. Birincisi ürün görsellerini, ikincisi ise ürün bilgilerini içeriyor.
Ürün Görselleri
<div class="col">
<img src="../images/product-1.jpg" class="img-fluid" alt="Bisiklet Yaka Kazak">
<div class="d-flex mt-2">
<img src="../images/product-1.jpg" class="thumbnail" alt="Kazak Ön Görünüm">
<img src="../images/product-2.jpg" class="thumbnail" alt="Kazak Arka Görünüm">
<img src="../images/product-3.jpg" class="thumbnail" alt="Kazak Detayları">
</div>
</div>
Bu bölüm, ürünün ana görselini ve küçük thumbnail (önizleme) resimlerini içeriyor. Kullanıcı, küçük resimlere tıklayarak ana görseli değiştirebilir. Alt metinler SEO uyumluluğu için eklenmiştir.
Ürün Bilgileri
<div class="col product-card">
<h1>Bisiklet Yaka Kazak</h1>
<h5>Kazak Kategorisi</h5>
<a href="#" class="review">⭐⭐⭐⭐☆ (245 Değerlendirme)</a>
<p class="price">₺75.00 <span class="old-price">₺150.00</span></p>
Burada ürünün kategori ismi, başlığı, derecelendirmesi ve fiyatı gibi bilgiler yer alıyor. SEO uyumu için H1 etiketi kullanılmıştır.
Ürün Renk Seçenekleri
<div class="options color-options">
<input type="radio" id="color-brown" name="color" checked>
<label for="color-brown" style="background: #397ad4;"></label>
<input type="radio" id="color-red" name="color">
<label for="color-red" style="background: #d1a575;"></label>
</div>
Bu kısımda, radyo butonları ile farklı renk seçenekleri oluşturulmuş. Kullanıcı, bir renk seçtiğinde butonun arka planı değişerek aktif olduğunu belli ediyor.
Beden Seçenekleri
<div class="options">
<input type="radio" id="size-s" name="size">
<label for="size-s" class="radio-label">S</label>
<input type="radio" id="size-m" name="size">
<label for="size-m" class="radio-label">M</label>
</div>
Burada ise benzer bir mantıkla farklı beden seçenekleri oluşturulmuş.
CSS Kodu ile Sayfanın Görselleştirilmesi
Kodun <style> etiketleri içinde yazılmış olan CSS kısmı, sayfanın tasarımını şekillendiriyor.
Genel Sayfa Stilleri
body {
font-family: 'Josefin Sans', sans-serif;
line-height: 1.1; /* Yazıların sıkı ama okunabilir olmasını sağlar */
margin: 0;
padding: 20px;
background: #f5f5f5; /* Açık gri arka plan ile modern bir görünüm kazandırılır */
}
Bu bölüm, genel yazı tipi, satır yüksekliği ve arka plan rengini belirleyerek sayfanın genel görünümünü oluşturur.
Bağlantı Stilleri
a {
text-decoration: none; /* Linklerin altı çizili olmadan görünmesini sağlar */
}
Bu stil, bağlantıların (linklerin) alt çizgisiz görünmesini sağlayarak temiz bir tasarım oluşturur.
Ana Konteyner (Ürün Detay Kartı)
.container {
max-width: 800px;
margin: auto;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Hafif gölge efekti ekleyerek 3D hissi yaratır */
}
Bu stil, ürün detay sayfasının ana kutusunu oluşturur. Gölgelendirme, kenar yuvarlatma ve beyaz arka plan ile profesyonel bir görünüm kazandırılmıştır.
Satır ve Sütun Yapısı
.row {
display: flex;
flex-wrap: wrap; /* Mobil uyumluluk için elemanların alt alta dizilmesini sağlar */
}
.col {
flex: 1; /* Her sütunun eşit genişlikte olmasını sağlar */
padding: 10px;
}
Bu kodlar, ürün görselleri ve açıklamalarının yan yana veya mobilde alt alta dizilmesini yönetir.
Ürün Görselleri
.img-fluid {
width: 100%; /* Resmin kontejnerin genişliğine uyum sağlamasını sağlar */
border-radius: 10px;
}
Ürün görselinin sayfaya düzgün oturmasını ve kenarlarının yuvarlak olmasını sağlar.
Küçük Ürün Görselleri (Thumbnail)
.thumbnail {
width: 80px;
margin-right: 5px;
cursor: pointer;
border-radius: 5px;
border: 2px solid transparent; /* Varsayılan olarak şeffaf kenarlık */
}
.thumbnail:hover {
border-color: #ff6000; /* Üzerine gelindiğinde kenarlık rengini değiştirir */
}
Ürün önizleme resimleri için hover efekti eklenmiştir. Kullanıcı bir küçük resme geldiğinde turuncu çerçeve belirir.
Ürün Bilgileri ve Açıklamalar
.product-card h5 {
margin-top: 0;
color: #7a7a7a; /* Açık gri tonu ile başlıkları vurgular */
}
.product-card h3 {
margin: 15px 0;
}
.product-card h6 {
margin: 20px 0;
}
Ürün başlığı ve detayların düzenlenmesi için uygun boşluklar (margin) eklenmiştir.
Değerlendirme Yıldızları
.review {
font-size: small;
color: #ff6000; /* Değerlendirme puanlarını öne çıkarmak için turuncu renk kullanılmıştır */
}
Değerlendirme alanının okunaklı ve dikkat çekici olması için turuncu ton kullanılmıştır.
Fiyat Bilgisi
.price {
font-size: 22px;
font-weight: bold;
margin: 10px 0;
}
.old-price {
text-decoration: line-through; /* Eski fiyatı silik göstermek için üstü çizilir */
color: #b8b8b8;
margin-left: 10px;
}
Bu stil, indirime giren ürünlerde eski fiyatın üstünün çizilmesini ve yeni fiyatın öne çıkmasını sağlar.
Renk Seçenekleri
.color-options label {
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s;
position: relative;
}
.color-options input[type="radio"]:checked+label {
transform: scale(1.1); /* Seçili olan rengin hafif büyütülmesi sağlanır */
}
.color-options input[type="radio"]:checked+label::after {
content: '\2713'; /* Tik işareti eklenir */
font-size: 14px;
color: white;
font-weight: bold;
}
Bu kod, seçili renk seçeneğinin büyütülmesini ve içine bir tik işareti eklenmesini sağlar.
Beden Seçenekleri
.options {
display: flex;
gap: 10px;
}
.radio-label {
cursor: pointer;
padding: 8px 12px;
border: 1px solid #ddd;
display: inline-block;
border-radius: 5px;
transition: background 0.3s, color 0.3s;
}
input[type="radio"] {
display: none;
}
input[type="radio"]:checked+.radio-label {
background: #ff6000;
color: white;
border-color: #ff6000;
}
Beden seçenekleri için radyo butonları stilize edilmiştir. Seçili olan bedenin arka plan rengi turuncuya döner.
Buton Stilleri
.buttons {
margin-top: 15px;
}
.btn {
padding: 12px 18px;
background-color: transparent;
border: none;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
}
.btn-outline-primary {
background: transparent;
border: 1px solid #ff6000;
color: #ff6000;
}
.btn-primary {
background: #ff6000;
border: 1px solid #ff6000;
color: white;
}
Burada “Sepete Ekle” ve “Hemen Al” butonlarının turuncu ve şeffaf versiyonları belirlenmiştir.
Sonuç
Bu sayfa, bir e-ticaret sitesinin ürün detay sayfası olarak tasarlanmıştır. Kullanıcı dostu bir tasarım ve etkileşimli özelliklerle donatılmıştır. SEO uyumu için başlıklar, alt metinler optimize edilmiştir. HTML CSS ile modern ve işlevsel bir ürün sayfası oluşturulmuştur. Daha fazla örnek için “Kod Atölyesi” kategorine bakabilirsin. Ayrıca html css için w3schools sayfasına bakabilirsin.
index.html
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ürün Detay Sayfası</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;500&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<img src="images/product-1.jpg" class="img-fluid" alt="Product Image">
<div class="d-flex mt-2">
<img src="images/product-1.jpg" class="thumbnail" alt="Thumbnail">
<img src="images/product-2.jpg" class="thumbnail" alt="Thumbnail">
<img src="images/product-3.jpg" class="thumbnail" alt="Thumbnail">
</div>
</div>
<div class="col product-card">
<h5>Kazak</h5>
<h3>Bisiklet Yaka Kazak</h3>
<a href="#" class="review">⭐⭐⭐⭐☆ (245 Değerlendirme)</a>
<p class="price">₺75.00 <span class="old-price">₺150.00</span></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium placeat qui facilis.</p>
<h6>Renk:</h6>
<div class="options color-options">
<input type="radio" id="color-brown" name="color" checked>
<label for="color-brown" style="background: #397ad4;"></label>
<input type="radio" id="color-red" name="color">
<label for="color-red" style="background: #d1a575;"></label>
<input type="radio" id="color-green" name="color">
<label for="color-green" style="background: #83500f;"></label>
</div>
<h6>Beden:</h6>
<div class="options">
<input type="radio" id="size-s" name="size">
<label for="size-s" class="radio-label">S</label>
<input type="radio" id="size-m" name="size">
<label for="size-m" class="radio-label">M</label>
<input type="radio" id="size-l" name="size" checked>
<label for="size-l" class="radio-label">L</label>
<input type="radio" id="size-xxl" name="size">
<label for="size-xxl" class="radio-label">XXL</label>
<input type="radio" id="size-xxxl" name="size">
<label for="size-xxxl" class="radio-label">XXXL</label>
</div>
<h6><span class="stock">Stokta var</span></h6>
<div class="buttons">
<button class="btn btn-primary">Sepete ekle</button>
<button class="btn btn-outline-primary">Hemen al</button>
</div>
<p class="sku">SKU: GHFT95245AAA</p>
</div>
</div>
</div>
</body>
</html>style.css
body {
font-family: 'Josefin Sans', sans-serif;
line-height: 1.1;
margin: 0;
padding: 20px;
background: #f5f5f5;
}
a {
text-decoration: none;
}
.container {
max-width: 800px;
margin: auto;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.row {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.img-fluid {
width: 100%;
border-radius: 10px;
}
.thumbnail {
width: 80px;
margin-right: 5px;
cursor: pointer;
border-radius: 5px;
border: 2px solid transparent;
}
.thumbnail:hover {
border-color: #ff6000;
}
.product-card h5 {
margin-top: 0;
color: #7a7a7a;
}
.product-card h3 {
margin: 15px 0;
}
.product-card h6 {
margin: 20px 0;
}
.review {
font-size: small;
color: #ff6000;
}
.price {
font-size: 22px;
font-weight: bold;
margin: 10px 0;
}
.old-price {
text-decoration: line-through;
color: #b8b8b8;
margin-left: 10px;
}
.options {
display: flex;
gap: 10px;
}
.radio-label {
cursor: pointer;
padding: 8px 12px;
border: 1px solid #ddd;
display: inline-block;
border-radius: 5px;
transition: background 0.3s, color 0.3s;
}
input[type="radio"] {
display: none;
}
input[type="radio"]:checked+.radio-label {
background: #ff6000;
color: white;
border-color: #ff6000;
}
.color-options label {
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s;
position: relative;
}
.color-options input[type="radio"]:checked+label {
transform: scale(1.1);
}
.color-options input[type="radio"]:checked+label::after {
content: '\2713';
font-size: 14px;
color: white;
font-weight: bold;
}
.buttons {
margin-top: 15px;
}
.btn {
padding: 12px 18px;
background-color: transparent;
border: none;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
}
.btn-outline-primary {
background: transparent;
border: 1px solid #ff6000;
color: #ff6000;
}
.btn-primary {
background: #ff6000;
border: 1px solid #ff6000;
color: white;
}
.stock {
color: #008d2a;
}
.sku{
font-size: small;
color: #7a7a7a;
}-
.containersınıfı ne işe yarıyor?.containersınıfı, sayfanın ana içeriğini sarar ve bir sınır sağlar. Bu sınıfınmax-width: 800pxözelliği, içeriğin genişliğini sınırlar. Ayrıca,margin: autokullanılarak ortalanmış bir görünüm elde edilir.padding: 20pxise içerik etrafına boşluk ekler. -
.colsınıfı nasıl çalışıyor?.colsınıfı, Flexbox sistemiyle eşit genişlikte sütunlar oluşturmak için kullanılır.flex: 1özelliği, tüm sütunların aynı genişlikte olmasını sağlar. Bu, tüm içerik alanının eşit şekilde dağılmasına olanak tanır. -
flex-wrap: wrapözelliği ne işe yarıyor?.rowsınıfında yer alanflex-wrap: wrapözelliği, öğelerin sarmalı bir şekilde yerleşmesini sağlar. Bu özellik, özellikle küçük ekranlarda öğelerin alt alta sıralanmasına olanak tanır, böylece mobil uyumlu bir görünüm elde edilir. -
::afterpseudo-elementi nasıl kullanılmış?.color-options input[type="radio"]:checked+label::aftersatırında, seçilen renk için bir tik işareti (\2713) eklenmiştir.::afterpseudo-elementi, CSS içinden içerik eklemek için kullanılır ve burada seçilen rengi işaretlemek için bir tik işareti oluşturulur. -
Renk seçenekleri nasıl stilize ediliyor?
.color-options labelile renk seçenekleri küçük dairesel alanlar olarak tasarlanmıştır.input[type="radio"]:checked+labelile seçilen renk etiketi büyütülür (transform: scale(1.1)). Ayrıca,::afterpseudo-elementi ile tik işareti eklenerek görsel bir geri bildirim sağlanır. -
input[type="radio"]:checkedile hangi özellikler değiştirilmiş?input[type="radio"]:checkedCSS seçicisi, bir radyo butonunun seçili olup olmadığını kontrol eder. Seçili olan radyo butonunun+labelöğesi büyütülür (transform: scale(1.1)) ve etrafına bir tik işareti eklenir (::after). -
box-shadownasıl kullanılır?.containersınıfında,box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);ile hafif bir gölge efekti eklenmiştir. Bu efekt, kutuya 3D bir görünüm kazandırarak sayfanın daha modern ve dikkat çekici olmasını sağlar.
Henüz yorum yapılmamış. İlk yorumu siz yapabilirsiniz!