Perşembe, Haziran 18, 2026
En güncel:

vehbiakdogan

Senior Sofware Developer

vehbiakdogan

Senior Sofware Developer

Html-Html5

Sayfa Yenilenmeden Link Değiştirme

Html5 ile gelen bir özellik olan location.hash sayesinde artık sayfa yenilenmeden linkimizi değiştirebiliyoruz. bende bugün nasıl değiştireceğimizden bahsetmek istiyorum.

Kodlarımız: 



<!DOCTYPE html>
<html>
<head>
	<title>Html5 ile sayfa yenilenmeden link değiştirme </title>
	<meta charset="utf-8">
	<meta name="description" content="" />
	<meta name="keyword" content="" />
	<meta name="author" content="Vehbi Akdogan" />
	<script src="js/jquery.min.js?v=1.0"></script>
	<script type="text/javascript">
		
		$(function(){
			
			$("ul.menu li a").click(function(){
				var hash = $(this).attr("href"); // adresi aldık 
				location.hash = hash; // adres çubuğumuzu değiştirdik 
				$(".hash").html("mevcut adres: " + hash); // ekrana gösterdik 
				
				return false;
			});
			
			
			
		});
	</script>
	
	<style type="text/css">
		ul.menu li {
			float:left;border:1px solid #ddd;
			padding:5px 15px;
			margin-lefT:5px;
			list-style:none;
		}
		ul.menu li a {
			display:block;
			width:100%;
			height:100%;
			text-align:center;
			text-decoration:none;
			color:#555;
		}
		.hash {
			clear: both;
			margin-top:20px;
			width:100%;
			color:#555;
			displaY:block;
		}
	</style>
	
</head>
<body>

<ul class="menu">
	<li> <a href="anasayfa.html">Anasayfa</a></li>
	<li> <a href="hakkimizda.html">Hakkımızda</a></li>
	<li> <a href="iletisim.html">İletişim</a></li>
</ul>
<div class="hash"></div>

</body>
</html>

Demo

Html-Html5Javascript-jQuery
Vehbi Akdoğan

Php Yönlendirme Fonksiyonu

Merhaba arkadaşlar bugün Sizlere genelde kullandığım sayfa yönlendirme fonksiyonu paylaşmak istiyorum.
Fonksiyonumuz Ve Kullanımı

<?php
/* 
	Bu PHP Dosyasi Vehbi Akdogan Tarafindan Kodlanmistir.
	E-Posta: mf.leqelyy@gmail.com
	Web: vehbiakdogan.com
*/

function git ($url, $zaman = 0){
	if($zaman){
		if(!headers_sent()) {
			header("Refresh: {$zaman}; url={$url}");
		}else {
			echo '<meta http-equiv="refresh" content="'.$zaman.';URL='.$url.'">';
		}
	}else {
		if(!headers_sent()) {
			header("Location: {$url}");
		}else {
			echo '<meta http-equiv="refresh" content="0;URL='.$url.'">';
		}
	}
}

git("index.php",5); // 5sn sonra 
git("index.php"); // Hemen  

?>;
Html-Html5PHP
Vehbi Akdoğan

Css Ve Script Dosyalarına Neden Parametre Verilir

Sizde benim gibi önünüze gelen sitenin kodlarını karıştırıyorsanız size css dosyasına parametre verenleri illaki görmüşsünüzdür.
Bende bu parametre veren arkadaşlar neden parametre vermişler onu araştırdım.

Css Dosyası tarayıcı üzerinden yorumlanarak çalışan dosyalardır ve bu dosyalar tarayıcının önbelleğine kaydedilir.
Biz css dosyamızda herhangi bir güncelleme yaptığımızda da tarayıcının geçmişini silmeden yaptığımız değişikliği göremiyoruz. Bu yüzden css dosyasına parametre vererek sitede herhangi bir güncelleme olduğunda tarayıcının bunu hemen algılamasını sağlamış oluyoruz.

