a etiketinin hedef özelliği. Köprü - nedir, nasıl bağlantı yapılır ve HTML'ye kod eklenir (href, boş hedef ve a etiketinin diğer özellikleri). Köprünün üzerine gelip renkleri tıklayın - nasıl değiştirilir?
Varsayılan olarak, bir bağlantıyı tıklattığınızda belge geçerli tarayıcı sekmesinde açılır. Bu davranış, öğenin hedef özelliği kullanılarak değiştirilebilir . Değer, öğenin name özelliği tarafından belirtilen çerçevenin adıdır
Bu özelliğe XHTML'de izin verilmiyor.
Sözdizimi
Değerler
Değer, name özelliği tarafından belirtilen çerçeve adıdır. Mevcut olmayan bir ad ayarlanırsa yeni bir tarayıcı sekmesi açılacaktır. Aşağıdakiler ayrılmış adlar olarak kullanılır.
Boş Sayfayı şuraya yükler: yeni sekme tarayıcı. _self Sayfayı geçerli sekmeye yükler. _parent Sayfayı ana çerçeveye yükler; eğer çerçeve yoksa bu değer _self gibi çalışır. _top Tüm çerçeveleri atar ve sayfayı tam tarayıcı penceresine yükler; eğer çerçeve yoksa bu değer _self gibi çalışır.
Varsayılan değer
Örnek
Yeni sekmede aç
Tarayıcılar
Tarayıcı tablosunda aşağıdaki gösterimler kullanılır.
- - öğe tarayıcı tarafından tamamen desteklenmektedir;
- - öğe tarayıcı tarafından algılanmaz ve göz ardı edilir;
- - çalışma sırasında çeşitli hatalar ortaya çıkabilir veya öğe çekincelerle desteklenir.
Sayı, öğenin desteklendiği tarayıcı sürümünü gösterir.
Sizi blog sitesine davet etmekten mutluluk duyuyorum! Bugünkü yazımızda hiper metin işaretleme dili hakkında konuşmaya başlayacağız. HTML. Daha önce hiç böyle bir şey yazmadığım için bu yayın türünün ilki olacak (ve sonuncusu da değil).
Gönderi planı:
Ama şimdi yazdığımda gerekli bilgi ve bunları pratikte test ettim, okuyucularımla paylaşmaktan mutluluk duyacağım. Örneğin, ilk aşamada ne kadar çaba ve zaman harcandığını bilmek boşuna değil. nasıl link eklenirHTML. Doğal olarak yazımı okuduktan sonra siz de bunu bilecek ve yapabileceksiniz.
Genel olarak şunu belirtmekte fayda var bağlantı etiketleri optimize edicilerin çalışmalarında kesinlikle gereklidir, çünkü onların ekmeği sadece Arama motoru optimizasyonu ve ve elbette SEO alanındaki gurular, bırakın sıradan blogcuları, büyük olasılıkla bağlantılar olmadan bile yapamazlar :).
Belki, HTML bağlantı etiketiA metindeki resimleri görüntülemek için gerekli olan img etiketiyle birlikte en çok kullandığım etiketlerden biridir. Ortalama olarak yayınladığım her makale, hem iç hem de dış sayfalara giden yaklaşık beş bağlantı içeriyor.
Bunu unutma site için etiketlerHTML yalnızca yazı yazarken kullanılmaz. Ayrıca CMS WordPress'e veya başka herhangi bir içerik yönetim sistemine yüklediğiniz şablonun kodunu değiştirirken de bunlara ihtiyaç duyulacaktır.
Bu nedenle, en azından en temel konuları incelemeniz gerekir. HTML etiketleri gelecekte bağlantılarla çalışırken sorun yaşamamak için. Örneğin, makalelerinizi yazarken “Görsel Editör” kullanıyorsanız bu pek iyi değildir çünkü bu editör çalışmıyorsa, bağlantı eklemenin temel kodunu bile bilemezsiniz.
Genel olarak HTML işaretleme dilinin temel kavramlarını bilmenin size çok yardımcı olacağına ve hayatınızı kolaylaştıracağına inanıyorum. Yine de, sizin için yeni olabilecek konuları incelemek için şimdi harcadığınız zaman boşa gitmeyecektir.
Ayrıca işinizi kolaylaştıracak ve aşağıda makalemde okuyacağınız daha birçok nüans var - bunlar rel=”takip etme", Ve hedef=“_boşluk" ve bağlantılarla ilgili diğer birçok ilginç şey.
Bağlantı etiketi A – bir html belgesinde çapa içeren ve içermeyen bir köprü oluşturun
Yukarıda da belirttiğim gibi link benim tarafımdan en çok kullanılan html etiketlerinden biridir. Kullanıcıların tek tıklamayla bir belgeden diğerine kolayca geçebilmesi için bunlara ihtiyaç vardır.
Ancak bir köprünün yolunu belirtmek için şunu kullanmanız gerekir: bağlanmakhref. Onun sayesinde belirtmek mümkün ve gerekli Sayfa URL'si, başvurmak istediğiniz Bunlar, web sitenizin dahili sayfaları veya World Wide Web'deki diğer herhangi bir kaynağın sayfaları olabilir.
Çapa HTML etiketi bağlantılar Bu, arama robotlarının dikkate aldığı önemli bir faktördür, dolayısıyla buna özellikle dikkat etmeniz gerekir. Anchor'da kullanmanızı öneririm anahtar kelimeler, makalenizin arama sonuçlarında ilk sıralara çıkmasını istiyorsunuz.
Köprüler teorisi hakkında biraz bilgi sahibi olmak HTML belgesi açıklayıcı örneklere geçebiliriz. Bağlantının sahip olacağı kod budur:
Gördüğünüz gibi bağlantı bir açılış paranteziyle başlıyor "<», затем идет html тег A, после него должен быть обязательный атрибут href и знак равенства. Далее, следуют две скобки следующего типа – «”», между ними нужно указать URL адрес ссылающегося ресурса, при использовании «http://». Затем, нужно указать анкор ссылки и в конце концов закрыть тег ссылки А при помощи «».
Ayrıca, çapa olmayan bağlantıları kullanmanızı tavsiye ederim, çünkü yalnızca çapa içeren hiper bağlantılar kaynağınıza yönlendirirse, bu, arama motorları arasında soru işaretlerine neden olabilir ve kötü sonuçlara yol açabilir. Korkunç adı Penguen olan sansasyonel Google algoritmasını mutlaka duymuşsunuzdur :).
Bağlantıyı yeni bir pencerede açar. target_blank özelliği
A html etiketini çözdük ama hepsi bu değil. Bağlantılarla çalışırken işinize yarayacak daha birçok özellik vardır. Onlardan biri - bağlanmakhedef_blank.
Html belgesine eklediğiniz bağlantının yeni bir İnternet tarayıcı penceresinde açılması için gereklidir. Uzun bir makale yazarken ve geçmiş yayınlarınıza atıfta bulunurken bu çok kullanışlıdır. Böylece kullanıcının okuduğu sayfa açık kalır ve bağlantılar tarayıcıdaki diğer sekmelerde açılır.
Hedef boş html'de ziyaretçilerin sitenizdeki davranışları açısından yardımcı olduğu, yani davranışsal faktörlerini etkilediği için çok sık kullanılır. Bu nedenle eğer hala target niteliğini _blank parametresi ile kullanmıyorsanız bu bölümü çok dikkatli okumanızı tavsiye ederim.
Fark etmiş olabileceğiniz gibi, gerekli özniteliğin nereye yerleştirileceği konusunda özel bir fark yoktur, çünkü bunların html etiketlerindeki sırası önemli değildir.
Rel nofollow özelliği ve noindex etiketi. Bağlantının indekslenmesinin engellenmesi
Bir HTML belgesindeki rel link özelliğiyle çalışmaya başlayalım. Nofollow parametreli bu özellik, sayfanızın ağırlığının başka birine aktarılmasını önlemek için kullanılır.
Bildiğiniz gibi, yeni oluşturulmuş ve diğer kaynaklardan dış bağlantıları olmayan herhangi bir sayfanın kendi ağırlığı vardır ve bu sıfırın üzerindedir. Kullanıcılar bunu göremez ancak arama motorları hepsini hesaba katar.
Bu nedenle, sayfalarınızın iç ağırlığının sizden uzaklaşmaması için bazı bağlantıların bu özelliğe eklenmesi gerekir. takip yok. Bu özelliği içeren bağlantılar diğer sitelere ağırlık aktarmayacaktır.
Doğal olarak, bağlanmaktakip yok Yetkin dahili bağlantı, kaynağın başarılı optimizasyonunun ve daha da geliştirilmesinin anahtarı olduğundan, sitenizin dahili sayfalarına bağlantı verdiğinizde kullanılmamalıdır.
Yukarıdaki özelliği yalnızca harici sitelere bağlantı veriyorsam kullanırım. Örneğin, fark etmiş olabileceğiniz gibi, çoğu zaman makalelerimin sonunda postilleri Twitter okuyucum () olmaya davet ediyorum ve hesabıma bir bağlantı veriyorum, doğal olarak bu bağlantıyı rel nofollow'a ekliyorum. Şuna benziyor:
Yine, nofollow rel'in href özelliğinden önce veya sonra nereye yerleştirildiği önemli değildir. Ayrıca, bu tür bağlantılarda çapaya anahtar kelimeler yazmamalısınız, çünkü bu bir anlam ifade etmiyor, çünkü ilk önce biz bağlantı kurtakip etme yani ağırlık aktarmaz.
Şimdi tartışmaya değer etiketnoindeks. Arama robotlarının gereksiz sayfa öğelerini dizine eklemesini önlemeye yarar. Üstelik bu yalnızca köprüler için değil aynı zamanda metnin belirli bölümleri için de geçerlidir.
Bu arada, herhangi bir siteye gittiğimde, köprünün indekslemeye nerede kapatıldığını ve tam tersine nerede açık olduğunu hemen görüyorum. Hepsi Opera tarayıcısının mükemmel eklentisi sayesinde. Ayrıca bu eklentiyi kullanarak AlexaRank gibi diğer kaynak parametrelerini de takip edebiliyorum.
Bağlantı çapası ve nasıl yapılacağı. Ad özelliği
Ve şimdi bağlantılarla çalışırken muhtemelen birçok kişi için çok ilginç bir şey keşfedeceğim. Şahsen ben bunu WordPress'i altı aydan fazla kullandıktan sonra öğrendim. Peki şimdi bunun hakkında konuşacağız bağlantı çapası.
Onun sayesinde ve ayrıca kullanırken karma bağlantılar, sadece bir makaleye değil, aynı zamanda içinde gerekli olan bir yere, yani metnin belirli bir bölümüne de başvurabilirsiniz. Yayın çok hacimli olduğunda ve bu konuda gerekli bilgiyi bulmanın zor olacağı durumlarda bu gereklidir.
Öncelikle bağlantı vermek istediğiniz makalede, İnternet tarayıcısında sayfanın kaydırılacağı metin bölümünü seçmeniz gerekir. Yani bir bağlantı verirseniz, diyelim ki bir ayar hakkında (anchor örneği değil), o zaman name özelliğinin yayının gerekli bölümüne yerleştirilmesi gerekir.
Gördüğünüz gibi name niteliğinin bir çapası yoktur, çünkü çapa bir açılış ve kapanış etiketi A'dan oluşur. Nitelik parametresini kendiniz ayarlamanız gerekir, yukarıdaki örnekte gösterildiği gibi eşittir işareti ve parantezlerden sonra belirtilir; .
Şimdi doğrudan yeni gönderide önceden hazırlanmış bir bağlantı kullanarak bir karma bağlantı belirtmeniz gerekiyor. Böylece bağlantı metinde ihtiyaç duyulan yeri hemen açacaktır. Bu karma bağlantısı şöyle görünecek:
Bundan sonra sitenizin okuyucuları bu tür bağlantıları takip ederek doğrudan sayfadaki belirli bir alana ulaşabilecektir.
Benim için bu kadar, sorularınız varsa yorumlarda sorabilirsiniz. Bunun html ile ilgili son makale olmadığını belirtmek isterim; öngörülebilir gelecekte bu konuyla ilgili daha fazla yayın olacaktır.
Video sonsözü: sanatçı hızla cam üzerine resimler çiziyor
Tanım
Bağlantıdan açılan web sayfasının yükleneceği pencereyi tanımlayabilirsiniz. Bunu yapmak için hedef niteliğini kullanın; değeri pencerenin veya çerçevenin adıdır. Hedef ayarlanmadıysa döndürülen sonuç geçerli pencerede gösterilir.
Sözdizimi
Değerler
Değer, pencerenin veya çerçevenin adıdır. Mevcut olmayan bir ad ayarlanırsa yeni bir pencere açılacaktır. Aşağıdakiler ayrılmış adlar olarak kullanılır.
Boş Sayfayı yeni bir tarayıcı penceresine yükler. _self Geçerli pencereye bir sayfa yükler. _parent Sayfayı ana çerçeveye yükler; eğer çerçeve yoksa bu değer _self gibi çalışır. _top Tüm çerçeveleri atar ve sayfayı tam tarayıcı penceresine yükler; eğer çerçeve yoksa bu değer _self gibi çalışır.
Etiket içinse
Varsayılan değer
Doğrulama
Bu özelliğin kullanımı HTML spesifikasyonu tarafından kınanmıştır; geçerli kod yalnızca bir geçiş kullanıldığında elde edilir; .
Örnek 1: Bir bağlantıyı yeni bir pencerede açmak
Örnek 2
Tarayıcılar: Masaüstü Mobil ?
İnternet Explorer | Krom | Opera | Safari | Firefox |
2 | 1 | 2 | 1 | 1 |
Android | Firefox Mobil | Opera Mobil | Safari Mobil |
1 | 1 | 6 | 1 |
✖
Tarayıcılar
Tarayıcı tablosunda aşağıdaki gösterimler kullanılır.
- - öğe tarayıcı tarafından tamamen desteklenmektedir;
- - öğe tarayıcı tarafından algılanmaz ve göz ardı edilir;
- - çalışma sırasında çeşitli hatalar ortaya çıkabilir veya öğe çekincelerle desteklenir.
Sayı, öğenin desteklendiği tarayıcı sürümünü gösterir.
Çoğu web geliştiricisi şunun farkında bile değil:
target = "_blank" kullanarak bağlantı verdiğimiz sayfa, kaynak sayfaya window.opener nesnesi aracılığıyla erişir.
Örneğin, bu şekilde yeni açılan bir sekme window.opener.location'ı değiştirebilir, yani. Önceki sekme yerine sessizce tamamen farklı bir sayfa yükleyin.
İşin kötüsü bu güvenlik açığı yerli ve yabancı pek çok popüler sitede mevcut: Facebook'ta birkaç gün önce düzeltilmiş olmasına rağmen örneğin Yandex.Mail'de hala çalışıyor.
Örnek saldırı
Tarayıcıların bu davranışına dayanarak birçok senaryo üretebilirsiniz, işte en basit olanı:
1. Mağdura muhtemelen sahte bir adresten bir e-posta gönderilir. Mektubun içeriği tamamen önemsizdir: Asıl mesele, kurbanı kötü amaçlı kod içeren bir bağlantıyı takip etmeye zorlamaktır. Örneğin bu, aşağıdaki gibi sevimli kedilere göz atma isteği olabilir. Yandex, Target = "_blank" ifadesini tüm e-postalara otomatik olarak ekler.
2. Kurban Yandex.Mail'de bir mektup açar, yeni bir sekmede gizli bir site açan ve Yandex.Mail yerine orijinaline çok benzeyen bir kimlik avı sitesi yükleyen kötü amaçlı kod çalıştıran bir bağlantıya tıklar, ancak Örneğin, sizden kullanıcı adınızı ve şifrenizi yeniden girmenizi ister ve ayrıca şüpheleri ortadan kaldırmak için aslında kedilere yönlendirir.
Bu kodun bir örneği:
// Orijinal Yandex.Mail'i sahte bir pencereyle değiştirme.opener.location = "http://e-m-a.il/yandex.ru"; // Şüpheyi ortadan kaldırmak için kedilere yönlendir window.location = "https://imgur.com/0A5ZGBN";
3. Yandex'e güvenen ve kedilere bakan mağdur, mail ile bir önceki sekmeye geri dönüyor. İçinde hiçbir şey açmadığı ve adresi de değiştirmediği için, büyük olasılıkla sahtekarlığa düşecek ve aslında saldırgana gönderilecek olan kullanıcı adını ve şifresini girecektir.
Şüphe uyandırabilecek tek şey, sayfanın farklı bir adrese sahip olmasıdır, ancak bu adres orijinaline çok benzer hale getirilebilir ve mobil cihazlarda genellikle varsayılan olarak gizlenir.
Tedavi
Neyse ki, her şeyi oldukça kolay bir şekilde düzeltebilirsiniz: rel = "noopener noreferrer" özelliğini, target = "_blank" içeren tüm bağlantılara ek olarak eklemeniz gerekir.
Bunun web siteleri ve tarayıcılarda düzeltilmesini beklemeyecekseniz, TamperMonkey/GreaseMonkey'inize aşağıdaki Kullanıcı Komut Dosyasını eklemenizi öneririz:
// ==UserScript== // @name NULL Açıcı nesnesi // @namespace nullopenerobjectns // @description window.openeer nesnesini temizler. // @version 1 // @grant none // @run-at document-start // ==/UserScript== (function() ( "use strict"; window.opener = null; )());
Varsayılan olarak, bir bağlantıyı tıklattığınızda belge geçerli pencerede veya çerçevede açılır. Gerektiğinde bu durum etiketin target özelliği ile değiştirilebilir. . Bu özelliğe XHTML'de izin verilmiyor.
Sözdizimi
...Gerekli özellik
Değerler
Değer, name niteliği tarafından belirtilen pencerenin veya çerçevenin adıdır. Mevcut olmayan bir ad ayarlanırsa yeni bir pencere açılacaktır. Aşağıdakiler ayrılmış adlar olarak kullanılır.
Boş Sayfayı yeni bir tarayıcı penceresine yükler. _self Geçerli pencereye bir sayfa yükler. _parent Sayfayı ana çerçeveye yükler; eğer çerçeve yoksa bu değer _self gibi çalışır. _top Tüm çerçeveleri atar ve sayfayı tam tarayıcı penceresine yükler; eğer çerçeve yoksa bu değer _self gibi çalışır.
Varsayılan değer
Doğrulama
Bu özelliğin kullanımı HTML spesifikasyonu tarafından kınanmıştır; geçerli kod yalnızca bir geçiş kullanıldığında elde edilir; .
HTML5 IE Cr Op Sa Fx
Yeni pencerede aç