HTML'ye köprü nasıl eklenir? HTML'de köprü oluşturma ve kullanma. Bir resmi HTML'de, Vkontakte'de, forumda bir bağlantı haline getirme ve CSS Görüntüsünü köprü olarak kullanma
Bu dersimizde HTML'de nasıl link oluşturulacağından bahsedeceğiz. Bağlantılar web sitelerinde sıklıkla kullanılır; bir web sitesinin bir sayfasından diğerine geçmenizi sağlarlar. Bağlantıların özelliği, yalnızca bir web sayfasına değil aynı zamanda dosyalara, resimlere vb. de yönlendirebilmeleridir.
Bağlantılar dahili ve harici olabilir. Dahili bağlantılar bir sitedeki sayfalara ve dosyalara yönlendirir. Dış bağlantılar üçüncü taraf sitelere, belgelere ve dosyalara yönlendirir. Aynı zamanda bu tür bağlantılar neredeyse aynı şekilde ayarlanmıştır.
HTML'de bağlantı nasıl yapılır, örnekler1. HREF - bağlantının nereye gitmesi gerektiğinden sorumludur. Standart bir bağlantı şu şekilde belirtilir: Bağlantı metni.
2. HEDEF - belgenin hangi pencerede açılacağından sorumludur. Varsayılan yeni belge geçerli tarayıcı penceresinde açılır. "Hedef" özelliği, bir bağlantıyı yeni bir tarayıcı penceresinde açmanıza olanak tanır. Bu özellik aşağıdaki parametrelere sahiptir:
- _blank - sayfayı yeni bir pencereye yükler;
- _self - sayfayı geçerli pencereye yükler;
- _parent - sayfayı ana çerçeveye yükler;
- _top - tüm çerçeveleri iptal eder ve sayfayı yeni bir pencereye yükler.
3. İSİM - sayfa içinde belirli bir alana gitmek için kullanılır. Karma sembolünden sonra anahtar kelime (yer imi veya etiket) tırnak işaretleri içinde belirtilir. Bu etikete gitmek için bu etiketin yazıldığı bağlantıyı kullanın.
Dış bağlantı örneğiWeb sitesine git
Ücretsiz WordPress dersleri sitesine gidinÖrnek 4: Bağlantı olarak görseller.
Referans olarak örnek resim
Metne git
Sayfa metni...
Bu örnekte sayfa, "name" özelliği kullanılarak "liste" olarak etiketlenmiştir. Bu etikete bağlantı vermek sizi sayfanın belirli bir alanına götürecektir.
Dosyayı indir Bir mektup yazBağlantıların rengini “body” etiketinde parametre olarak belirtilen nitelikleri kullanarak ayarlayabilirsiniz. Şu nitelikleri göz önünde bulundurun:
- bağlantı - ziyaret edilmemiş bağlantı, varsayılan olarak mavi renkte görüntülenir;
- alink - etkin bağlantı, varsayılan olarak kırmızı;
- vlink - ziyaret edilen bağlantı, varsayılan olarak mor.
Böylece HTML'de bağlantıların oluşturulduğu prensibi anladık. Bağlantılara belirli stiller verilebilir. Bağlantıyı takip ederek derste bunu görebilirsiniz.
Sanırım ne demek istediğimi zaten anladın konuşacağız bu bölümde.. ve bağlantının ne olduğunu biliyorsunuz, değilse buraya tıklayın.. Çeşitli bağlantı türleri ve bunlara tıklamak için "mekanizmalar" vardır. Bu bölümde bağlantıların nasıl kaydedileceği hakkında ayrıntılı olarak konuşmaya ve onlarla çalışmanın inceliklerine girmeye çalışacağım.
Lirik ara söz:
Orduya girdiğimde genelkurmay başkanı yanıma geldi ve bir emir verdi, alıntı yapıyorum:
Nerede olduğunu ve ne olduğunu bilmesem de bana o belgeyi getir!! Neden ayaktasın? Hadi koşalım!! Geciktim!!!
Yani bununla demek istediğim, tarayıcının benim o zaman yaptığım gibi şaşkınlığa düşmemesi için şunu bilmesi gerekiyor: belgenin tam adı, belgenin yolu ve onu nereye getireceği, daha doğrusu, nerede açılacağı.
Açık şu an not defterini kullanarak sadece bir HTML belgesi oluşturduk, bende index.html adında var (neden bu kadar garip bir isim seçtiniz index.html ve neden gerekli, bakın) Hangisini bilmiyorum, siz geldiniz kendi adınızla, ama sanırım siz kullanmışsınızdır hatırlayın ve nerede olduğunu biliyorsunuz, tabi ki benim özel kalemim değilseniz :).. Bu belgede henüz elimizde olmayan başka bir belgeye bağlantı oluşturmaya çalışacağız. .. Yani ona bağlanmadan önce onu oluşturmanız gerekir, çünkü bunu nasıl yapacağınızı zaten biliyorsunuz.
Artık iki tane olduğunu biliyorum HTML belgesi ve index.html ve primer.html'yi ve artık daha ileri eğitim için minimum bir sete sahip olduğunuzu.
Metin bağlantıları.tanışalım etiketi (çapadan), içine belirli belgelere bağlantı olacak bir metin veya resim ekleyebilirsiniz. Etiket özelliği href, bağlantının işaret ettiği belgenin adını ve yolunu belirtir.
Hep birlikte şu şekilde yazılmıştır:
İşte fotoğraflarım!!Muhtemelen anladığınız gibi, primer.html ikinci html belgemizin adıdır ve "İşte fotoğraflarım!!" bu index.html dosyasından bir metin parçasıdır.
Resimlere benzetilerek etiket Açılan belgenin bağlantı yolu aynı yöntemler kullanılarak belirtilir:
İşte fotoğraflarım!! - Bu, primer.html dosyasının belgeden bir seviye daha yüksekte bulunduğu anlamına gelir
İşte fotoğraflarım!! - belge www.site.ru web sitesinde bulunmaktadır.
Peki deneyelim mi? Aşağıda birbirine işaret eden bağlantılar içeren iki belge örneği verilmiştir.
Index.html dosyası:
Bir metin parçasına bağlantı oluşturma
Söyle bana sevgili çocuğum: hangi kulağın uğultuluyor?
Sağda mı solda mı?
Primer.html dosyası:
Buradaki bağlantıyı takip ettim
Ama doğru tahmin etmedim! Her iki kulağımda da uğultu var.
Ben böyle oynamıyorum...
Örnekte bağlantıların renkli olarak vurgulandığını görebilirsiniz, varsayılan olarak mavi bir bağlantıdır ve kırmızı zaten ziyaret edilmiş bir bağlantıdır, bu renkler zaten bizim tarafımızdan iyi bilinen açılış etiketi kullanılarak değiştirilebilir< body >ve onun nitelikleri.
bağlantı - bağlantı rengi.alink - tıklanan, etkin bağlantının rengi.
vlink - ziyaret edilen bağlantının rengi.
Bu şekilde yazılmıştır:
Bir metin bağlantısının rengi hakkında konuşmaya devam edersek, gerekirse tanıdık bir etiket ve onun rengini kullanarak hem bağlantının tamamını hem de tek tek parçalarını (ifadeler, kelimeler, harfler) renkli olarak vurgulanmaya zorlayabileceğinizi belirtmekte fayda var. bağlanmak. Ancak bu yalnızca renk için geçerli değildir; metnin boyutunu, stilini ve yazı tipini de ayrı ayrı ayarlayabilirsiniz. Ancak etiketin içinde renk manipülasyonunun yapılması gerektiğini unutmayın. Burada ve aşırıya kaçmayın, aksi takdirde bağlantı rengi varsayılan olarak veya etikette belirtildiği gibi olacaktır
Index.html dosyası:
Gökkuşağı
Gökkuşağındaki renklerin yerlerini hatırlamanıza yardımcı olacak ifadeye bakın
R
A
D
sen
G
A
Primer.html dosyası:
Gökkuşağı
Her
avcı
dilekler
Bilmek
Nerede
oturuyor
Sülün
Ana sayfaya geri dön
Sitedeki sayfalarınızdan birinin index.html olarak adlandırılması gerekir. Bir kişinin web sitenizin adını girdiğinde robot programının web sitenizde arayacağı bu isimdeki dosyadır. İlk olarak index.html sayfası açılacağı için onu ana sayfa yapın. Geri kalan sayfalara istediğiniz gibi hitap edebilirsiniz... Artık isimlerde nüanslar yok.
Kayıt hakkında... Dokümanların yolunu ve adlarını yazarken şunu unutmayın, örneğin: Page.html, page.html ve PAGE.html farklı dokümanların adlarıdır! Aynı durum yer imleri ve resimlerin adları için de geçerlidir. Kod yazarken her zaman büyük/küçük harfe dikkat edin; bu tür adların bir tarayıcı tarafından tanınmama olasılığı yüksektir. Herşeyi küçük yazmayı ve küçük olarak adlandırmayı bir kural haline getirin Latin harfleriyle Böylece insan faktörünün ve program değişkenlerinin riski sıfıra indirilecektir.
Üç tıklama kuralı...
Bir site ziyaretçisinin minimum sayıda tıklamayla sitedeki herhangi bir sayfadan herhangi bir yere gidebileceği bir “bağlantı ağacı” oluşturmaya çalışın. Sitede istenilen yere üçten fazla geçiş artık iyi değil.Bir kişi için gereksiz sayfaların sonsuz yüklenmesi sinir krizi geçirmesine ve sitenin erken kapanmasına yol açabilir. İnsanların zamanından, parasından ve sinirlerinden tasarruf edin.
Bir HTML belgesinin ana özelliği, içinde diğer belgelere, sitelere, dosyalara, resimlere vb. köprülerin (veya yalnızca bağlantıların) bulunmasıdır. İnternet'i bu kadar popüler kılan, sayfa dışındaki nesnelere bağlantılar ekleme yeteneğidir. ve kullanımı rahat. Bu nedenle web sitenizi oluştururken her zaman bağlantıların “sihrini” unutmayın.
Bu derste bir web sitesine, onun bireysel sayfasına veya dosyasına nasıl bağlantı oluşturulacağı hakkında konuşacağız. Bir bağlantının metnini nasıl değiştireceğinizi, onu yeni bir pencerede nasıl açacağınızı, bir görsele nasıl bağlantı oluşturacağınızı, harici ve dahili bağlantıların neler olduğunu ve çok daha fazlasını öğreneceksiniz. Ayrıca, önceki derslerde de değindiğimiz (örneğin, bir bağlantının rengini nasıl değiştirebileceğinizden bahsettik) bağlantılarla çalışma hakkında zaten bilginiz var.
Genel olarak bu eğitim, bağlantı oluşturma konusundaki anlayışınızı eksiksiz ve yeterli hale getirecektir. HTML'de nasıl köprü oluşturulacağını ve nedenini anlayacaksınız. Ve onun özelliklerini kontrol etmeyi öğreneceksiniz.
Şartlar § 1. Dosyaya bağlantı, siteye bağlantı, sayfaya bağlantı
Bir dosyaya verilen bağlantının, bir siteye veya onun bireysel sayfasına verilen bağlantıdan ne kadar farklı olduğuna dair çok sayıda soru, beni bunun cevabını bu dersin en başına koymaya zorladı. Cevap: hiçbir şey. Listelenen tüm bağlantılar orijinal sayfanın dışındadır ve aynı şekilde oluşturulur.
Düşüncelerimin çılgına dönmesine izin vermemek için size her şeyi bir örnekle göstereceğim.
Tarayıcıda şunu göreceğiz:
Tarayıcıda şunu göreceğiz:
Gördüğünüz gibi tüm bağlantı türleri tamamen aynı şekilde oluşturulur. Tek fark başvurulacak nesnenin adresidir. Şimdi dersin ana kısmına geçelim.
§ 2. Dış bağlantıların oluşturulmasıBağlantılar, metin ve grafiğin yanı sıra harici ve dahili olarak birbirinden farklılık gösterir. Dış bağlantılar html sayfasının dışına, iç bağlantılar ise aynı sayfanın farklı bölümlerine yönlendirir. Metin bağlantıları metindir (varsayılan olarak mavi renkte vurgulanır ve altı çizilir) ve grafik bağlantıları, gitmek için tıklamanız gereken bir nesne olarak bir resim içerir. Tüm bu tür bağlantılar HTML'de bir etiket (bağlantının kısaltması) kullanılarak oluşturulur. Şimdi ona daha yakından bakalım.
Bir siteye, sayfaya veya dosyaya harici bağlantı oluşturmak için href etiketi özelliğini kullanın. Bu özellik, değeri olarak bir sitenin, sayfanın veya dosyanın URL'sini alır (bunu yukarıda tartıştık). Etiketlerin arasında bağlantının görünür kısmı (bağlantı çapası), yani tarayıcı ekranında gördüğümüz kısım bulunur. Bağlantı bağlantısı düz metin (metin bağlantısı) veya Grafik sunum(bağlantı resmi). Ve etiketleri arasına tanıdık bir etiket eklenerek bir resim bağlantısı oluşturulur. Genel olarak bağlantı oluşturmanın sözdizimi şuna benzer:
Örneğin, bu sitenin ana sayfasına bir metin bağlantısı oluşturmak için aşağıdaki HTML kodunu yazmanız gerekir:
http://www.seoded.ru/">Site web sitesinin ana sayfası
Tarayıcıda şöyle görünecek:
Bu dersin en başında da yazdığım gibi bağlantı metninin (çapa) rengi . Genel olarak, sayfanın ana metniyle aynı kuralları bağlantı metinlerine de uygulayabilirsiniz; yani metni kalın, italik olarak vurgulayın, başlık kullanın vb.
§ 2.1 Grafik bağlantıları (resim bağlantıları)Yukarıda da söylediğim gibi resim bağlantısı oluşturmak için . Böyle bir bağlantının örneği şuna benzer:
Ve tarayıcı şunları gösterecektir:
Varsayılan olarak tarayıcı, görüntüyü bir grafik bağlantısıyla bir çerçeveyle çevreler. Eğer bu istenmiyorsa IMG etiketinin border özelliği 0 olarak ayarlanmalıdır:
kenarlık = "0">
Ana sayfa
§ 3. Dahili bağlantılarDahili bağlantılar, çok fazla içeriğe sahip sayfalarda rahatça gezinmek için kullanılır. “Ders İçeriklerini” onların yardımıyla hazırladım (bu sayfanın başına bakın). İç bağlantılar, dış bağlantılarla aynı prensip kullanılarak oluşturulur. Yalnızca href özelliğinin değeri bağlantının "çapasını" belirtir. "Çapa" name özelliği tarafından oluşturulur:
name="bağlantı adı">metin
Ve "çapanın" adı keyfi olarak belirlenir. Burada tüm tarayıcıların "çapaların" Rusça adlarını anlamadığını söylemekte fayda var, bu yüzden Latin alfabesini kullanmanızı tavsiye ederim. Bir "bağlantı" oluşturmak için etiketler arasındaki metin gerekli değildir ve çoğunlukla belirtilmez.
Kullanıcının bağlantıya tıkladıktan sonra gitmesi gereken sayfada "Kızamık hastasıyım" yazısı yer alıyor.
Yukarıda da söylediğim gibi bir iç bağlantının href özelliğinde adres yerine istenilen “çapa”nın adı önünde zorunlu hash simgesi (#) ile belirtilir. Bir örnekle bakalım.
Zagolovok adında bir "çapa" oluşturdum ve onu bu dersin başlığının (HTML'de Köprüler) yanındaki sayfa koduna yerleştirdim. Bağlantı kodu aşağıdaki gibidir:
name = "zagolovok">
href="#zagolovok">Başlığa git
Ve tarayıcıda şöyle:
Dikkat ettiyseniz, başlığın dahili bağlantısına tıkladıktan sonra tarayıcının adres çubuğundaki URL değişti:
Orijinal adrese:
http://www..html
http://www..html#zagolovok
Ve bu özelliği kullanarak İnternet'teki herhangi bir kaynaktan sayfadaki belirli bir konuma bağlantı verebilirsiniz! Yani, bir konu hakkında uzun bir makale içeren bir sayfa oluşturduğunuzu (veya sayfada çok sayıda fotoğraf yayınladığınızı) ve bunu dahili bağlantılarla işaretlediğinizi varsayalım. içindeyken, yalnızca makalenin (veya fotoğrafların) bulunduğu sayfaya değil, aynı zamanda makalenin belirli bir yerine (veya belirli bir fotoğrafa) bağlantı vermeniz gerekiyordu. Adreste dahili bağlantı bulunan seçeneği kullanarak ihtiyacınız olanı kolayca elde edebilirsiniz.
§ 4. Mutlak ve göreceli referanslarAna sayfa
Ancak göreceli bağlantılarda durum biraz daha karmaşıktır. Bu tür bağlantılarda adres, sitenin kök klasörüne (ana sayfanın bulunduğu klasör) veya kaynak sayfaya göre belirtilir. Bu tür bağlantılara ihtiyaç vardır, örneğin site şu adreste bulunuyorsa: ev bilgisayarı. Veya bu bir site değil, diğer belgelere işaret eden bir sayfadır.
Diyelim ki aynı klasörde bulunan klienty.html sayfasına başvurmamız gerekiyor. ana sayfa alan. Daha sonra ilgili bağlantı kodu şöyle görünecektir:
/klienty.html">İstemciler
Şimdi ana sayfayla aynı klasörde bir zakazy klasörü olduğunu ve klienty.html sayfasının zaten içinde olduğunu varsayalım.O zaman ilgili bağlantı kodu şu şekilde olacaktır:
/zakazy/klienty.html">Müşteriler
Şimdi kaynak sayfaya göre köprüler oluşturmaya bakalım. Diyelim ki bir fiyat.html sayfamız (kaynak sayfa) var ve bu sayfadan klienty.html sayfasına bağlantı vermemiz gerekiyor. Aşağıdaki tipik seçenekler vardır:
1. Price.html ve klienty.html sayfaları aynı klasörde bulunur.
klienty.html">Müşteriler
2. sitenin kök klasöründe, Price.html sayfası zakazy klasöründe bir seviye daha yüksekte bulunur).
Kod şöyle görünecek:
../klienty.html">İstemciler
İki nokta, geçerli klasörden daha yüksek bir düzeye çıkmanız gerektiğini gösterir.
3. Klienty.html sayfası ve zakazy klasörü sitenin kök klasöründe bulunur, mebel klasörü zakazy klasöründedir, Price.html sayfası mebel klasöründedir (yani klienty.html sayfası sitenin kök klasöründe bulunur) orijinal fiyat.html sayfası iki seviye daha yüksektir).
../../klienty.html">Müşteriler
Yani her seviye iki nokta ve eğik çizgi “/” ile gösterilir.
4. sitenin kök klasöründe, klienty.html sayfası zakazy klasöründe bulunur (yani artık orijinal Price.html sayfasına göre klienty.html sayfası bir seviye daha aşağıdadır).
zakazy/klienty.html">Müşteriler
Bu durumda noktalar ve eğik çizgiler kullanılmaz.
5. Price.html sayfası (orijinal sayfa) ve zakazy klasörü sitenin kök klasöründe bulunur, mebel klasörü zakazy klasöründedir, klienty.html sayfası mebel klasöründedir (yani artık klienty) .html sayfası orijinal fiyata göredir.html sayfası iki seviye aşağıdadır).
zakazy/mebel/klienty.html">Müşteriler
6. Sitenin kök klasöründe iki klasör vardır: zakazy ve oplata. Klienty.html sayfası zakazy klasöründedir, orijinal fiyat.html sayfası ise oplata klasöründedir (yani her iki sayfa da sitenin kök klasörünün bir seviye altındaki farklı klasörlerdedir).
../zakazy/klienty.html">Müşteriler
E-postaya bağlantı oluşturmak için href nitelik değerindeki URL'yi, protokolü belirten bir e-posta adresiyle (mailto:) değiştirmeniz gerekir. Daha sonra bu bağlantıya tıkladığınızda bir pencere açılacaktır. posta programı"Kime" alanına girilen e-posta adresiyle. HTML kodunda şöyle görünür:
posta: [e-posta korumalı]">Postalarım
Ve tarayıcıda böyle.
Merhaba, blog sitesinin sevgili okuyucuları! Bildiğiniz gibi bir web sitesini başarılı bir şekilde tanıtmak ve arama sonuçlarındaki konumunu artırmak için web sitesinin yüksek kalitede SEO optimizasyonunu gerçekleştirmek gerekir. Sırasıyla iç ve dış olarak ayrılan "" kavramı, "iç ve dış site bağlantıları" gibi kavramlarla ayrılmaz bir şekilde bağlantılıdır. Bu nedenle sitede kaç link olması gerektiğini, sayılarının nasıl kontrol edileceğini, gereksiz linklerin siteden nasıl kaldırılıp indekslenmesinin engelleneceği, link kütlesinin nasıl artırılacağını vb. bilmek bizim için çok önemlidir. İç ve dış bağlantılarla ilgili tüm bu ve diğer soruları yanıtlamak için öncelikle HTML'de bağlantının (veya köprünün) ne olduğunu anlayalım.
Bu yazıda size bağlantının ne olduğunu, bir web sitesinde HTML'de nasıl köprü oluşturulacağını, yeni bir pencerede bağlantının nasıl açılacağını, bir e-posta adresine (e-posta) bağlantının nasıl oluşturulacağını ve nasıl yapılacağını anlatacağım. bir resme bağlantı oluşturun. Ayrıca html etiketleri ve köprü nitelikleri, bağlantı çapası, html çapası ve hash bağlantıları gibi kavramlara da değineceğiz. Öyleyse başlayalım.
Bağlantı nedir (köprü).Bir köprü, var olmayan (silinmiş, taşınmış) bir web sayfasına veya dosyaya yönlendiriyorsa veya adresi yanlışsa, bu tür bir bağlantıya bozuk bağlantı adı verilir. Ziyaretçileri yanılttıkları ve böyle bir bağlantıya tıklayan kişinin sitenize geri dönme olasılığı düşük olduğu için sitede kırık bağlantılar olmamalıdır. Kırık bağlantıların neden göründüğü, bunların nasıl bulunacağı ve düzeltileceği hakkında ayrı bir makalede daha fazla konuşacağız. Şimdi devam edelim.
Bir web sitesinde HTML'de bağlantı (köprü) nasıl yapılır.Kendi sitenizdeki veya başka bir sitenizdeki başka bir sayfaya bağlantı vermek çok kolaydır. Köprü oluşturmak için tarayıcıya bağlantının ne olduğunu söylemeniz ve yönlendireceği belgenin adresini belirtmeniz gerekir. Bu bir HTML etiketi kullanılarak yapılır ve gerekli href özelliği:
Burada URL gidilecek belgenin adresidir. Ve etiketlerin arasında yer alan köprü metni Ve, bağlantı çapası olarak adlandırılır ve web sayfasının ziyaretçisi tarafından görülebilir. Bağlantı metni (anchor) okuyucuya geçişin yapılacağı yeri bildirmesinin yanı sıra sitenizin sıralamasını etkileyen belirleyici faktörlerden biri olarak hizmet verdiği için arama motoru optimizasyonunda da (SEO) oldukça önemlidir. Bu çapanın içerdiği anahtar kelimeler için. Tipik olarak bu tür sıralamaya bağlantı sıralaması denir.
Mutlak bağlantı
Başka bir sitedeki bir belgeye işaret etmek için kullanılırlar (bağlantı haricidir).
Tek bir site içerisinde mutlak bağlantı yapmak da mümkündür ancak iç bağlantı oluşturmak için daha kısa görünen göreceli adresleri kullanmak daha doğrudur. Ancak çeşitli siteleri incelerken web yöneticilerinin büyük çoğunluğunun mutlak adreslerle dahili bağlantılar yaptığını fark ettim. Bunun bir avantajı vardır, çünkü sayfanız kopyalanırsa bu şekilde çalışan geri bağlantılar alırsınız.
Gördüğünüz gibi mutlak bağlantılarla her şey basittir. Göreceli olanlarla daha zordur, çünkü bunları oluştururken, href özelliğinin hangi değerinin belirtilmesi gerektiğini anlamanız gerekir, çünkü bu, belgelerin orijinal konumuna bağlıdır. Daha önce de söylediğim gibi, hiç kimse bununla gerçekten ilgilenmiyor ve sitedeki tüm bağlantıları mutlak hale getirmiyor. Ancak, bir web sitesi için göreceli bağlantıların nasıl doğru bir şekilde oluşturulacağı hakkında daha fazla bilgi edinmek istiyorsanız, ktonanovenkogo.ru blogunun yazarı Dmitry'nin bir makalesini önerebilirim. Bundan daha detaylı ve anlaşılır bir anlatım görmedim.
Örneğin, site köküne göre bir dosyaya giden bağlantının nasıl görüneceğini size göstereceğim (benzer bir mutlak bağlantıda üçüncü eğik çizginin solundaki her şeyi kestik):
Göreli bağlantı
Ana sayfaya
Bağlantı metni (çapa)
Açılır metnin renkleri ve tasarımı yalnızca ayarlara bağlıdır işletim sistemi ve tarayıcı.
Bir bağlantı yeni bir pencerede nasıl açılır?Varsayılan olarak, bir bağlantıya tıkladığınızda geçerli pencerede yeni bir belge açılacaktır. Ancak web sitelerine göz atarken bu benim için kişisel olarak uygun değil. Bir makaleyi okurken ve bir bağlantıyı takip ederken sayfanın yeni bir pencerede açılması benim için uygundur ve önceki makaleyi istediğim zaman okumaya devam edebilirim. Bağlantıyı yeni pencerede açmanın bir diğer nedeni de, başka birinin sitesine gittiğinizde okuyucunun geri dönmeme ihtimalinin yüksek olmasıdır. Özellikle birkaç geçiş yapıyorsa ve birkaç dakika önce nerede olduğunu hatırlamıyorsa.
Etiketin target özelliği, bağlantıyı yeni bir pencerede açmamıza yardımcı olacaktır. . Varsayılan olarak, genellikle belirtilmeyen _self değerine sahiptir. Belgeyi yeni bir pencerede açmak için hedef özelliğinin değerini _blank olarak değiştirin:
| 1 | Yeni Pencere |
Yeni Pencere
Bağlantıların geçerli pencerede açıldığı başka birinin sitesini ziyaret ettiğinizde, bunları yeni bir pencerede açmak isterseniz ne yapmalısınız? Sadece bir düğmeyle değil, fare tekerleğiyle üzerlerine tıklamanız gerekiyor. Bu durumda yeni sayfa yeni bir pencerede açılır.
Bir e-postaya (e-posta adresi) bağlantı nasıl yapılır?Bu bağlantıya tıklamak, çalışmak için programı açacaktır. e-mail ile, varsayılan olarak kurulur ve burada "Kime" alanı zaten doldurulmuştur. Mektubun konusunun otomatik olarak doldurulması için şu türden bir e-postaya bağlantı vermeniz gerekir:
Dmitry KtoNaNovenkogo, html bağlantılarını kullanmadan bir web sayfasının metnine yer imleri yerleştirmenin başka bir yolunu öneriyor. Bunu yapmak için, sayfada bulunan herhangi bir HTML etiketinden bir yer imi oluştururuz ve ona evrensel kimlik niteliğini atarız. Örneğin, bir h3 başlık etiketine yer işareti koyalım:
Başlık metni
Bağlantı adının ilk karakteri olarak id niteliğine bir Latin harfi eklemek önemlidir, ardından izin verilen diğer karakterleri kullanabilirsiniz.
Mesela “ “ başlığına dönüp devam edelim.
Hash linkleri yalnızca bir sayfada değil, sitede başka bir sayfaya gitmek için de istediğiniz konuma gitmek için kullanabilirsiniz. Bunu yapmak için html çapasını sağ sayfada doğru yere yerleştiriyoruz ve hash bağlantısının kendisinde bu sayfanın adresini hash sembolünden önce yazıyoruz. Örneğin:
Metni html bağlantı yer imine bağlayın
HTML'deki köprülerin türleri ve renkleri.- Ziyaret edilmemiş bir bağlantı mavidir ve altı çizilidir.
- Etkin bağlantı - bağlantıya fareyle tıklanması ile yeni sayfanın yüklenmesi arasındaki süre boyunca kırmızıya döner. Kısa bir süre için bu durumda olduğu açıktır.
- Ziyaret edilen bağlantı – tıklandıktan sonra rengi mora döner.
Bir etiketi ve onun aşağıdaki niteliklerini kullanarak bir HTML belgesindeki köprülerin rengini değiştirebilirsiniz:
- Bağlantı – ziyaret edilmeyen bağlantıların rengi.
- Alink – etkin bağlantının rengi.
- Vlink – ziyaret edilen bağlantıların rengi.
Yukarıdaki özelliklerin tümü birleştirilebilir:
| 1 |
Umarım artık bir HTML sayfasında ve bir e-postada nasıl köprü oluşturulacağını, bir resmin nasıl bağlantı oluşturulacağını, metin bağlantılarının, hash bağlantılarının ve html bağlantılarının ne olduğunu, html etiketlerinin ve bağlantı niteliklerinin ne olduğunu anlamışsınızdır. Elimden geldiğince HTML'deki bağlantıların ne olduğunu ve ne olduğunu ayrıntılı olarak anlatmaya çalıştım. Metne köprü eklemenin yalnızca HTML modunda yapıldığını hatırlatmama izin verin.
Daha önce hiç bu kadar uzun, 10.000 karakterden fazla yazı yazmamıştım. Ancak bu, devam edecek olan bağlantılar konusunun sonu değil.
Bu makale sizin için yararlı olduysa, lütfen aşağıdaki sosyal medya butonlarına tıklayın. Sayfalarda tekrar görüşmek üzere!
Herkese iyi günler sevgili dostlarım ve okurlarım. Umarım yarışmama katılmaya karar vermişsinizdir ve şimdiden blog yazma yolculuğunuz hakkında yazmaya başlamışsınızdır. Peki, html dili çalışmamıza devam etmek istiyorum ve bugün size en önemli bileşenlerden biri olan hiperlinklerden bahsetmek istiyorum.
Evet, bu tür köprüler olmasaydı İnternet bu kadar kullanışlı olmazdı. Hayır, yalan söylüyorum. Gezinmek hiç de kolay olmayacaktı. İnterneti onlarsız hayal edebiliyor musunuz? Ben şahsen istemiyorum.
Ve bugün html'ye nasıl köprü ekleyeceğimizi öğreneceğiz. Ama önce size şunu sormak istiyorum: Köprünün ne olduğunu ve normal bağlantıdan ne kadar farklı olduğunu biliyor musunuz? Burada her şey aslında basit: Bağlantı, bir belgeye atıfta bulunan basit bir bilgi parçasıdır. Aynı zamanda bu metne tıklayamazsınız (hiçbir şey olmayacak), ancak bilgiyi nerede arayacağınızı biliyorsunuz.
Örnek: Photoshop'ta saçı nasıl vurgulayacağınızı //site/adobe-photoshop/kak-vydelit-volosy/ adresinde bulabilirsiniz.
Köprü aynı metindir, yalnızca özü bu metne tıklayıp istediğiniz sayfaya, siteye veya başka herhangi bir nesneye ulaşabilmenizdir. Üstelik metnin kendisi herhangi bir şey olabilir, adres ise içeride ayrı ayrı yazılır ve tamamen farklı olabilir. Ancak öyle olsa bile, günlük konuşmada bunlara hala basit bağlantılar deniyor. İşte bir köprü örneği:
Derslerimden birinde Photoshop'ta saçın nasıl düzgün şekilde vurgulanacağını okuyabilirsiniz.
Her neyse. İyi teori. Şimdi uygulamaya geçelim ve tüm bu konulardan kimlerin sorumlu olduğunu görelim.
Eşleştirilmiş etiket köprüden sorumludur ancak tek başına hiçbir şeyi temsil etmez. Her zaman bir nitelikle birlikte gider. Ve bu durumda sürekli olarak aynı href'i yazmamız gerekiyor. Özellik değerinde, istenen kaynağın bağlantısını koyarız. Ve içeriğin kendisinde, tıklanabilir hale gelmesi gereken metnin kendisini yazıyoruz (tıklandığında çalışır). Örneğe bakın, sanırım her şeyi anlayacaksınız.
Yandex'in arama motoru
Anlayacağınız bu örnekte "Yandex arama motoru" yazısına tıkladığınızda kişinin href özelliğinin değerinde yazılan adrese yönlendirileceğini yazdım.
Sanırım birçoğunuz iç ve dış bağlantıların olduğunu biliyorsunuz. Dahili bağlantılar tek bir dizinde, yani sitede gerçekleştirilir ve harici bağlantılar bazı üçüncü taraf kaynaklara yol açar. Şimdi size her ikisini de nasıl yapacağınızı göstereceğim.
Dahili geçişler Dosya aynı klasörde
Ancak böyle bir geçiş, bağlandığınız dosyanın, bağlantıyı yerleştirdiğiniz dosyayla aynı klasörde bulunması koşuluyla işe yarayacaktır. Diğer seçeneklerde her şey biraz farklıdır.
Şimdi ne yaptık? Ve şunu yaptık: Fotoğrafın yolu, pushkin.html dosyasıyla aynı klasörde bulunan ayrı bir img klasöründe bulunduğundan, nitelik değerine önce klasörün adını yazmamız gerekir ve daha sonra eğik çizgi (/) ile belgenin tam adını (bizim durumumuzda fotoğraflarda) belirtin.
Şimdi pushkin.html dosyasını tarayıcınıza kaydedin ve çalıştırın. “Fotoğraf” kelimesinin mavi renkle vurgulandığını ve tıklanabilir hale geldiğini göreceksiniz, bu da bu bağlantıya tıkladığımızda img klasöründe bulunan fofo.jpg dosyasına yönlendirileceğimiz anlamına gelir.
Nasıl? Temiz? Bir şey olursa sormaya çekinmeyin.
Dış geçişlerVe elbette, tıkladıktan sonra tamamen farklı bir siteye yönlendirileceğimiz harici bağlantılardan bahsetmeden geçemeyiz. Ancak burada karmaşık bir şey yok. Bütün mesele sitenin veya web sayfasının tam adresini href değerine koymanızdır. Yukarıda Yandex ile bir örnek gösterdim. Ama işte başka bir örnek:
Sosyal projelerin ustası olmak için çalışacağım.Burada belirli bir sitenin belirli bir sayfasına ulaşıyoruz.
Varsayılan olarak, bir bağlantıya tıkladığınızda belge sayfanızla aynı pencerede açılır; sayfanız kapanacak. Ve bu iyi değil. Özellikle tanıtılan içerik projeleri veya bloglar için, bir bağlantıya tıkladığınızda sayfanızı kapatmadan belgenin yeni bir pencere veya sekmede açılması önerilir.
“_blank” değerine sahip olan target özelliği bu konuda bize yardımcı olacaktır. Burada karmaşık bir şey yok. Bunu açılış etiketinin içine eklemeniz yeterli olacaktır. href nitelik değerinden sonra. Bu alıntıyı, pushkin.html sayfasına bağlantı yaptığımız lukorye.html dosyasından alalım, ancak şimdi bu özelliği yazacağız. Şunun gibi görünmeli:
Ruslan ve Lyudmila şiirinden (Yazar - A.S. Puşkin)
Burada her şey açık. Artık içeriğe tıkladığınızda istediğiniz sayfa yeni bir pencerede açılacaktır. Bu çok gerekli çünkü eğer kayıt etmezseniz kullanıcı sayfanızdan ayrılacaktır. Ve böylece, her durumda, yalnızca özel olarak kapatmazsa, üzerinde kalacaktır. Her şeyi kendiniz yapmaya çalışın, her şeyi kendi ellerinizle güzelleştirin. Kopyalayıp yapıştırmaya gerek yok.
Bir şekilde böyle. Görünüşe göre size en önemli şeyleri anlattım, ancak bu yönde ilerlemek ve profesyonel web siteleri, bloglar ve hatta çevrimiçi mağazalar oluşturmak için HTML ve CSS öğrenmek istiyorsanız, bu konuyla ilgili mükemmel bir video kursu izlediğinizden emin olun. Dersler gerçekten mükemmel ve web sitesi oluşturma konusunda hala çok az bilgisi olan veya hiç aşina olmayan kişiler için gerçekten anlatılıyor.
Bu, bugünkü dersimizin sonu. Umarım yazımı beğenmişsinizdir ve düzenli okuyucum olursanız çok mutlu olursunuz. İlginç hiçbir şeyi kaçırmamak için blog güncellemelerime abone olmayı unutmayın. Peki, tüm çabalarınızda başarılar dilerim. Güle güle!
Saygılarımla, Dmitry Kostin.