örneğin :

ilk başlangıçta css dosyamız:
style.css?v=1.0
olsun.
Güncelleme yapınca Css dosyamızın paarametresini
style.css?v=1.1
yaparsak tarayıcıda dosyanın değiştiğini anlayıp güncelleme yapacaktır.

 

Aynı işlemleri script dosyaları içinde uygulayabilirsiniz.

Css-Css3Html-Html5Javascript-jQuery
Vehbi Akdoğan

Karakter Sayma, Keyup Fonksiyonu

İletişim formlarında falan görmüşüzdür illaki mesaj kısmında Mesaj metni:5 karakter şeklinde.
Şimdi bizde aynı şekilde jQuery ile textarea içine girdiğimiz karakter sayısını gösterecek bir uygulama yapalım.

Öncelikle Html Kodlarımızı Yazalım 

 <!DOCTYPE html>  
 <html>  
 <head>  
      <title></title>  
      <meta charset="utf-8">  
      <meta name="description" content="" />  
      <meta name="keyword" content="" />  
      <meta name="author" content="Vehbi Akdogan" />
 </head>  
 <body>  
 <p>Karakter Sayısı: <span id="karakter">0</span></p>  
 <textarea></textarea>  
 </body>  
 </html>

Evet Şimdi Jquery kodlarımızı yazmaya başlayalım. 

 <!DOCTYPE html>  
 <html>  
 <head>  
      <title></title>  
      <meta charset="utf-8">  
      <meta name="description" content="" />  
      <meta name="keyword" content="" />  
      <meta name="author" content="Vehbi Akdogan" />  
      <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>  
      <script type="text/javascript">  
           $(function(){  
                $("textarea").keyup(function(){  
                     var karakterSayisi = $(this).val().length; // textarea içine girilen karakter sayısı  
                     $("#karakter").html(karakterSayisi); // uzunluğu spanımızın içine attık  
                });  
           });  
      </script>  
 </head>  
 <body>  
 <p>Karakter Sayısı: <span id="karakter">0</span></p>  
 <textarea></textarea>  
 </body>  
 </html>

İşlemleri Yaptığımızda karakter sayımızın sayıldığınız göreceğiz.

Html-Html5Javascript-jQuery
Vehbi Akdoğan

CodeLobster emmet zen coding Kullanımı

Bayadır paylaşım yapmıyorum işlerimin yoğunluğundan dolayı kusura bakmayın arkadaşlar.

Bugün sizlere codeLobster editöründe zen-coding kullanımını anlatacağım. Öncelikle nedir bu Zen coding kısaca bahsedeyim.Zen coding eklentisi bizim kodlamada işimizi biraz daha kolaylaştırmak için geliştirilmiş ücretsiz bir eklentidir. bu eklentiyi kulanarak zamandan tasarruf edebiliriz. evet şimdi zencoding kullanımına göz atalım.

örneğin classı deneme olan bir id oluşurmak istersek .deneme yazarak ctrl+e ye bastığımızda divi otomatik kendisi yazacaktır.

Veya boş bir sayfada html taglarını eklemek istiyorsak html:(html belgesi türü) Şeklinde kullanım yapabiliyoruz örneğin html:5 Html5 sayfa taslağını yazacaktır.

table.deneme Yazdığımızda classı deneme olan tablo oluşturacaktır.

Daha farklı kullanımlarını internetten araştırarak bulabilirsiniz Gayet kullanışlı olan bu eklentiyi kullanmanızı tavsiye ederim.

Html-Html5
Vehbi Akdoğan

Sayfa açıldığında formu seçili duruma getirmek

Html5 ile gelen Odaklanma özelliği

