Web sayfaları hazırlarken eskisi gibi başına buyruk kodlama devri gerilerde kaldı. Artık web standartlarına uymak, web standartlarının belirlediği kurallar çerçevesinde kodlama yapmak çok önemli. Bunun için de eskiden kullandığımız fakat şimdi terk etmek zorunda olduğumuz bazı kodlar var. Bu kodlardan birisi de a etiketi içerisinde yeni bir pencere açtırmak için kullandığımız target="_blank" kodu. Tamam, web standartlarına uymak açısından bu kodu terk edelim ama bu kod olmadan da nasıl yeni bir pencere açtıracağız?
Güle güle “target”
Web standartlarını belirleyen W3 konsorsiyumu, bizim standartlara uygun kodlama yapabilmemiz için daha katı kuralları olan HTML 4.0 Strict ve XHTML 1.0 Strict sürümlerini yayınlamıştır. Bu sürümlerde targetözniteliği çıkartılırken rel isminde başka bir öznitelik eklenmiş. Her ne kadar rel özniteliğinin esas amacı linklere yeni bir pencere açtırmak değilse de biz onu birazcık JavaScript ile destekleyip yeni bir pencere açabilecek hale getireceğiz.
İlk önce eski yöntem ile yani target="_blank" kodu ile nasıl yeni bir pencere açtırdığımızı hatırlayalım. Eski yöntemde bir linke yeni bir pencere açtırmak için target özniteliğine _blank değerini atardık. Aynen alttaki kodda olduğu gibi…
<a href=”yeni.html” target=”_blank”>Yeni Bir Pencere Aç</a>
Yeni yöntemde ise rel özniteliğine external değerini atıyoruz. Hem böylece web sayfalarındaki linkleri 2 ana gruba ayırmış da oluyoruz. Kendi web sitemizdeki sayfalar arasında geçişi sağlayan iç linkler internalolarak adlandırılırken, başka web sitelerindeki sayfalara geçişi sağlayan dış linkler de external olarak adlandırılmış oluyor 
Artık yeni pencere açtırmak istediğimiz linkleri alttaki örnek kodda olduğu gibi düzenlemeliyiz.
<a href=”yeni.html” rel=”external”>Yeni Bir Pencere Aç</a>
Birazcık JavaScript
Son yazdığımız rel="external" kodlu linke tıkladığınızda yeni bir pencere açılmadığını göreceksiniz. Çünkü daha önce de dediğim gibi rel özniteliğinin esas amacı linklere yeni bir pencere açtırmak değil. Yaptığımız işlem, rel="external" kodunu kullanarak web sayfamızdaki hangi linklerin external (harici) olduğunu işaretlemek. JavaScript kullanarak işaretlediğimiz bu linklerde düzenleme yaparak yeni pencere açmalarını sağlayacağız.
function HariciLinkler() {
if (!document.getElementsByTagName) return;
var linkler = document.getElementsByTagName(“a”);
var linklerAdet = linkler.length;
for (var i=0; i<linklerAdet; i++) {
var tekLink = linkler[i];
if(tekLink.getAttribute(“href”) && tekLink.getAttribute(“rel”) == ”external”) {
tekLink.target = ”_blank”;
}
}
}
window.onload = HariciLinkler;
Birazcık da görsellik
Aslında yapmamız gerekenleri yaptık. rel="external" ile işaretlenmiş olan linkleri JavaScript yardımıyla yeni pencede açma özelliği kazandırdık. Ve bunu web standartları çerçevesinde yaptık. Fakat yazının başında linkleri 2′ye ayırmıştık hatırlarsanız. İç linklere internal, dış linklere ise external demiştik. Bu noktada biraz da web sayfamızı kullananları düşünmeliyiz. Şu durumda kullanıcılar, web sayfamızın kaynak kodlarını görüntülemeden hangi linklerin internal, hangi linklerin external olduklarını anlayamazlar.Kullanıcıların, hangi linklere tıkladıklarında yeni bir tarayıcı penceresinin açılacağını önceden bilmeleri yerinde olur. İşte bu yüzden external olan linkleri JavaScript ve CSS kullanarak internal linklerden ayıracağız. Bu sayede kullanıcılar, hangi linklerin external olduğunu kolayca anlayabilecekler.
Kodlamaya geçmeden önce üstteki resim hakkında konuşalım. Resimde 2 tane link görüyorsunuz. Bunların hangisinin internal, hangisinin external olduğunu söyleyebilir misiniz? Elbette söyleyebilirsiniz 
İkinci linkin yanındaki küçük resim herşeyi anlatıyor. İşte biz de şimdi bu etkiyi yaratacağız. Yani external linklerin yanına küçük bir “yeni pencerede aç” resmi ekleyeceğiz.
function HariciLinkler() {
if (!document.getElementsByTagName) return;
var linkler = document.getElementsByTagName(“a”);
var linklerAdet = linkler.length;
for (var i=0; i<linklerAdet; i++) {
var tekLink = linkler[i];
if(tekLink.getAttribute(“href”) && tekLink.getAttribute(“rel”) == ”external”) {
tekLink.target = ”_blank”;
// küçük resim ekle
tekLink.style.background = ”url(yeni_pencere.gif) right center no-repeat”;
tekLink.style.paddingRight = ”20px”;
tekLink.style.marginRight = ”2px”;
}
}
}
window.onload = HariciLinkler;
style.background ile resim dosyasının yolunu ve pozisyonunu bildiriyoruz.
Eklediğimiz resmin linke yapışmaması için paddingRight ile biraz boşluk veriyoruz. Son olarak link ile linkten sonra gelecek olan metin arasında marginRight kodunu kullanarak uzaklık ataması yapıyoruz. Ve böylece uygulamamız son halini almış oluyor.
Uygulamanın son halini görmek için bu sayfaya
Uygulamada kullanılan küçük resmi almak için şu sayfaya
