Reklam alımları başlamıştır. Reklam vermek isteyenler iletişim sayfasından iletişime geçebilirler.
Web standartlarına uygun yeni pencere açtırmak
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 internal olarak 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() {
-
-
}
İlk önce boş olarak JavaScript fonksiyonumuzu oluşturduk. Tüm işlemleri bu fonksiyon içerisinde yapacağız.
-
if (!document.getElementsByTagName) return;
-
var linkler = document.getElementsByTagName("a");
-
var linklerAdet = linkler.length;
Daha sonra web sayfamızdaki bütün a etiketlerini yakaladık. Yakalama işlemini getElementsByTagName kodu ile yapıyoruz. Bu kodun anlamı "elemanları etiket ismine göre al" demek. Bu kod web sayfamızdaki bütün a etiketlerini yakalıyor ve bellekte bir dizi (array) halinde saklı tutuyor. Yalnız bazı eski web tarayıcııları (IE 4 gibi) bu kodu desteklemiyor. Bu yüzden ilk satırda if ile bu kodun çalışıp çalışmadığını test ettik. En son satırda ise yakalanmış olan link adetini, linklerAdet değişkenine kaydediyoruz. Örneğin 50 tane link yakalandıysa, bu değişkenin değeri 50 oluyor.
-
for (var i=0; i<linklerAdet; i++) {
-
var tekLink = linkler[i];
-
if(tekLink.getAttribute("href") && tekLink.getAttribute("rel") == "external") {
-
tekLink.target = "_blank";
-
}
-
}
Üstte ise bir for döngüsü açtık. Bu döngü, linklerAdet değişkeninin değeri kadarı dönecek. Bir başka değişle web sayfamızda kaç tane a etiketi varsa o kadar... Döngüyü açtıktan sonra yaptığımız işlem, linkler değişkeninde dizi (array) halinde tutulan linkleri teker teker almak. Sonrasında aldığımız her bir linkin iki özniteliğine bakıyoruz. Eğer bir a etiketi, hem href özniteliği taşıyorsa hem de rel özniteliğinin değeri external ise işleme alıyoruz. Yaptığımız işlem ise target="_blank" etkisi yaratmaktan ibaret.
Artık HariciLinkler fonksiyonumuz hazır olduğuna göre şimdi sıra onu çalıştırmaya geldi. Bu fonksiyonu web sayfamız yüklenir yüklenmez çalıştırmak için JavaScript'tin onLoad olayına atamamız gerekiyor. Bu yüzden alttaki kodu kullanıyoruz.
window.onload = HariciLinkler;
Artık JavaScript ile işimiz bitti. Yukarıda yaptığımız kodların tamamına derli-toplu bir halde bakalım. Alttaki kodu olduğu gibi web sayfanızın <script></script> etiketleri arasına yerleştirmeniz yeterli olacaktır. Daha da güzeli bir JavaScript dosyasına kaydetmeniz ve <script type="text/javascript" src="kodlar.js"></script> şeklinde kullanmanı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
Merhaba Erhan,
Yaptığın örnek kusursuz, güzel, yerinde ve standartlara uygun.
target=”_blank” kullanmaktan “kat be kat” iyi olduğu ise kesin.
Bununla birlikte, kullanıcının elinden özgürlüğün alan bir uygulama da aynı zamanda.
Yanlış anlama, konuya farklı bir pencereden bakmaya çalışıyorum:
Demek istediğim ben, bir kullanıcı olarak, çeşitli nedenlerden dolayı, harici linkleri de aynı pencerede gezinmek isteyebilirim.
O zaman yandaki harici link ikonunu fark edip “hııı bu yeni pencerede açılıyor” öngörüsünü yaptıktan sonra, linke sağ tıklayıp, linkin URL adresini kopyalamak ve aynı pencereye yapıştırmak gerekecek.
…
Aslında ideali, harici linklerin yanında “harici link” ikonunun bulunması fakat nerede açacağına dair tercihin kullanıcıya bırakılması.
Sanıldığından çok daha fazla kişi “sağ tıklayıp” “yeni pencerede” ya da “yeni sekme”de açmayı biliyor.
…
Daha da ideali ise DOM yardımı ile her linkin yanına küçük bir harici link “span”i eklemek ve bu “span”lerin “onclick” olay dinleyicilerinde yeni pencerede açılacak bir linki tetiklemek olabilir.
Sevgiler.
@Volkan
Dediklerine kısmen katılıyorum. Aslında en güzeli external linklerin yanına eklediğimiz simgeye, ayrıca bir link özelliği daha eklemek. Yeni pencererde açmak isteyenler bu simgeye tıklayabilir. Hatta daha güzeli bu işi bir fonksiyonda toplayıp, kullanıcıya “sitedeki linkleri ayrı pencerede aç” gibi özellik de sunulabilir (bunu yapanlar var).
Yazıda dikkati çekmek istediğim diğer bir nokta web sayfalarında external ve internal link ayrımının yapılması. Ben hangi linkin o siteye ait olduğunu ve hangi linkin başka bir siteye ait olduğunu imleci üzerine götürmeden de anlamak isterim. Özellikle bol linkli sayfalarda.
Güzel iş, tebrikler.
html 1.0 traditional kullanırım targetımı da yazarım
Güzel bir yöntemi, güzel bir şekilde anlatmışsınız. Teşekkür ederim.
Volkan Özçelik’in yorumuna ek olarak;
Javascript özelliğini kapatmış bir kullanıcıda bu yöntem işe yarayacak mı? Elbetteki yaramayacak. Ya da sayfa tam olarak yüklenmediğinde işe yarayacak mı? Yine yaramayacak. Bu ihtimaller olası mı? Hem de büyük oranda olası. Bu durumda ne yapılabilir? Cevap: ???
@Yakuphan
Cevap gayet basit. Yazdığımız javascript kodu unobtrusive olduğu için web sayfamızda hiçbir hata olmayacaktır ve eskisi gibi çalışmaya devam edecektir. Sadece “external” linkler yeni pencerede/sekmede değil, aynı pencerede/sekmede açılacaktır o kadar. Bu da çok çok çok… büyük bir sorun olmasa gerek
çok güzel bir tutorial olmuş.
Zihnine sağlık dostum da küçük resmi nasıl alacağız. Not defterine yapıştırılmıyor.Sağol.
@FeRHaT
Yazının sonunda “şu sayfaya” linkine sağ tıkla ve hedefi farklı kaydet de. Böylece resmi kaydedebilirsin.
Teşekkürler kodlar için. çok işime yaradı.
Web standartlarına uyumlu sayfalar oluşturmak çoğu kişinin hayalidir. Ama standartlara geçerken daha önce web dünyasında çok sık kullanılan bu özelliğin neden standartların dışına çıktığını da mantıklı bir şekilde anlatmalıyız insanlara. Belki daha kullanıcı dostu sayfalar yapabilmek ve eskiden frame ile yapılan sayfaların günümüzde azalması, site içinde senin de bahsettiğin harici ve dahili linkler buna pdf,excel,word gibi formattaki linker içindeki simgeler de eklenerek çoğatılabilir belki. Böylece web standartlarına uyarak kodlama yapacak arkadaşların da kafasındaki neden sorusu da daha işin başındayken cevaplanmış olacaktır diye düşünüyorum.
@Volkan
Dediklerine sonuna kadar katılıyorum. Ek açıklamaların için teşekkürler.
Bunun yanında bahsettiğin linkere simgeler eklemek işini de Bildirgeç‘te anlatmıştım vaktinde.
Teşekkürler verdiğiniz bilgiler için. Yaptım ve sorunsuz oldu, sevindirik oldum
Hoşuma gitti benim de. Sağol.
Ağzınıza sağlık herzamanki gibi mükemmel bir anlatım
Faydalı bir makale… Eline sağlık…
Anlatımınız gayet başarılı. Tebrik ediyorum. Ayrıca örnek yazı latince mi?
@Oğuzhan Bugüş
Örnek yazının ne olduğuna http://tr.wikipedia.org/wiki/Lorem_Ipsum adresinden bakabilirsiniz.
Merhaba
Target özniteliğinin artık kaldırıldı yerine de ‘Rel’ özniteliği geldi demişsiniz.
Fakat ‘target’ kullanışsız olduğu için ya da başka bir sebeple kaldırılmadı ki yerine javascript ve ‘rel’ ile bir çözüm getirelim.
Kontrol internet kullanıcısında olsun, istediği bağlantıyı istediği sayfada, sekmede açabilsin diye kaldırıldı. Kaldırıldığından da şüpheliyim aslında. Kullanıyorum ve herhangi bir uyarıyla dahi karşılaşmadım.
Kaldı ki javascript dosyasında da bildiğimiz ‘target’ kullanılıyor.
Adama “Bu ne perhiz bu ne lahana turşusu?” demezler mi? Bence derler.
@çağatay
Öncelikle “rel” özniteliği “target” yerine getirilmemiş. Orada yanlış anlaşılma olmasın. Biz sadece “rel” özniteliğini alternatif olarak kullanıyoruz.
JavaScript ile target=”_blank” özelliği ekliyoruz çünkü halâ web tarayıcılarında çalışıyor
Ama buradaki asıl konu çalışıp çalışmadığı veya kaldırılıp kaldırılmadığı değil. Ayrıca bir web sayfasının geçerlilik testinden geçmesi, onun web standartlarına uyduğu anlamına gelmiyor. Daha bir çok etken var web standartları için. Bu yazıdaki asıl konu, biz nasıl kontrolü kullanıcının eline verebiliriz?
Eğer siz target=”_blank” kullanırsanız kullanıcı bu linkleri kontrol etmekte çok zorlanır veya edemez. Çünkü bu özelliği açıp/kapatma diye bir seçenek yok. Fakat yukarıdaki yöntemi kullanırsanız ve kullanıcıya “tüm linkleri yeni sekmede aç/açma” gibi bir seçenek sunup, bunu da javaScript’e bağlarsanız işte o zaman kontrolü kullanıcıya bırakmış olursunuz.
Bir de yazıda, tüm sayfadaki linkleri “external” ve “internal” olarak ayırabildiğimiz dikkatini çekti mi? Bu da sana yani webmaster’a birçok işlemde daha çok kontrol sağlayabilir
@Erhan
Güzel diyorsunuz da başlık pek öyle demiyor gibi gözüküyor.
target yasaklandı biz de aynı target’ı js ile tanımlarız olur biter gibi olmuş.
Bir web sayfasının geçerlilik testinden geçmesi geçerli olduğuna tabii gelmiyor. İşte yazının başlığı, geçerlilik testinden geçsin de nasıl geçerse geçsin gibi olmuş.
Sırf başlık da değil. Yazının ‘Birazcık da görsellik’ alt başlığına kadar olan yerde bahsettiğim durum hissediliyor.
Birazcık da görsellik alt başlığından sonra ise yazı dediğiniz yönde* ilerliyor.
Dediğiniz yön
: Önemli olan yeni sayfada açtırmanın yöntemi değil, kararı kullanıcıya bırakmak.
Elinize sağlık benim için çok faydalı oldu:)
Yaptiğim bir sayfada örneğiniz kullandım fakat ie6 da çalışmıyor ie7 dede ayni sorun var firefoxda tıklayınca bazen ayni bazen farklı sayfada açıyor garip
kullandıgım site: http://www.ciyan.org
Güzel bir yazı olmuş.
Bence, target “yerine” rel kullanılması tam olarak doğru gelmiyor. Nitekim, target=”_blank”, rel özelliğinden bağımsızca eklenmiş: rel=”external” diğer rel’ler gibi, sadece linkin tipini belirtmek için bir ayraç: daha çok kelimeyle, sayfalar arasındaki ilişkileri güçlendirmek için düşünülmüş ve bir tag attribute’un gelişi diğerinin gidişiyle birbirinden bağımsız.
Burada yaptığımız ise, html standartının ihtiyacımız olanını karşılamayarak, en azından yeni standartları kullanalım diyerek uyguladığımız bir work arround. Erhan’ın “Eğer siz target=”_blank” kullanırsanız, kullanıcı bu linkleri kontrol etmekte çok zorlanır veya edemez.” sözü de tam olarak doğru değil. Özellikle performans düşürecek bir uygulamayla. Nitekim Javascript ile normalde yeni pencere olarak hedeflendirilmemiş linkler öyle gibi davrandırılabiliyorsa, aynı şekilde, javascript kullanılarak (örnek jquery: $(’a[target=_blank]‘).attr(’target’,”)) iptal edilebilir. Linklere iconlar atama yapılmasına da engel değil, zaten bunlar strict versiyonlar gelmeden önce de yapılıyordu.
Ve target=”_blank” yerine, JS’nin getirdiği overloada gelince,
Düşünün, target=_blank olan her sayfa, en az 1 kblik bir JS daha taşımak zorunda olacak. Bu her target=_blank kullanan site için yaklaşık 1 kb’lik fazla BW demek, her site için. Ayrıca bu 1KB’lik JS çalıştığında bellek ve işlem gücü harcamakta. Bu nereden bakarsak bakalım zarardır. Peki konsorsiyum böyle şeyleri düşünmüyor mu, tabii ki düşünüyor. Fakat her yetkin HTML sürümünün bir kullanım alanı olduğunu unutmamak gerek:
Target=_blank’in kaldırılmasının sebebi, yanılmıyorsam, strict dillerin daha çok bilgi toplayan parserlara hitaben şekillendirilmiş olması. Linkin yeni pencerede açılıp açılmadığınınsa içerik açısından, herhalde, önemli bir bilgi olmadığına karar vermiş www konsorsiyum.
Bence web’i basitleştirmeye ve geliştirmeye yönelik çalışmaları html5 gibi sürümlerde göreceğiz (zaten şimdiden söylenenleri biliyoruz ve çoğumuz heyecanlı). HTML5′de target=”_blank” olmasa bile, eminim hem geliştirme sürecine, hem kullanıcı tarafında fazladan yük getirmeyen bir alternatifiyle çıkacaktır.
30sn sonra gelen edit: 1KB, yazının gazıyla abartılı olmuş, ama gene de illaki sunucu tarafında bir az da olsa BW, kullanıcı tarafında ise buna ilaveten bellek/işlemci gücünde bir ek yük mevcut. Bir de overload deyip durmuşum, veride fazlalık demek istedim, overhead olacaktı o.