iyi günler arkadaşlar bu yazımda html5 ile gelen odaklanma özelliğinden bahsetmek istiyorum. bazı sitelerde dikkatinizi çekmiştir belki bilmiyotum ama işte çeksin artık neyse 🙂 üye ol sayfası veya giriş yap sayfası gibi form bulunan sayfalara girdiğinizde formun ilk elemanı seçili olarak açılır yani diyelimki giriş yap sayfasındayız imlecimiz kullanıcı adını gireceğimiz textbox umuzda seçili olarak açılır şimdi bizde o tarz bir uygulama yapacağız.
uygulamamızı yapabilmemiz için html 5 ile gelen autofocus özelliğini kullanacağız.
Kodlarımıza Başlayalım. 

 <!doctype html>  
 <html>  
 <head>  
 <meta charset="utf-8" />  
 <style type="text/css">  
      input{  
           text-indent:5px;  
           border-radius:3px;  
           border:1px solid #ddd;  
      }  
      body {  
           color:#555;  
           font:14px arial;  
      }  
 </style>  
 </head>  
 <body>  
 <div style="width:1000px;margin:0 auto;">  
 <table align="center" style="border:2px solid #ddd;padding:5px;border-radius:3px;">  
      <tr>  
           <td>Adınız</td>  
           <td>:</td>  
           <td><input type="text" name="ad" autofocus="true" /></td> <!-- sayfa açıldığında seçili olacak -->  
      </tr>  
      <tr>  
           <td>Mail Adresiniz</td>  
           <td>:</td>  
           <td><input type="email" name="mail" /></td>  
      </tr>  
      <tr>  
           <td>Telefon Numaranız</td>  
           <td>:</td>  
           <td><input type="tel" name="telefon" /></td>  
      </tr>  
 </table>  
 </div>       
 </body>  
 </html>

Örneğimizin görüntüsü

Gördüğünüz Gibi html5 i destekleyen tarayıcımızda açtığımızda formumuzda ilk formun seçili olduğunu göreceğiz

Html-Html5
Vehbi Akdoğan

HTML5 ve jQuery ile sürükle bırak yaparak silme işlemi

Html5 ile sürükle bırak işlemi

İyi günler arkadaşlar internet kullanımının mobilde kullanımının gittikçe arttığı günümüzde mobilde daha kullanışlı siteler yapmamızı sağlayan bir html5 özelliğini sizlere anlatmak istiyorum.

Html 5 ile gelen sürükle bırak işlemimiz için aşağıdaki kodları bilmemizde fayda var

  • draggable: Kodumuz nesnenin sürüklenebilme özelliğini belirler. resimlerde default olarak true yani sürüklenebilir olarak belirlenmiştir. kullanımı draggable=”true” yani sürüklenebilir veya draggable=”false” sürüklenemez şeklindedir.
  • ondragover: Resmin Sürükleneceği alandır kullanımı ondragover=”return false;”
  • ondragenter: Yine resmin Sürükleneceği alandır kullanımı ondragenter=”return false;”
  • ondrop: Bu fonksiyonumuzda Resim Sürüklendikten sonra yapılacak işlemdir.

Evet Açıklamalarımızıda yaptığımıza göre Artık kodlara geçebiliriz

Kodlarımız 

 <!doctype html>  
 <html>  
 <head>  
 <meta charset="utf-8" />  
 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>  
 <script type="text/javascript">  
 $(function(){  
      $("#resim").hover( // resme tıklandığında body ile ilgili birkaç tasarım yaptık   
      function(){  
           $("body").css({  
                "border":"4px dashed #ddd",  
                "border-radius":"5px"  
           });  
           $("#cop").css({"border":"3px solid red"});  
      },  
      function(){  
                $("body,#cop").css({"border":"none"});  
      });  
 });  
 // asıl işlem gören fonksiyonumuz burdadır.  
 function resimSil() {  
      $("#resim").hide(); // resmi gizledik   
      $(".metin").html("Resim Başarıyla silindi"); // metnimizi değiştirdik   
 }  
 </script>  
 </head>  
 <body>  
 <div style="width:700px;margin:0 auto;">  
      <img src="images/ben.png" width="300" id="resim" style="float:left;cursor:move;" /><br>  
      <img style="float:right" id="cop" src="images/cop.png" draggable="false" ondragover="return false" ondragenter="return false" ondrop="resimSil()" />  
      <p class="metin" style="clear: both;"> Resmi Silmek için Çöp Kutusuna sürükleyiniz </p>  
 </div>       
 </body>  
 </html>

