HTML Galeri Örnekleri

HTML Galeri Örnekleri

HTML Galeri Örnekleri : Html sayfalar içinde bir takım anlatılması gereken ürünü veya tanıtılması gereken bir objenin fotoğrafını Web sitenizde düzenli bir şekilde listelemek istiyorsunuz. Yani kısaca Web sitenizin içinde fotoğraf galerisi oluşturmak istiyorsunuz.

Web tasarım yaparken her hangi bir sayfa içinde fotoğraf galerisi oluşturmak hem arama motorları için hem de kullanıcılarınızın site içinde daha fazla vakit geçirmesi için çok önemli bir etkendir. Web sitesi içinde fotoğraf galerisi oluşturma aslında oldukça basit bir işlemdir.

Web sitesi içinde göstermek istediğiniz fotoğraflar galerileri için aşağıdaki sizlere sunmuş olduğumuz kodları kullanabilirsiniz. Kullanım alanı çok geniş olan fotoğraf galerisi işletmenizin Web sitesinde veya ürün gösteriminde çok faydalı olacaktır. Kullanıcıların %90’ı Web sitesi ilk açıldığında görsellere bakmaktadır. Bunun için siz de mutlaka Web sitenize Html fotoğraf galerisi yapmayı unutmayın.

Not: Html galeri örnekleri sayfamız için sayfa altında bulunan yorum bölümüne iyi veya kötü yorumlarınızı yapabilirsiniz sitemizi geliştirmek ve size daha iyi hizmet sunmak için çok iyi olacaktır. (Ayrıca bize katkıda bulunmak istiyorsanız Web sayfamız içindeki sponsorlu bağlantılara göz atabilirsiniz.)

Fotoğraf Galerisi Nasıl Oluşturulur?

Fotoğraf galerisi oluşturmak için HTML ve CSS kod yazmamız gerekmektedir. HTML fotoğaf galerisinin temelini CSS ise galerinin görselliğini etkilemektedir. Fotoğraf galerisi örneği olarak sizlerle bir çalışma yapmak istiyorum aşağıdaki görseldeki gibi bir çalışmanın HTML ve CSS kodlarını sizlerle paylaşacağım.

Yapılacak Örnek Açıklama:
Yapılacak örnekte 2 satır olmak üzere yan yana 4 ögenin yer aldığı ve bu ögelerin içinde fotoğraf, başlık, açıklama ve son olarak da link olacak şekilde bir fotoğraf galerisi oluşturalım.

HTML Kodu:

<meta charset="UTF-8" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<div class="ana-bolum">
	<div class="kutu">
		<a href="#" class="fotograf"><img src="fotograf.jpg" width="190" height="152" alt="Fotoğraf Başlığı" /></a>
		<a href="#" class="baslik">Fotoğraf Başlığı</a>
		<a href="#" class="aciklama">Fotoğraf Açıklaması</a>
		<a href="gidecek link" title="" class="link">Detay</a>
	</div>
	<div class="kutu">
		<a href="#" class="fotograf"><img src="fotograf.jpg" width="190" height="152" alt="Fotoğraf Başlığı" /></a>
		<a href="#" class="baslik">Fotoğraf Başlığı</a>
		<a href="#" class="aciklama">Fotoğraf Açıklaması</a>
		<a href="gidecek link" title="" class="link">Detay</a>
	</div>
	<div class="kutu">
		<a href="#" class="fotograf"><img src="fotograf.jpg" width="190" height="152" alt="Fotoğraf Başlığı" /></a>
		<a href="#" class="baslik">Fotoğraf Başlığı</a>
		<a href="#" class="aciklama">Fotoğraf Açıklaması</a>
		<a href="gidecek link" title="" class="link">Detay</a>
	</div>
	<div class="kutu">
		<a href="#" class="fotograf"><img src="fotograf.jpg" width="190" height="152" alt="Fotoğraf Başlığı" /></a>
		<a href="#" class="baslik">Fotoğraf Başlığı</a>
		<a href="#" class="aciklama">Fotoğraf Açıklaması</a>
		<a href="gidecek link" title="" class="link">Detay</a>
	</div>
	<div class="ayirici"></div>
	<div class="kutu">
		<a href="#" class="fotograf"><img src="fotograf.jpg" width="190" height="152" alt="Fotoğraf Başlığı" /></a>
		<a href="#" class="baslik">Fotoğraf Başlığı</a>
		<a href="#" class="aciklama">Fotoğraf Açıklaması</a>
		<a href="gidecek link" title="" class="link">Detay</a>
	</div>
	<div class="kutu">
		<a href="#" class="fotograf"><img src="fotograf.jpg" width="190" height="152" alt="Fotoğraf Başlığı" /></a>
		<a href="#" class="baslik">Fotoğraf Başlığı</a>
		<a href="#" class="aciklama">Fotoğraf Açıklaması</a>
		<a href="gidecek link" title="" class="link">Detay</a>
	</div>
	<div class="kutu">
		<a href="#" class="fotograf"><img src="fotograf.jpg" width="190" height="152" alt="Fotoğraf Başlığı" /></a>
		<a href="#" class="baslik">Fotoğraf Başlığı</a>
		<a href="#" class="aciklama">Fotoğraf Açıklaması</a>
		<a href="gidecek link" title="" class="link">Detay</a>
	</div>
	<div class="kutu">
		<a href="#" class="fotograf"><img src="fotograf.jpg" width="190" height="152" alt="Fotoğraf Başlığı" /></a>
		<a href="#" class="baslik">Fotoğraf Başlığı</a>
		<a href="#" class="aciklama">Fotoğraf Açıklaması</a>
		<a href="gidecek link" title="" class="link">Detay</a>
	</div>
