• Target=”_blank” , zamanımızın en hafife alınan güvenlik açığıdır. HTML'nin temelleri: bağlantılarla çalışma. A etiketi ve rel, target, name öznitelikleri Bir görüntüyü bağlantı yapma - iki yol

    Merhaba, blog sitesinin sevgili okuyucuları. Bugünün yayınını web yöneticisinin en önemli yönüne adamaya karar verdim, burada bir köprünün ne olduğunu, ayrılmaz bir şekilde bağlantılı olduğunu ve abartmadan İnternet'in temeli olduğunu ayrıntılı olarak açıklamaya çalışacağım.

    Ancak köprüleri doğru bir şekilde oluşturmak ve bunları web sayfalarının koduna (örneğin, sitenize) eklemek için, köprü metni biçimlendirme dilinin () ilgili alanını incelemeniz gerekir, çünkü bu öğeler HTML kullanılarak oluşturulmuştur.

    Bu nedenle, bugün bir köprünün hangi parçalardan oluştuğunu, target blank özelliğini kullanmanın bir sayfayı yeni bir pencerede (sekme) açmayı nasıl mümkün kıldığını, herhangi bir görüntüyü nasıl bağlantı haline getirebileceğimizi ve diğer birçok önemli ayrıntıyı analiz edeceğiz. Diğer şeylerin yanı sıra, bu bilgiler sizi HTML dilini öğrenmede ilerletecektir.

    Köprü nedir ve bağlantı olarak adlandırılabilir mi?

    Başlıkta sorulan soruyu yanıtlayarak, "bağlantı" teriminin daha geniş bir anlamsal spektruma sahip olduğunu söyleyeceğim (Sibirya'ya bağlantı, ödeme yapanı belirlemek için bankacılık, bir kitaptaki metin vb.), Yalnızca hipermetinle ilişkilendirilen ve bilgiyi doğrusal olmayan bir şekilde algılamayı mümkün kılan "köprü" kavramının doğasında var olan anlam da dahil.

    Böylece, köprü, bir bağlantının özel bir halidir, bu yüzden onları günümüzün konusunda eşit bir temelde kullanmak oldukça mümkündür. Gereksiz anahtar kelime spam'inden kaçınmak için bu terimlerin her ikisini de kullanarak, bugünkü yayın sırasında kendi bencil çıkarlarım için kullanacağım şey budur.

    Ancak, yardımıyla oluşturulan görünmez hizmetler de vardır. ve görevleri belirli bir işlevi gerçekleştirmek için tarayıcılara çok sayıda sinyal ve komut göndermek olan içindekiler.

    Örneğin, hizmet köprülerinin yardımıyla bir simgenin görüntülenmesi mümkündür. Yalnızca HTML kodunun bir parçası olarak görülebilirler (bunu yapmak için tarayıcıda açık olan herhangi bir sayfayı tıklayın):


    Şimdilik, hizmet bağlantılarını olduğu gibi bırakalım ve köprü oluşturmanın genel modelini ele alalım. Hepsinin ortak noktası, hepsinin sahip olması. gerekli href özelliği, değeri belgenin adresidir (). Bir HTML bağlantısı, hem sitenin dahili bir sayfasına hem de harici bir belgeye yönlendirebilir.

    Bir önemli not daha. Href özniteliğinin kullanılması, köprüleri tıklanabilir hale getirir, yani kullanıcıların üzerlerine tıklaması sonucunda web sitesinin ilgili sayfasına otomatik olarak gitmesini sağlar.

    Href kullanarak HTML'de köprü nasıl yapılır?

    Bu nedenle, bir bağlantı oluşturmak için, parametreleri çeşitli türlerde URL'ler olabilen a etiketi ve href özniteliğinin gerekli olduğunu zaten biliyoruz. Çünkü A bu, sonra açılış arasında ve kapanış web sayfasında görüntülenecek içeriği içerir.

    Bu içeriğe çapa denir ve metin veya resim olarak sunulabilir (aşağıda bir resmin nasıl bağlantı yapılacağı hakkında daha fazla konuşacağız). Daha önce de belirttiğim gibi, çapa tıklanabilir olacaktır. Metin içeriği olan bir köprü örneğini ele alalım. İşte HTML kodunda nasıl görüneceği:

    çapalar hakkında biraz

    HTTP'ye ek olarak, güvenli HTTPS protokolü kullanılabilir. Bağlantının bir web sayfasına yönlendirilmesi gerekmez. Her şey, bazı dosyalara giden yol olabilecek href değerine bağlıdır:

    //web sitesi/wp-content/uploads/2012/05/giperssylqi-v-html.jpg

    indirmek

    Bir web sayfasında, bu bağlantı şöyle görünecektir:

    Tarayıcı, .zip uzantılı bir nesnenin yalnızca indirme için kullanılabileceğini "anlıyor" ve bunu kullanıcıya öneriyor.

    Bu arada, herhangi bir dosyanın yolu bazen FTP () aracılığıyla belirtilir. Ardından, href niteliğinin parametresi olarak kullanılan URL'de, HTTP protokolünü (HTTPS) FTP ile değiştirmeniz yeterlidir. Dosyanın bağlantısı şöyle görünecektir:

    sunucudan indir

    Ama hepsi bu kadar değil. Benzer bir yolla mailto sözde protokolü kullanılarak bir e-posta bağlantısı oluşturulur yazma aracına hızlı erişim için:

    mektup yazmak

    Böyle bir bağlantıya tıkladıktan sonra, mesajın metnini oluşturabileceğiniz ve muhtemelen tahmin ettiğiniz gibi href'ten alınan önceden belirlenmiş adrese gönderebileceğiniz varsayılan posta istemcisinin bir penceresi görünmelidir.

    Uygulamada, posta formuna tek bir tıklamayla erişebilen kullanıcıların ve müşterilerin rahatlığını sağlamak için geçmişte web yöneticileri ve büyük kaynakların sahipleri tarafından postaya köprüler çok sık kullanılıyordu.

    Ancak web kaynaklarında bu tür iletişim artık o kadar popüler değil (özellikle, örneğin yükleyebileceğiniz için), çünkü bu şekilde açılan posta adresleri, yazılımlar tarafından aktif olarak ele geçirilir ve çeşitli spam gönderenler tarafından kullanılır.

    Örnek olarak yalnızca URL'nin bir parçası olan en yaygın protokolleri gösterdim ve bu protokoller de bir köprü oluştururken href özniteliğinin bir parametresidir. HTTP (HTTPS), FTP ve mailto'ya ek olarak, daha özel görevler için başkaları da vardır. Belki diğer yayınlarda bunları daha ayrıntılı olarak ele alacağız.

    Köprü türleri

    Şimdi linkleri belirli kriterlere göre sınıflandırmaya çalışalım.

    Kapsamlarına göre:

    1. Harici- yerleştirildikleri sitenin dışında bulunan sayfalara yönlendirir;

    2. Dahili- aynı web kaynağındaki web sayfalarını birbirine bağlayın.

    biçime göre:

    2. grafik olarak f — bu durumda, köprünün bağlantısı bir resim (küçük resim dahil), bir başlık, bir düğme vb.'dir.

    href özelliğinin değeri olarak hizmet veren URL türüne göre:

    1. mutlak, veri aktarım protokolünün (örneğin, HTTP) ve sitenin alan adının (alanlarla ilgili her şeyde) açık bir göstergesini içerir.

    Bu tür bağlantılar, dış kaynakların sayfalarına bağlanırken daha sık kullanılır. Bu durumda href değeri, istenen dosyaya veya web sayfasına giden tam yolu içerecektir. İşte mutlak bir köprü örneği:

    Bağlam - nedir bu

    2. akraba, web sitesinin kök klasörüne göre belirtilen yol olacak oluşturma seçeneklerinden biri (dolayısıyla bu tür köprünün adı). Bu durumda, protokol (HTTP) ve site etki alanı URL'den kaldırılacaktır:

    Bağlam - nedir bu

    Bir web sayfasındaki göreli köprüler, dahili sayfalara bağlantılar sağlayabilir. Bu formda daha kısadır, bu da HTML kodunu kolaylaştırır. Elbette her şey bu kadar basit değil ve verilen bağlantıyı izlerseniz görebileceğiniz gibi daha geniş bir kapsam gerektiriyor.

    bir etiket öznitelikleri

    Şimdi, zorunlu href'in yanı sıra başka hangi özniteliklerin var olduğunu ve bunların bir hiper bağlantı oluşturulmasını nasıl etkileyebileceğini görelim. Bu konudaki en eksiksiz verileri, tabiri caizse, "ilk elden" Uluslararası Konsorsiyum W3C'nin resmi web sitesinde, güncel bilgilerin en hızlı şekilde göründüğü yerde bulabilirsiniz.

    Tamamen aynıdırlar ve geçerli sekmede bir web sayfasının açılmasını başlatırlar. Linklere tıkladığınızda sayfaların yeni sekmede açılmasını istiyorsanız link oluştururken eklemelisiniz. boş parametreli hedef öznitelik:

    Bağlam - nedir bu

    Bazı web yöneticileri ve SEO'lar, ziyaretçiye seçme fırsatı verilmesinin daha iyi olacağına inansa da (yani, hedefi boş yazmayın), çünkü gerekirse, içerik menüsü kullanılarak sayfa yeni bir sekmede de açılabilir (imleci bağlantının üzerine getirin, sağ tıklayın ve ilgili öğeye tıklayın):


    Üstelik gördüğünüz gibi bu durumda kullanıcının avantajı web sayfasını sadece yeni bir sekmede değil, aynı zamanda yeni bir pencerede(bu seçenek HTML kullanılarak uygulanamaz, yalnızca komut dosyaları kullanılarak uygulanabilir).

    Ancak, tüm acemi kullanıcıların popüler tarayıcıların () özelliklerine ve ayarlarına tam olarak aşina olmadığına inanıyorum. Harici bir köprüyü takip eden ve kaynak sayfayı gözden kaçıran okuyucunun (bunun yerine alıcı belge görünecektir), kalplerindeki sekmeyi kapatması oldukça olasıdır.

    Bu nedenle, bir web kaynağının sahibi, yalnızca potansiyel bir ziyaretçiyi kaybetmekle kalmaz, aynı zamanda davranışsal faktörlerde () bir bozulma elde edebilir, bu da sıralamada sayfa konumlarının kaybına yol açacaktır.

    Ayrıca bitişik bir sekmede sayfa açmak kullanılabilirlik () açısından çok uygundur. Kullanıcı bir web sayfasına giden bir köprüyü takip eder, ek bilgiler alır ve sanki hiçbir şey olmamış gibi ana materyali incelemeye devam eder.

    Objektif bir resim vermek için, herhangi bir harici bağlantıya "target="_blank"" uygulamanın bazı güvenlik riskleriyle dolu olduğu eklenmelidir. İlgilenen varsa, boş hedef kullanırken sorunları gidermek için önerilerin verildiği yeri ve bir web sayfasını yeni bir sekmede açma görevini uygulamak için alternatif seçenekleri okuyabilirsiniz.

    Yeni bir sekmede köprü açmak için boş değeri kullanmanın tüm artılarını ve eksilerini not etmiş görünüyor. Blogumdaki makaleleri okursanız, muhtemelen hedef özelliğin bu parametresine karşı tutumumu zaten tahmin etmişsinizdir.

    Şu anda benim için artıları eksilerinden ağır basıyor ve ben onun koşulsuz destekçisiyim. Yukarıdaki gerçeklere dayanarak, bu konuda kendi fikrinizi oluşturabilirsiniz. Yine de ... yeni koşulların ortaya çıkması dikkate alındığında değişebilir.

    Karma bağlantılar, çapalar nasıl oluşturulur ve bunlara neden ihtiyaç duyulur?

    Daha sonra, dikkatinizi, web sayfasında bulunan materyal oldukça hacimliyse ve gezinmeyi iyileştirmek için yapılandırılması gerekiyorsa yararlı olabilecek başka türde köprülere odaklayacağım.

    Uzakta bir örnek aramanıza gerek yok, sadece en baştaki bu yayının içindekiler tablosuna bir göz atın. Bakın, makalenin bölümlerinin bir listesi var mı? Bu bölümlere giden köprüler yalnızca karma bağlantılardır. Bunlardan herhangi birine tıkladıktan sonra, tarayıcı sayfayı ilgili bölümün başladığı yere kaydıracaktır.

    Bu tür bağlantıları yapmak oldukça basittir. İlk önce oluşturmanız gerekir Çapa, herhangi bir HTML etiketine uygulanan genel niteliklerden biri olan kimlik tanımlayıcı biçiminde uygun etiketi sayfada gerekli yere koymak.

    Kimliklerin evrenselliği nedeniyle, bu tür bağlantı etiketleri bir web sayfasında hemen hemen her yere yerleştirilebilir. Metin genellikle paragraflara bölündüğünden, bunlar . Esas olarak makaleleri mantıksal parçalara bölen çapalar koyuyorum:

    Böylece HTML kodundaki tüm gerekli yerleri işaretledikten sonra bunlara köprüler oluştururuz. Bunu yapmak için, URL'deki son "/" eğik çizgisinden sonra (ki zaten bildiğiniz gibi, href özelliğinin değeridir), "#" pound işaretini ve etiket adını (ID) sırayla yazarız:

    Karma bağlantılar ve çapalar nasıl oluşturulur?

    Ayrıca, böyle bir bağlantı bağlantısı bağlantılarla aynı sayfaya yerleştirilirse, URL'nin karma işaretinden önceki son eğik çizgiye kadar olan kısmı atlanabilir ve href parametresi olarak yalnızca "#" artı kimlik adı kullanılabilir (aslında bu, göreceli bir bağlantı için seçeneklerden biridir):

    Karma bağlantılar ve çapalar nasıl oluşturulur?

    Yani, HTML kodunu optimize etme kılavuzunun içindekiler tablosunu derlerken, bu hafif seçeneği kolayca kullanabilirsiniz. Tanımlayıcının adı olmadan URL olarak yalnızca bir pound işareti koyarsanız, sayfa böyle bir bağlantının bulunduğu yerden itibaren tamamen yukarı kaydırılır:

    Tepe

    Aslında bu, ziyaretçileri için hayatı kolaylaştırdığı için kaynağın kullanılabilirliği için yine ek bir artı görevi gören en basit seçenektir. Çekici bir görüntü, bir düğme oluşturmak için bir çapa olarak kullanılabilir.

    Alt çizgi nasıl kaldırılır ve bağlantı rengi nasıl değiştirilir?

    HTML geliştiricileri, şu veya bu yönü optimize etmeye yardımcı olabilecek hemen hemen tüm nüansları düşünmüşlerdir, aynı şey köprüler için de geçerlidir. Örneğin, başka bir web sayfasına giden bir köprüyü takip edip ardından geri dönerken, kullanıcı köprünün renginin değiştiğini görecektir.

    Bu tür eylemleri tekrar tekrar yapması gerekirse, hangi bağlantılara tıkladığını ve hangilerinin tıklamadığını hızlı bir şekilde belirleyebilecektir. Bu seçenek hemen hemen her tarayıcıda yerleşiktir. Ne kadar kullanışlı olduğunu ve ne kadar zaman kazandırdığını açıklamaya gerek yok.

    Varsayılan ve CSS köprüleri yok altı çizili ve üç renk seçeneği, her birinin kendi özniteliği vardır:

    • link - web sayfasındaki köprünün rengini ayarlar (varsayılan mavidir ve #0000ff ile gösterilir);
    • alink - web tarayıcısı tarafından işlendiği süre boyunca aktif köprü rengi (kırmızı #ff0000);
    • vlink — kullanıcı tarafından ziyaret edilen bağlantının rengi (mor, #800080).

    Peki, siteniz için tarayıcılar tarafından görüntülenen bağlantıların renklerini nasıl değiştirirsiniz? Pekala, sayfaların manuel olarak oluşturulduğu basit bir HTML sitesi için (ve bence modern gerçekliklerde, basit günlükler ve açılış sayfaları dışında, bu türden tam özellikli kaynakların neredeyse hiç bulunmadığını düşünüyorum), yalnızca açılış etiketini bulmanız gerekiyor ve bunun için gerekli parametreleri ayarlayın (bu arada, adını bir renk belirtmek için kullanabilirsiniz), örneğin:

    Web kaynağınızı yönetmek için bir içerik yönetim sistemi () yüklediyseniz, kullandığınız motorun türünden bağımsız olarak, bir açılış etiketinin olduğu, başlığı (başlık) görüntülemekten sorumlu dosyayı düzenlemek için açmanız gerekir. .

    Kaynağınız WordPress çalıştırıyorsa, bu fikrin pratik uygulaması için, onu bir köprünün içine otomatik olarak resim eklemek için bir araç olarak kullanabilirsiniz; burada önce kitaplıktan seçim yapın veya istediğiniz resmi yükleyin ve metne ekleyin:

    Ardından, ortaya çıkan görüntü kodunu seçin ve düzenleyicinin "bağlantı" düğmesine basın, ardından görünen pencerede istenen kopyalanan köprüyü yapıştırın:


    Sizi blog sitesine davet etmekten mutluluk duyuyorum! Bugünkü yazımızda Hypertext Markup Language hakkında konuşmaya başlayacağız. html. Bu yayın türünün ilk örneği olacak (ve sonuncusu da olmayacak), çünkü daha önce hiç böyle bir şey yazmadım.

    Yayın planı:

    Ama şimdi gerekli bilgileri edinip pratikte test ettiğimde okuyucularımla paylaşmaktan mutluluk duyacağım. Ne de olsa, örneğin bilmek için ilk aşamada ne kadar çaba ve zaman harcandığı boşuna değil. link nasıl eklenirhtml. Doğal olarak yazımı okuduktan sonra sizler de bunu bilecek ve yapabilecek duruma geleceksiniz.

    Genel olarak şunu belirtmekte fayda var. bağlantı etiketleri optimize edicilerin çalışmalarında basitçe gereklidir, çünkü ekmekleri sadece arama motoru optimizasyonudur ve ve doğal olarak, SEO uzmanları, bırakın sıradan blog yazarlarını, büyük olasılıkla bağlantılar olmadan yapamazlar :).

    Belki, html bağlantı etiketiA resimleri metin içinde görüntülemek için gerekli olan img etiketiyle birlikte en çok kullanılanlardan biridir. Ortalama olarak, yayınladığım her makalede, hem iç sayfalara hem de dış sayfalara yaklaşık beş bağlantı konur.

    Bunu unutma site etiketlerihtml sadece yazı yazarken kullanılmaz. Ayrıca, WordPress CMS veya başka herhangi bir içerik yönetim sistemine kurduğunuz şablonun kodunu değiştirirken bunlara ihtiyaç duyulacaktır.

    Bu nedenle, en azından en temel olanı incelemeniz gerekir. html etiketleri böylece gelecekte bağlantılarla çalışırken sorun yaşamayacaksınız. Örneğin, makalelerinizi yazarken "Görsel Düzenleyici" kullanıyorsanız, bu pek iyi değildir, çünkü bu düzenleyici çalışmazsa, bağlantı koymak için temel kodu bile bilemezsiniz.

    Genel olarak, html biçimlendirme dilindeki temel kavramların bilinmesinin size büyük ölçüde yardımcı olacağına ve hayatınızı kolaylaştıracağına inanıyorum. Yine de, şimdi çalışmak için harcadığınız zaman, muhtemelen sizin için yeni materyal, boşa harcanmayacak.

    Ayrıca işinizi kolaylaştıracak ve aşağıda makalemde okuyacağınız 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 bağlantı içeren ve içermeyen bir köprü oluşturun


    Yukarıda da belirttiğim gibi, bağlantı benim tarafımdan en çok kullanılan html etiketlerinden biridir. Kullanıcıların tek bir fare tıklamasıyla bir belgeden diğerine kolayca geçebilmesi için bunlara ihtiyaç vardır.

    Ancak, bir köprünün yolunu belirtmek için şunu kullanmalısınız: bağlanmakhref. Bu sayede bağlantı vermek istediğiniz sayfanın URL'sini belirtebilirsiniz ve belirtmelisiniz. Bunlar, hem sitenizin dahili sayfaları hem de World Wide Web'deki diğer herhangi bir kaynağın sayfaları olabilir.

    Html bağlantı etiketi A'yı tutturmak, arama robotlarının dikkate aldığı önemli bir faktördür, bu nedenle buna özellikle dikkat etmeniz gerekir. Makalenizin arama sonuçlarında ilk sıralara çıkmasını istediğiniz bağlantıdaki anahtar kelimeleri kullanmanızı öneririm.

    Bir html belgesindeki köprüler teorisini biraz ele aldıktan sonra açıklayıcı örneklere geçebiliriz. İşte bağlantının kodu:

    İşte köprünüzün metni olmalı, yani çapa

    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 köprüler kaynağınıza yönlendirirse, bu, arama motorlarından sorulara neden olabilir ve kötü sonuçlara yol açabilir. Elbette, korkutucu bir adı olan Penguin :) olan sansasyonel Google algoritmasını duymuşsunuzdur.

    Bağlantıyı yeni bir pencerede açma. target_blank özelliği

    A html etiketini bulduk ama hepsi bu kadar değil. Bağlantılarla çalışırken işinize yarayacak daha birçok özellik vardır. Onlardan biri - bağlanmakhedef_boş.

    Html belgesine eklediğiniz bağlantının İnternet tarayıcısının yeni bir penceresinde açılması için gereklidir. Bu, uzun bir makale yazarken ve geçmiş yayınlarınıza atıfta bulunurken çok kullanışlıdır. Böylece kullanıcının okuduğu sayfa açık kalır ve linkler tarayıcıdaki diğer sekmelerde açılır.

    boş hedef html'de sitenize gelen ziyaretçilerin davranışları açısından yardımcı olduğu yani davranışsal faktörlerini etkilediği için çok sık kullanılmaktadır. Bu nedenle eğer hala _blank parametresi ile target özelliğini kullanmıyorsanız bu bölümü çok dikkatli okumanızı tavsiye ederim.

    Fark etmiş olabileceğiniz gibi, gerekli özniteliğin yerleştirileceği yer arasında pek bir fark yoktur, çünkü html etiketleri içinde sıraları önemli değildir.

    rel nofollow özelliği ve noindex etiketi. Bağlantıyı indekslemeden kapat


    html belgesindeki rel link niteliği ile çalışmaya başlayalım. Nofollow parametresine sahip bu özellik, sayfanızın ağırlığını başka hiçbir sayfaya aktarmamaya yarar.

    Bildiğiniz gibi herhangi bir sayfada, hatta yeni oluşturulan ve başka kaynaklardan harici linkler almayan sayfalarda bile sıfırdan büyük bir ağırlık vardır. Kullanıcılar bunu göremez, ancak arama motorları bunu dikkate alır.

    Bu nedenle, sayfalarınızın iç ağırlığının sizden uzaklaşmaması için, özniteliği olan bazı bağlantılar eklemeniz gerekir. rel nofollow. Bu özelliği içeren bağlantılar, diğer sitelere ağırlık vermez.

    doğal olarak bağlanmakrel nofollow yetkin dahili bağlantı, kaynağın başarılı bir şekilde optimize edilmesinin ve daha da geliştirilmesinin anahtarı olduğundan, sitenizin dahili sayfalarına bağlantı verdiğinizde kullanmamalısınız.

    Yukarıdaki özelliği yalnızca harici sitelere bağlantı veriyorsam kullanırım. Örneğin, fark etmiş olabileceğiniz gibi, genellikle yazılarımın sonunda, gönderileri Twitter okuyucum () olmaya davet ediyorum ve hesabıma bir bağlantı veriyorum, elbette, bu bağlantıyı rel nofollow'a ekliyorum. Şuna benziyor:

    takipçim ol

    Yine, nofollow rel'in href özelliğinden önce veya sonra yerleştirilmesi önemsizdir. Ayrıca, bu tür bağlantılarda, çapaya anahtar kelimeler yazmamalısınız, çünkü bu bir anlam ifade etmiyor çünkü daha önce biz bağlantı kurmaktakip etme, yani ağırlık aktarmaz.

    Şimdi tartışmak için etiketnoindex. Arama robotlarının sayfanın gereksiz öğelerini dizine eklememesini sağlamaya hizmet eder. Üstelik bu sadece köprüler için değil, metnin belirli bölümleri için de geçerlidir.

    takipçim ol

    Bu arada, herhangi bir siteye gittiğimde, köprünün nerede indekslemeye kapalı olduğunu ve tam tersine nerede açık olduğunu hemen görüyorum. Tüm bunlar Opera tarayıcısı için harika bir eklenti sayesinde. Ayrıca, bu eklentinin yardımıyla , ve AlexaRank gibi diğer kaynak parametrelerini de izleyebilirim.

    Bağlantı bağlantısı ve nasıl yapılacağı. İsim özelliği

    Ve şimdi ben, belki de çoğu kişi için bağlantılarla çalışırken çok ilginç bir şey keşfedeceğim. Şahsen ben bunu ancak WordPress'i altı aydan fazla kullandıktan sonra öğrendim. Yani, şimdi hakkında konuşalım 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 atıfta bulunabilirsiniz. Bu, yayın çok hacimli olduğunda ve bununla ilgili gerekli bilgileri bulmanın zor olacağı durumlarda gereklidir.

    Öncelikle, bağlantı kurmak istediğiniz makalede, sayfanın İnternet tarayıcısında kaydırılacağı bir metin bölümü seçmeniz gerekir. Yani, bir bağlantı verirseniz, diyelim ki ayar hakkında (bir çapa örneği değil), o zaman name niteliği yayının gerekli bölümüne yerleştirilmelidir.

    Gördüğünüz gibi, isim özelliğinin bir çapası yoktur, çünkü çapa bir açılış ve kapanış etiketi A'dan oluşur. Nitelik parametresini kendiniz ayarlamalısınız, yukarıdaki örnekte gösterildiği gibi eşittir işareti ve köşeli parantezlerden sonra belirtilmiştir.

    Şimdi, doğrudan yeni gönderide, önceden hazırlanmış bir çapa kullanarak bir karma bağlantı belirtmeniz gerekiyor. Böylece bağlantı, metinde ihtiyaç duyulan yeri hemen açacaktır. Bu karma bağlantı şöyle görünecektir:

    Çapa

    Bundan sonra, sitenizin okuyucuları, bu tür bağlantılara tıklayarak sayfanın belirli bir bölümüne hemen ulaşabilecektir.

    Pekala, sahip olduğum tek şey bu, herhangi bir sorunuz varsa, onlara yorumlarda sorun. Bunun html ile ilgili son makale olmadığını, yakın gelecekte bu konuda daha fazla yayın olacağını unutmayın.

    Video epilog: sanatçı cam üzerine çok hızlı resim çiziyor

    Birçok sitenin harici bağlantıları yeni bir pencerede açma uygulaması vardır. Çoğu zaman, örneğin, geliştiricinin web sitesine veya arama motoru sonuçlarına bağlantılar bu şekilde açılır. Kural olarak, bunun için etiket niteliği kullanılır.< >:

    Genel olarak konuşursak, kullanıcıya bağlantıyı nasıl açacağını söylemek çirkindir. Web sitesi kullanılabilirliği uzmanları, oybirliğiyle, kullanıcının bağlantıyı nasıl açacağına kendisinin karar verebileceğini iddia ediyor. Bu konuda biz istemeden pencerelerini düzene sokacak. Üstelik standart tarayıcı geri butonunu da kıracağız. Alışkanlıklara böylesine büyük bir müdahale muhtemelen hoşlanmamaya neden olacaktır!

    Ayrıca kötü bir izlenim yaratılıyor: “Kullanıcı siteden çıkıyor! Asla geri gelmeyebilir! Ah-ah-ah! Ne yapalım? Başka bir pencerede yeni bir bağlantı açalım! Belki ihtiyacı olan her şeyi gördüğünde, sonra bu pencereyi kapattığında, tekrar bize ulaşacak ve o zaman kesinlikle düzenli bir ziyaretçi olacak!

    Umarım anlamı açıktır - siteyi yüksek kaliteli faydalı ve ilginç içerikle doldurun ve ardından ziyaretçiler bilinçli ve bağımsız olarak geri dönecektir.

    Bununla birlikte, ahlaki yanı sıra, sorunun teknik bir yönü de var - hedef özniteliği XHTML 1.0 Strict belirtiminde değil ve buna göre doğrulamayı geçemeyecek!

    Geçerli Çözüm: JavaScript

    Önceki paragraflara rağmen, yine de sayfayı yeni bir pencerede açmaya karar verdiyseniz (veya buna zorlandıysanız), en azından onu geçerli kılalım.

    JavaScript'in kurtarmaya geldiği yer burasıdır. Bağlantının onclick olayını yakalamaya çalışalım ve window.open() işlevini kullanarak yeni bir pencereyi açmaya zorlayalım. Bundan sonra, dönüş yanlışını belirterek yerel penceredeki bağlantıya geçişi yasaklayacağız:

    Bağlantı yeni bir pencerede açılacak

    Çözümü kontrol edelim:

    Her şey harika. Tarayıcılar, bağlantıyı güvenle yeni bir pencerede açar. Doğrulayıcı, yeşil bir başarı mesajıyla bizi memnun ediyor. Sakinleşebilirsin gibi görünüyor, ama işte oradaydı! Tarayıcıya sert bir pop-up engelleyici koymayı deneyelim ve bağlantıyı tekrar takip edelim!

    Daha iyi çözüm

    Pop-up engelleme, esas olarak rahatsız edici reklamlarla mücadele etmek için tasarlanmıştır. Bu özellik tüm modern tarayıcılarda mevcuttur. Hatta bazı tarayıcılar farklı düzeylerde engelleme sunar. Örneğin, Opera 9+'da yalnızca "istenmeyen" pencereleri veya her şeyi engelleyebilirsiniz.

    Kullanıcıların yüzde kaçının açılır pencerelerle bu kadar radikal bir şekilde mücadele ettiğini bilmiyorum, ancak yalnızca bu tür ayarlarla, bir pencere açmak yerine, küçük bir "açılır pencere engellendi" istemi görünecektir. Ayrıca, ayarlarda bir tıklamaya tarayıcının tepkisinin bu tezahürü bile devre dışı bırakılabilir. Bu durumda, bağlantı basitçe işlevselliğini kaybedecektir: "Tıklıyorum ama hiçbir şey olmuyor!"

    Bunu okuduktan sonra biri şöyle derse: “Herkesi memnun edemezsin! Peki, doktorları kim ki, onlar için her şey kapalı! ”, O zaman böyle insanlarla yolumuzda değiliz. Geri kalanı için devam edelim.

    Bağlantı yeni bir pencerede açılacak

    Burada, window.open() işlevinin, pencere başarıyla açıldıysa true, aksi takdirde false döndürmesinden yararlandık. Yani, bağlantının yeni bir pencerede başarıyla açılması durumunda, bağlantının yerel penceremizde açılmasını engelleriz, çünkü dönüş!true=false olacaktır. Tersine, eğer pencere açılamadıysa, true değeri bağlantının normal şekilde çalışmasına izin verecektir.

    Merhaba, blog sitesinin sevgili okuyucuları. Bugün, Html dilinde bir köprünün ne olduğu, bunları sitedeki metne nasıl yerleştirebileceğiniz, bir bağlantının nasıl resim yapılacağı, “A” etiketinin nasıl kullanılacağı ve “Href” ve “Hedef boş” (yeni bir pencerede aç) nitelikleri hakkında daha ayrıntılı olarak konuşmak istiyorum.

    Genel olarak, köprü anahtar unsurdur. Ayrıca, bağlantılar artık sitenin başarılı tanıtımını etkileyen üç ana faktörden biridir. Bunların doğru uygulanması ve anlaşılması, örneğin, arama motorları tarafından muhasebeleştirilmesini nasıl etkilediği, kaynağınızın katılımını önemli ölçüde etkileyebilir.

    Köprü ve çapa (çapa) nedir

    Bu nedenle, günlük kullanım için kullanılmayan ve önerilmeyen etiketlerle zaten tanıştık. Tanışmamıza devam edelim.

    Html kodunda bir köprü oluşturmak için A etiketini de kullanmamız gerekir.Bunun için, örneğin bu bağlantıda hareket etmek için hedefin URL adresini (href) veya yeni bir pencerede açma talimatını (target = _blank) ayarlayan çeşitli öznitelikleri kullanmak mümkün olacaktır. Ama sırayla her şey hakkında konuşalım.

    Hemen yukarıda da belirttiğimiz gibi, köprüler Html dilinin temel unsurlarından biridir ve hem kendi sitenizin iç sayfalarına hem de diğer internet kaynaklarına bağlantı vermenizi sağlar. Bir bayağılık diyeceğim - bağlantıya geçiş, üzerine tıklanarak gerçekleştirilir (ve ne düşündünüz?).

    Dahili veya harici olarak ayrılabilecekleri gerçeğine ek olarak, aynı zamanda resmi olabilir ve yalnızca sitenizin sayfalarının açılacağı tarayıcının ihtiyaçları için kullanılmalıdır.

    Bu durumda sayfada görünmezler çünkü içeriği sayfada görüntülenmeyen belgenin kaynak kodunun Head alanına yazılır (Hypertext biçimlendirme dilinin kod yapısından ilgili yazıda bahsetmiştim).

    Hizmet köprüleri, "A" etiketi kullanılarak (her zamanki gibi) değil, etiketi kullanılarak oluşturulur. Bağlantı. Gerçekleştirdikleri pek çok görev vardır, örneğin, bunların yardımıyla, CSS basamaklı stil sayfalarına sahip harici dosyalar veya örneğin .

    Ama bugün nasıl yaratılabileceklerini düşünmeyeceğiz (zaman onlara gelecek), ama üzerinde duracağız. görünür bağlantılar, Gövde alanı içinde oluşturulabilir ve buna göre web sayfasında görüntülenecektir.

    Ancak yine de tüm köprülerin (hem görünür hem de hizmet) ortak bir noktası vardır - hepsi zorunlu bir öznitelik içerir referans. İçinde, değeri olarak, belgedeki belirli bir yer (daha önce bir çapa ile işaretlenmişse) veya belgenin kendisinin İnternet'teki adresi (veya başka bir deyişle, sayfanın yolu veya Href'te başka bir dosya yazılır) yazılır.

    Köprüler, sizi web'deki diğer belgelere götürmek veya halihazırda görüntülemekte olduğunuz bir web sayfasının içeriğinde, daha önce belgenin gövdesinde yapılmış olan ve aynı zamanda Html olarak da adlandırılan işaretleri kullanarak hareket etmek için tasarlanmış gezinme öğeleridir. çapalar(çapalar).

    Burada bir karışıklık olabilir, çünkü. SEO’da kelimenin altında ama Html dilinde “çapa” tam olarak çapa (anchor kelimesinin çevirisi) ya da daha sonra atıfta bulunulabilecek metindeki bir etiket anlamına gelir.

    Html'de çapalar neden kullanılır? Oldukça uzun bir web sayfası için gezinme oluştururken bu oldukça kullanışlıdır. Açtığınız sayfada, başlığının hemen altında, bu sayfada yayınlanan makalenin bölümlerinin adları verildiğinde muhtemelen internette tanışmışsınızdır.

    Böylece okuyucu, sayfada ilgili bilginin bulunduğu yere anında gidebilir ve metni kaydırma ve görsel olarak doğru yeri arama zahmetine girmez. Rahat ve geliştirir.

    Çapalar ve karma bağlantılar nasıl oluşturulur?

    Dolayısıyla, bu durumda görevimiz, sayfada (belgede) doğru yerlere çapalar yerleştirmek olacaktır, bu genel durumda şöyle görünecektir:

    Onlar. bir çapa oluşturmak için, boş köprü etiketi "A"ya, değeri olarak boşluk içermemesi gereken ve Latin karakterleri, sayılar, kısa çizgiler ve alt çizgiler kullanabileceğiniz benzersiz bir etiket kullanmanız gereken (Url'leri oluşturabileceğiniz kurallara - ,,,[_],[-]) tek bir "Ad" niteliği eklemeniz gerekir.

    Bu durumda, çapa sayfanın kendisinde görünmeyecek çünkü. "A" öğelerinin içine herhangi bir metin yazmadık. Ancak bu şekilde oluşturulan çapalar Html kodunu kirletecektir ve bu nedenle artık çapalardan çok daha sık kullanılmaktadır. etiket oluşturmanın başka bir yolu.

    Bu durumda, boş bir "A" etiketi oluşturmanıza gerek yoktur, ancak metinde doğru yerde zaten mevcut olan öğelerden herhangi birini kullanabilirsiniz. Örneğin, olabilir.

    Onlar. bir çapa analoğu oluşturmak için, herhangi bir etikete evrensel bir kimlik özelliği eklemek yeterlidir (tüm etiketler için kullanılabilir ve bu arada, buna göre çalışırlar), örneğin şöyle:

    Başlık metni

    Bu nedenle, kodu kirleten ve şu anda geçerli olmayan (Html ​​dilini geliştiren W3C konsorsiyumu tarafından önerilmeyen) gerekli sayıda çapa oluşturmak yerine, sadece bir Kimlik ekliyoruz.

    Bunun için, her zamanki gibi, zorunlu "Href" özniteliğini "A" köprüsünün içine eklemek gerekeceği, ancak değeri istenen etiketin (çapa) adından önce oluşturulacak olduğu ortaya çıktı. diyez işareti "#", hash ismine de sahiptir (dolayısıyla, bu arada, sık kullanılan ismin bacakları uzar: link hash):

    sayfanın çapa ile işaretlenmiş yerine atlayacaktır

    Lütfen böyle bir hiper bağlantıya tıkladığınızda yeni bir belgenin açılmayacağını unutmayın. Tarayıcı, zaten açık olan sayfayı, metinde çapayı eklediğiniz yer ekranın en üstünde bir konum alacak şekilde kaydıracaktır. Tarayıcı için karışıklığı önlemek için bir sayfadaki tüm etiketlerin (çapaların) değerlerinin benzersiz olması gerektiğini varsaymak mantıklı olacaktır.

    Bunun için uygun bir şekilde yerleştirilmiş bir etikette kimlik özelliğini kullanarak bir çapa yaparsanız, kullanılan karakter türündeki kısıtlamaya (,,,[_],[-]) ek olarak, kimlik değerinin gerekli olduğunu dikkate almanız gerekir. latin bir karakterle başlamalıdır.

    Daha sonra tüm geçerli karakterler herhangi bir miktarda bulunabilir, ancak kimlik özelliğinin değerindeki bağlantı etiketinin ilk karakteri bir harf olmalıdır (tabii ki Latince). Aksi takdirde, Html koduna eklenen böyle bir bağlantı (çoğu tarayıcıda) çalışmayacaktır.

    "#" karma sembolünden sonra herhangi bir bağlantı etiketi adı (href="#") yazmazsanız, böyle bir köprü sayfayı en üste kaydırır. Resimden bir bağlantı oluşturarak (bunun hakkında biraz sonra konuşacağız) ve bunu site şablonunuza ekleyerek en basit "Başa Dön" düğmesini bu şekilde oluşturabilirsiniz, örneğin şu şekilde:

    Href, herhangi bir köprü etiketinin gerekli bir özelliğidir.

    Şimdi belge içinde gezinmeden (çapa kullanarak) harici gezinmeye geçelim, örn. bizim veya başka bir sitedeki diğer belgelere yönlendiren bağlantılar yapmamız gerekecek. Şimdi, Href özniteliğinde artık bağlantı işaretleri yazmamız gerekmiyor, ancak açılan dosyanın yolunu yazmamız gerekiyor (sayfa, tasarımı gereği, sonraki görüntüleme için tarayıcıya yüklenen bir dosyadır).

    Çapa

    Burada daha ileri gitmeliyiz, ancak bahsedilen materyalde onlar hakkında ayrıntılı olarak zaten yazdım, bu yüzden muhtemelen tekrarlamanın bir anlamı yok. Ancak, oluşturduğunuz köprünün Href özelliğinde dosyanın yolunu nasıl ayarlayabileceğinizi bilmeniz gerekir. Bu nedenle, sunulan materyali tanımak için başvurmayın.

    Ancak url oluştururken tercih sebebi olduğunu hatırlatayım. sadece aşağıdaki karakterler: (,,,[_],[-]) ve boşluk kullanmayın. Mutlak bağlantılar için Href özniteliğinin içeriğini göz önünde bulundurursak, şematik olarak aşağıdaki gibi temsil edilebilir:

    Nadiren kullanacağınız şeyi bir kenara bırakırsak, hepsini biraz basitleştirilmiş bir biçimde sunabilirsiniz:

    Protokol (genellikle http)://domain_name (ör. web sitesi)/path_to_file (web sayfaları)

    İnternetteki basit http protokolüne ek olarak, şifreleme kullanması bakımından farklılık gösteren https protokolüne sahip bağlantılar bulabilirsiniz. İkincisi, sunucu ile istemci tarayıcısı arasındaki veri alışverişi kanalını korumaya ihtiyaç duyulan sitelerde kullanılır. Örneğin WebMoney elektronik para hizmetlerinde kullanılmaktadır.

    İnternette, Href içeriğinin çeşitli varyasyonlarını bulabilirsiniz, örneğin, bu:

    https://web sitesi/videokursy

    Veya bunun gibi (dosya uzantılı):

    https://site/seo/kak-raskrutit-sajt.html

    Bu, özü değiştirmez, ancak köprü içindeki Href özniteliğinin içeriğinin sonunda bir eğik çizgi varsa, bu, erişimin artık dosyaya değil, ilgili dizin nesnesinin aranacağı klasöre olduğu anlamına gelir (bunun hakkında daha fazla bilgiyi yukarıda belirtilen url adresleriyle ilgili makalede okuyun).

    Bağlantıdan bir şey indirin

    Gördüğünüz gibi, bu köprü normal olandan farklı değildir, tarayıcı dosyayı zip uzantılı indirmesi gerektiğini anlar ve örneğin html uzantılı belge dosyaları gibi görüntülemek için açmaya çalışmaz. Bununla birlikte, tüm bunları kişisel ihtiyaçlarınıza uyacak şekilde tarayıcınızda tamamen bireysel olarak yapılandırabilirsiniz.

    Ftp sunucusundan indirin

    Örneğin, karşılık gelen URL'yi Href'e ekleyerek (posta) da oluşturabilirsiniz:

    Bir mektup yaz

    Böyle bir bağlantıya tıkladığınızda, bilgisayarınızda varsayılan posta programınız açılır (tarayıcınızı, Href'teki mailto ile bağlantılar Gmail'de vb. açılacak şekilde yapılandırabilirsiniz) ve Href'te verilen posta adresinin "Kime" alanına ekleneceği yeni bir mektup oluşturmak için bir iletişim kutusu görünecektir.

    Aslında, e-posta gönder iletişim kutusundaki diğer alanları dolduracak oldukça karmaşık posta bağlantıları oluşturabilirsiniz, ancak bu oldukça nadiren kullanılır.

    Her neyse, son zamanlarda web yöneticileri, spam gönderenler tarafından sonuçta ortaya çıkan tüm sonuçlarla birlikte ayrıştırıldıkları gerçeği nedeniyle, Href'te mailto ile köprüleri kullanmayı fiilen bıraktılar. İletişim sayfasında klasik formda sunulan her şeye sahip olmama rağmen, sitede oluşturmak daha iyidir. Boş zamanınızda değiştirmek gerekli olacaktır (ya da değil ... sanırım).

    Bir bağlantı yeni bir pencerede nasıl açılır (hedef boş)

    Html kodunda bağlantılar oluştururken, genellikle şu soruyla karşılaşırız - yönlendirdiği belgeyi hangi tarayıcı penceresinde açacağız? Varsayılan olarak, bu köprünün yerleştirildiği sayfayla örtüşen mevcut bir pencerede açılır.

    Şahsen ben büyük bir destekçiyim değeri boş olan Target özelliği, bu bağlantının yerleştirildiği belgeyi açık bırakarak sayfayı yeni bir pencerede açmanıza olanak tanır. Bunun blogumun kullanılabilirliğini nasıl etkilediğini bilmiyorum ama bu seçeneği daha çok seviyorum ve neredeyse her durumda kullanıyorum.

    Arama motorlarında, bağlantıların açılmasını da özelleştirmeyi seviyorum. yeni bir pencerede böylece sorun her zaman elinizin altındadır ve her zaman ona geri dönebilirsiniz. Bu amaçlar için, daha önce bahsedildiği gibi, Html, varsayılan olarak Self değerine sahip olan özel bir Hedef özniteliği kullanır:

    Belgeyi aynı pencerede açar

    Elbette kimse "A" etiketine target="_self" yazmaz, çünkü bu değer varsayılan olarak kullanılır, ancak sayfayı yeni bir pencerede açmanız gerekirse, target="_blank" yazmanız gerekir:

    Yeni bir pencerede açılır

    Target özelliğinin değerlerinin yazıldığına dikkat edin. başında alt çizgi ile(_blank), çünkü köprü metni biçimlendirme dilinde boşluklar içeren Wc3 doğrulayıcısında bu şekilde şart koşulmuştur. Dikkat çekici bir şekilde, Html, varsayılan bağlantı açma seçeneğini değiştirme yeteneği sağlar.

    Örneğin sitenizdeki tüm hyperlinklerin yeni pencerede açılmasını istiyorsanız o zaman kullandığınız şablonun Head alanına yazmanız gerekecektir. Temel etiket target="_blank" özniteliği ile:

    orada başka bir şey

    Ve şimdi, bağlantılardan herhangi birini aynı pencerede açmak istiyorsanız, "A" etiketine zaten target="_self" eklemeniz gerekecek, çünkü _blank artık varsayılan olarak kullanılıyor. Oh nasıl.

    Bu arada, Base öğesini yukarıda açıklanan şekilde kullandım, ancak içine yeni bir pencerede açılması gereken birkaç köprü içeren bir kod alanı da ekledim. Onlar. Ayrıca Body alanındaki kapanış Base etiketini de kullandım ve her şey işe yaradı. Elbette böyle bir kod geçerli olmasa da.

    Vurgulu ve geçişte köprü renkleri - nasıl değiştirilir

    Html dilinde, kullanıcının daha önce açmış olduğu ve hangisine hala dokunulmadan kaldığı bağlantıda gezinmesi kolay olacak şekilde tasarlandı.

    Bu amaçla, kullanıcı köprüye tıkladığında değişecek bir renk kullanılır ve üzerinde asılı duran belge başarıyla açılır. Orijinal sayfaya geri dönen kullanıcı, ziyaret ettiği bağlantının renginin değiştiğini görecektir. Tüm tarayıcılar bu numarayı yapabilir.

    Varsayılan olarak, saf Html'de (CSS özelliklerini kullanmadan), bağlantıların altı çizilir ve üç renk seçeneği:

    1. Mavi, kullanıcının henüz tıklamadığı bozuk bağlantıların rengidir.
    2. Kırmızı - üzerine tıkladıktan hemen sonra ve istenen belge ağ üzerinden kullanıcının tarayıcısına indirilene kadar köprü tarafından kabul edilir (modern koşullarda, bu anı yakalamak hiç de kolay değildir ve her şey her yerde suçlanır)
    3. Mor - kullanıcının zaten takip ettiği kullanılmış bağlantıların rengi

    Html 4.01'de bu bağlantı renkleri varsayılandır, ancak değiştirilebilirler kullandığınız şablonun dosyalarından birinde bulabileceğiniz Body etiketine yazılan özel nitelikleri kullanarak. Üç rengi de değiştirmek için sırasıyla üç özellik kullanılır:

    1. Bağlantı - ziyaret edilmemiş bir bağlantının rengini ayarlar
    2. Alink - şu anda aktif olanın tarayıcı tarafından işlenen rengi
    3. Vlink - kullanıcı tarafından zaten ziyaret edilen köprünün rengi

    Unutma, nasıl hakkında zaten yazdım . Buna göre, belirtilen nitelikler şöyle görünebilir:

    Doğal olarak, burada kastedilen saf Html seçeneğidir, herhangi bir nedenle stil kullanmak uygun veya imkansız olmadığında, aksi takdirde tüm bu renkler kullanılarak kolayca ayarlanabilir ve değiştirilebilir.

    Bir resim nasıl bağlantı yapılır - iki yol

    Burada her şey oldukça basit. Çünkü satır içi bir öğedir, bu durumda, daha büyük bir resim dışında, herhangi bir resim büyük ölçüde sadece bir harf olarak kabul edilebilir.

    Bir bağlantı yaptığınız görüntünün etrafında saf Html olması durumunda, sahip olacaksınız üç piksel geniş kenarlık. Ayrıca, bu çerçevenin rengi, siteniz için kabul edilen bağlantıların renklerine tam olarak karşılık gelecektir (metnin biraz yukarısında onlardan bahsetmiştik).

    Köprü oluşturduğunuz bir görüntüye kenarlık eklemeyi kaldırmak için, Img etiketine sıfır değerine sahip bir Kenarlık niteliği eklemeniz gerekir:

    Bu, bir görüntüyü bağlantı haline getirmenin çok basit bir yoludur, ancak adı verilen daha karmaşık bir seçenek de vardır. görüntü haritası. Bu durumda, oldukça fazla sayıda Html etiketi ve niteliğinin kullanılması nedeniyle, tek bir görüntüden aktif alanlarla (tıklanabilir ve çeşitli şekillere sahip - bir dikdörtgen, daire, çokgen) tam bir bağlantı haritası oluşturabilirsiniz.

    Örneğin, sayfanıza büyük bir fotoğraf yerleştirebilir ve sayfanın farklı yerlerine tıkladığınızda farklı sayfaların farklı köprülerle açılmasını sağlayabilirsiniz. Aslında, görüntü haritasını anlatmak oldukça uzun bir zaman ve kimsenin onu kullanması pek olası değil, bu yüzden bunu yapmayacağım çünkü "oyun muma değmez."

    Sana iyi şanslar! Yakında blog sayfaları sitesinde görüşmek üzere

    ilginizi çekebilir

    Select, Option, Textarea, Label, Fieldset, Legend - Açılır liste formunun ve metin alanının Html etiketleri
    HTML'ye bir bağlantı ve bir resim (fotoğraf) nasıl eklenir - IMG ve A etiketleri
    Iframe ve Frame - bunlar nelerdir ve Html'de çerçevelerin en iyi nasıl kullanılacağı
    Html'de boşluk karakterleri ve bunların kod biçimlendirmesi, ayrıca bölünemez boşluk özel karakterleri ve diğer anımsatıcılar
    MailTo - nedir ve Html'de bir e-posta bağlantısı nasıl oluşturulur
    Html ve CSS kodunda renkler nasıl ayarlanır, tablolarda RGB gölgelerinin seçimi, Yandex sonuçları ve diğer programlar
    Yazı Tipi (Yüz, Boyut ve Renk), Blockquote ve Pre etiketleri - saf HTML'de kullanımdan kaldırılmış metin biçimlendirmesi (CSS kullanmadan)
    Img - Bir resim (Src) eklemek, onu metinle hizalamak ve sarmak (hizalamak) ve ayrıca bir arka plan (arka plan) ayarlamak için Html etiketi
    Html kodundaki listeler - UL, OL, LI ve DL etiketleri
    Html 4.01 standardına göre H1-H6 başlıkları, yatay satır Hr, satır sonu Br ve P paragrafı etiketleri ve nitelikleri

    Şu anda hedefin ilgili tek değeri _blank'tir. Belirli çerçeveleri belirtmek için hedefin diğer değerleri kullanıldı. Ancak, çerçeveler HTML5'te kullanımdan kaldırılmıştır.

    varsayılan hedef

    Herhangi bir hedef belirtilmezse, kullanıcı veya tarayıcı aksini belirtmediği sürece bağlantı geçerli bağlamda açılır.

    a target=”_blank” Yeni Tarayıcı Sekmesinde (veya Penceresinde) Aç

    Target niteliği, bağlantı tıklandığında bağlantılı belgenin nerede açılacağını belirtir. Varsayılan geçerli penceredir. target="_blank" ise, bağlantılı belge yeni bir sekmede veya (eski tarayıcılarda) yeni bir pencerede açılır.

    Neden Yeni Bir Tarayıcıda Açmalısınız?

    `target=”_blank” kullanmanın en yaygın nedeni site dışı bağlantıların ayrı bir sekmede açılmasıdır. Bu, kullanıcının bir referansı tıklamasına ve daha sonra geçerli sayfadan ayrılmadan ona geri dönmesine olanak tanır. Ziyaretçileri sitenizde daha uzun süre tutar ve metriklerinizin çoğunu iyileştirir: hemen çıkma oranı, dönüşüm, ziyaret edilen sayfalar.

    Tüm Dış Bağlantıları JavaScript ile Yeni Bir Sekmede Açın

    Sitenizdeki her bağlantıya manuel olarak target="_blank" eklemeniz gerekmez. Çok fazla bağlantı veriyorsanız (ki yapmanız gerekir), sitenize bazı JavaScript kodları eklemek ve tüm harici bağlantıları otomatik olarak _blank bağlantılarına dönüştürmek kolaydır.


    jQuery(document.links) .filter(function() ( return this.hostname != window.location.hostname; )) .attr("hedef", "_blank");

    (Bu web sitesinin her sayfasında bu kodun biraz değiştirilmiş bir biçimini çalışırken görebilirsiniz.) Bu hile için jQuery gerekir, ancak onu zaten kullanıyor olma ihtimaliniz yüksektir. WordPress , Drupal ve Twitter Bootstrap gibi en popüler çerçevelerde ve içerik yönetim sistemlerinde kullanılır. Bunu jQuery olmadan yapmanız gerekiyorsa, bu da yapılabilir. İşte bir "düz JavaScript" versiyonu:

    function externalLinks() ( for(var c = document.getElementsByTagName("a"), a = 0;a< c.length;a++) { var b = c[a]; b.getAttribute("href") && b.hostname !== location.hostname && (b.target = "_blank") } } ; externalLinks();

    Kolaylaştırmanın yanı sıra, işaretlemenizi önemli ölçüde temizler.

    `target=”_blank” kullanmama nedenleri

    Bazı kişiler, kullanıcıların bağlantıları yeni bir göz atma bağlamında açmayı tercih etmediğini iddia eder. Bunu yapmanın pop-up reklamlara ve diğer can sıkıcı davranışlara benzediğini düşünüyorlar. yükselişi ile sekmeli tarama, bu argüman büyük ölçüde ortadan kalktı. Çoğu kullanıcı, bağlantıları yeni bir sekmede açmayı tercih eder, çünkü bu, mevcut göz atma bağlamlarını kaybetmeden daha sonra okumak üzere referans verilen bağlantıları kuyruğa almalarına izin verir.

    Hedef Özniteliğin değerleri

    Değer Adınotlar
    _boşlukBağlı belgeyi yeni bir sekmede veya pencerede açar.
    _ebeveynBağlantıyı üst çerçevede açar. Çerçeveler HTML5'te kullanımdan kaldırılmıştır.
    _kendisiBağlantıyı geçerli çerçevede açın.
    _tepeBağlantıyı en üstteki çerçevede açar. Çerçeveler HTML5'te kullanımdan kaldırılmıştır.
    çerçeve adıBağlantıyı adlandırılmış çerçevede açar. Çerçeveler HTML5'te kullanımdan kaldırılmıştır.