Çalışma kodlarını Buradan İndirebilirsiniz.

Html-Html5Javascript-jQuery
Vehbi Akdoğan

Hazır Script Nasıl Kurulur ANLATIM

Arkdaşlar Sizlerden gelen isteklerle hazır script kurulumu nasıl yapılır anlatacağım.
Neden Hazır script diyosanız zaten insan kendi kurduğu scriptin kurulumunu yapar heralde 🙂

Hazır Script Kurulumu

Öncelikle Hazır Scriptimizi (Genelde rar içerisinde olur) Rardan Çıkaralım

Eğer sistemimiz Veritabanı içeriyosa bir veritabanı kuralım Veri tabanı nasıl kurulur derseniz cpanelinize girdiğinizde Mysql Veritabanlarına Girip Yeni veritabanı ve veritabanı kullanıcısı oluşturunuz (ücretsiz hostlarda kullanıcı otomatik oluşturulur)
Daha Sonra genelde config.php dosyası olur hazır scriptlerde o dosyayı bulup içinde veritabanı bilgilerimizi Girelim.
Ardından Ftp programı kullanarak Veya telefondan yükleme yapıyosanız wap ftp sitelerinden birinde sitenize bağlanıp Dosyaları sitenize atınız Ve ardından Sitenize giriniz Siteniz Kurulmuş olacaktır.
Bazen config.php scriptlerde bulunmaz bu tür durumlarda include veya inc klasörlerine bakınız
Bazı scriptlerde ise otomatik kurulum vardır yani scriptin dosyalarını komple yüklersiniz ardından site adresinize girdiğinizde otomatikmen sizi kurulum sayfasına yönlendirir . Bu tür scriptlerin kurulumu daha kolaydır Dosyaları yükledikten sonra site adresinize gidip kurulmdaki adımları sırasıyla takip ederek başarıyla kurabilirsiniz.
NOT : Arkdaşlar Çoğu hazır scriptte nasıl kurulacağı dosyaların içinde Yazar , kurulumun nasıl yapıldığı yazmayan scriptlerin kurulması baya zor olabilir ve büyük ihtimallede sorunlu scriptlerdir . Kurulumu yazmayan scriptler ile vakit kaybetmenizi tavsiye ederim

Birdahaki makalemde Görüşmek Üzere … 🙂

Html-Html5
Vehbi Akdoğan

Google Sitenizi Ne Zaman İndexlemiş Öğrenin

Bu makalemde sizlere Google Botlarının Sitenizi Ne zaman Ziyaret Ettiğine nasıl Bakacağınızı Anlatacağım .
Googlenin Sitemizi indexleme sıklığı seo açısından oldukça önemlidir. benim gibi merak edenler sürekli google sitemi en son ne zaman indexlemiş diye bakmak isteyenler olabileceğini düşündüm Daha fazla meşkul etmeden hemen Adresi vereyim 🙂

http://webcache.googleusercontent.com/search?q=cache:siteadresi.com
Yukarıdaki Kodda siteadresi.com yerine kendi site adınızı yazdıgınızda sitenizin googlede en son indexlenmiş hali görünür Mesela örnek verecek olursak

Yukarıdaki resimde benim blogumun googlede son indexlenmiş halini görüyoruz Bu yazi yukarıdaki adreste site adresinizi yazıp girdiğinizde sitenizin üst kısmında çıkacaktır.
Eğer Google böyle bir sayfa yok derse size üzülerek söylüyorum ki googe sitenizi hala indexlememiştir.
Birdahaki makalemde Görüşmek üzere Hoşçakalın …

Html-Html5
Vehbi Akdoğan