</div>

Açıklama: Html kodu içersinde Google Font yazı stilini içersinden Roboto yazı karakterini kullanmaktayım. Tüm kutucukları içersinde barındırması için ana-bolum adında boş alan oluşturuyorum. Kutuları bu ana-bolum içine yerleştiriyorum. Ardından kutu adında kutular oluşturup link’li olacak şekilde fotoğraf, başlık, açıklama ve link bölümlerini ayrı ayrı oluşturuyorum.

Bu şekilde hem temiz bir HTML kodu oluşturuyoruz. Hemde arama motorları için uygun kodu yazmış oluyoruz. Kullanılan alt, title, width, height etiketleri bu durum için büyük önem taşımaktadır.

CSS Kodu:

<style>
	.ana-bolum{
		font-family: 'Roboto', sans-serif;
		width:800px;
		margin:0 auto;
		display:table;
		padding:10px;
		border:1px solid #ccc;
		background: #f9f9f9;
	}
	.ana-bolum .kutu{
		float:left;
		width:22%;
		height:auto;
		border:1px solid #848484;
		padding:1%;
		margin-right:7px;
	}
	.ana-bolum .kutu:nth-child(5n+4){
		margin-right:0;
	}
	.ana-bolum .kutu *{
		display:table;
		margin:0 auto;
	}
	.ana-bolum .kutu .baslik{
		margin-top:5px;
		font-size:20px;
		color:#000;
		text-decoration:none;
	}
	.ana-bolum .kutu .aciklama{
		margin-top:3px;
		font-size:14px;
		color:#383838;
		text-decoration:none;
	}
	.ana-bolum .kutu .link{
		margin-top: 10px;
		font-size: 14px;
		text-decoration: none;
		border: 1px solid #0a2740;
		padding: 3px 10px;
		background: #0faed2;
		color: #f1f1f1;
	}
	.ana-bolum .kutu .fotograf{
		width:100%;
		height:auto;
		
	}
	.ana-bolum .kutu .fotograf img{
		width:100%;
		height:auto;
	}
	.ayirici{
		width:100%;
		height:20px;
		float:left;
	}
</style>

Açıklama: Tüm HTML bölümlerinin görüntü içinde şekillenmesi için kullanılan CSS bölümü tüm HTML nesnelerin görüntüsünün yapılması için kullanılmaktadır. Bu bölüm arama motoru optimizasyonları için de büyük önem taşımaktadır.

Bu bilgileri sizin için destek kod olarak yayınlamaktayım. HTML fotoğraf galerisinin standart’dır diye bir şey söyleyemem sadece sizler için başlangıç kodları olabileceğini düşünüyorum.