Bağlantılar iki kategoriye ayrılabilir:
dış kaynaklara bağlantılar— bir etiket kullanılarak oluşturulur ve tarayıcı tarafından işlendiğinde geçerli belgenin yeteneklerini genişletmek için kullanılır;
köprüler— kullanıcının ziyaret edebileceği veya indirebileceği diğer kaynaklara bağlantılar.
Bir web sitesinde köprüler nasıl oluşturulur?
1. Bağlantı yapısı
Köprüler eşleştirilmiş bir etiket kullanılarak oluşturulur. Web sayfasında görüntülenecek metin etiketin içine yerleştirilir. Bağlantı metni tarayıcıda alt çizgiyle görüntülenir, yazı tipi rengi mavidir ve bağlantının üzerine geldiğinizde fare imlecinin görünümü değişir.
Gerekli etiket parametresi web sayfasının URL'sini belirten href özelliğidir.
bağlantı diziniBağlantı iki bölümden oluşur – işaretçi Ve adres kısmı. Bağlantı dizini kullanıcının görebildiği bir metin veya resim parçasıdır. Adres kısmı Bağlantı kullanıcıya görünmez; gitmeniz gereken kaynağın adresini temsil eder.
Bağlantının adres kısmı URl'den oluşur. URL'si(Tekdüzen Kaynak Bulucu) - tek tip kaynak adresi. Adres oluştururken kelimeleri ayırmak için alt çizgi yerine kısa çizgi kullanılması önerilir. İÇİNDE genel görünüm Aşağıdaki formata sahip URL:
Erişim yöntemi://sunucu adı:bağlantı noktası/yol
Erişim Yöntemi, veya protokol, farklı ağlardaki iş istasyonları arasında veri alışverişi yapar. En yaygın veri aktarım protokolleri:
file, bir dosyanın yerel diskten okunmasını sağlar:
Dosya:/gallery/pictures/summer.html
http, HTTP protokolünü kullanarak bir web sayfasına erişim sağlar:
http://site.ru/
https, şifreleme (genellikle SSL veya TLS) kullanan HTTP protokolünün özel bir uygulamasıdır
https://site.ru/
ftp, bir dosyayı almak için FTP sunucusuna bir istekte bulunur:
Ftp://pgu/directory/library
mailto belirtilen hedef ve ana bilgisayarla bir posta oturumu başlatır:
Posta adresi: [e-posta korumalı]
Sunucu adı ağdaki makinenin tam adını açıklar, örneğin site.ru. Sunucu adı belirtilmezse bağlantı yerel olarak kabul edilir; bağlantıyı içeren HTML belgesiyle aynı makinededir.
TCP bağlantı noktası numarası Web sunucusunun çalıştığı yer. Bu, yöntemin bir bağlantı noktası numarası gerektirmesi durumunda belirtilmesi gereken bir sayıdır (bireysel sunucuların kendilerine özgü bağlantı noktası numaraları olabilir). Hiçbir bağlantı noktası belirtilmezse varsayılan bağlantı noktası 80'dir. Standart bağlantı noktaları şunlardır:
21-FTP
23 - Telnet'te
70 - Sincap
80 - HTTP
Yol dosyanın bulunduğu klasörün adını içerir.
2. Mutlak ve göreceli yol
Bir bağlantı yalnızca bir dosya adını belirttiğinde tarayıcı, dosyanın köprüyü içeren belgeyle aynı klasörde olduğunu varsayar. Uygulamada web siteleri, yönetilmelerini kolaylaştırmak için ayrı klasörlere yerleştirilmiş yüzlerce belge içerir. Geçerli belgeyi içeren klasörün dışındaki bir dosyaya bağlantı oluşturmak için dosya konumunu veya yolunu belirtmeniz gerekir. HTML iki tür yolu destekler: mutlak ve göreceli.
Pirinç. 1. Örnek klasör yapısı 2.1. Mutlak yol
Mutlak yol gösterir kesin konum bilgisayardaki (sunucu) tüm klasör yapısındaki dosya. Dosyanın mutlak yolu, dosyaya üçüncü taraf kaynaklardan erişim sağlar ve aşağıdaki bileşenleri içerir:
1) protokol, örneğin http (isteğe bağlı);
2) etki alanı ( alan adı veya bilgisayarın IP adresi);
3) klasör (dosyanın yolunu gösteren klasörün adı);
4) dosya (dosya adı).
İki tür mutlak yol gösterimi vardır: protokol göstergesi olan ve olmayan:
Http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html
Dosya kök klasördeyse, dosyanın yolu aşağıdaki gibi olacaktır:
http://site.ru/index.html
Dosya adı yoksa, web sunucusu ayarlarında varsayılan olarak ayarlanan web sayfası (indeks dosyası adı verilen) yüklenecektir.
http://site.ru/
Genellikle indeks dosyası index.html adlı bir belgedir. Sondaki / işaretinin varlığı, erişimin klasöre gittiği anlamına gelir; orada değilse doğrudan dosyaya gider.
2.2. Göreli yol
Göreli yol belirtilen belgenin geçerli belgeye göre yolunu açıklar. Yol, bağlantının bulunduğu web sayfasının konumuna göre belirlenir. Göreli bağlantılar, aynı sitedeki diğer belgelere bağlantı oluştururken kullanılır. Tarayıcı bağlantıda http:// protokolünü bulamayınca belirtilen belgeyi aynı sunucuda arar.
Göreli yol aşağıdaki bileşenleri içerir:
1) klasör (dosyanın yolunu gösteren klasör adı);
2) dosya (dosya adı).
Göreli bağlantıların yolunda üç özel gösterim bulunur:
/ kök dizini işaret ediyor ve yolun buradan başlatılmasını söylüyor kök dizin belgeler ve sonraki klasöre gidin
./ geçerli klasörü işaret eder
../ bir klasör yukarı git (dizin)
Göreli yol ile mutlak yol arasındaki temel fark, göreli yolun kök klasörün ve üst klasörlerin adını içermemesidir, bu da adresi kısaltır ve bir etki alanından diğerine geçerseniz, bunu yapmanıza gerek kalmaz. yeni bir mutlak adres girin. Ancak üçüncü taraf bir kaynak, örneğin ilgili adreslere sahip resimlerinize bağlantı verirse, bunlar başka bir sitede görüntülenmeyecektir.
3. Çapalar
Çapalar veya dahili bağlantılar, geçerli web sayfasının farklı bölümlerine geçişler oluşturarak bölümler arasında hızlı bir şekilde geçiş yapmanızı sağlar. Sayfada çok fazla metin olduğunda bu çok kullanışlı oluyor. Etiket kullanılarak dahili bağlantılar da oluşturulur href özelliğinin işaretçinin adını içermesi arasındaki farkla - sözde çapa, URL'yi değil. İşaretçi adının önünde her zaman # işareti bulunur.
En az bir köprü (veya yalnızca bir bağlantı) olmadan hiçbir HTML sayfasının var olamayacağına inanıyorum. Bağlantılar diğer sayfalara veya sitelere olabileceği gibi dosyalara, resimlere vb. de olabilir.
Bağlantılar harici ve dahili, metin ve grafik olabilir. Dış bağlantılar diğer sitelere veya bu sitelerdeki nesnelere atıfta bulunurken, iç bağlantılar ise tam tersine sitenizin farklı bölümlerine atıfta bulunur. Metin bağlantısı, tıklandığında sizi başka bir nesneye götüren veya onu açan metindir; grafik bağlantısı ise başka bir sayfaya, siteye veya örneğin resme gitmeye de hizmet eden bir nesnedir (genellikle bir resim). HTML'deki bağlantılar bir etiket (İngilizce çapa - çapadan) kullanılarak oluşturulur. Daha sonra size bağlantılar hakkında daha fazla bilgi vereceğim.
Etiketin önemli ve ana bir href özelliği vardır. Değeri, bağlantımızın URL biçiminde başvurduğu nesnenin veya sitenin yoludur. Bağlantı (bağlantı gövdesi) metin (metin bağlantısı) veya resim (grafik bağlantısı) olabilir. Grafik bağlantısı oluşturmanız gerekiyorsa etiketler arasında IMG etiketini çapa olarak kullanmanız gerekir. Aşağıda bir bağlantı için basit bir örnek HTML kodu verilmiştir:
bağlantı metni (çapa)
Daha iyi anlamanız için size bir örnek daha vereceğim. Web sitemi temel olarak kullanacağım:
Tarayıcıdaki html sayfasında şöyle görünecektir:
Bağlantı metninin rengi BODY etiketindeki niteliklere göre ayarlanır. Basitçe açıklamak gerekirse, bağlantılar sayfadaki metinle aynı değişiklik niteliklerine tabidir. Buna kalın ve italik yazılar, başlık kullanımı vb. dahildir.
Html sayfasında aşağıdakiler görünecektir:
Sonucu çerçeve olmadan alıyoruz:
Ana sayfa 1seo
Fark ettiğiniz gibi başka bir sayfaya geçiş aynı pencerede gerçekleştiriliyor. Bağlantının başka bir pencerede veya ana pencerede açılmasını istiyorsanız (varsayılan olarak aynı pencerededir), A etiketinin aşağıdaki hedef özelliğini kullanabilirsiniz:
- _blank — sayfayı yeni bir pencerede açar;
- _parent — ana pencereye bir bağlantı yükler;
- _self - varsayılan. Bağlantıyı aynı pencerede açar.
1seo web sitesinin ana sayfası
Bir bağlantı için ipucu oluşturmak amacıyla bir başlık özelliği de vardır:
1seo web sitesinin ana sayfası
Bu arada, URL'de posta kutunuzu belirtirseniz ve mailto: protokolünü belirtirseniz, bağlantınıza tıkladığınızda, adresinizin Kime alanına zaten girilmiş olacağı posta programı açılacaktır. posta kutusu. Örneği kullanırsak, HTML kodu şöyle olacaktır:
Bana bir mesaj yaz
HTML'de link oluşturmak için ihtiyacınız olan temel şeyleri yazmaya çalıştım. Bu arada, HTML Eğitiminin önceki makalelerini okuduysanız, ilk tam teşekküllü HTML sayfanızı oluşturmak için gereken minimum bilgileri zaten bildiğinizi rahatlıkla söyleyebilirim. Bir sayfa oluşturduktan sonra onu yayınlayabilirsiniz. ücretsiz barındırma ve emeğinizin meyvelerini görün. İnanın bana, bunu yaptıktan sonra daha da büyük bir yaratıcı enerji dalgasına sahip olacaksınız. Şimdi size HTML'de nasıl tablo oluşturulacağını anlatacağım. Bu da çok önemli bilgi, onu tamamen özümsemeye ve sindirmeye çalışın.
Yayın tarihi: 15 Mayıs 2012Bir HTML belgesinin ana özelliği, içinde bulunmasıdır. köprüler(veya sadece bağlantılar) diğer belgelere, sitelere, dosyalara, resimlere vb. İnternet'i bu kadar popüler ve kullanımı kolay kılan şey, sayfalara dışarıdaki nesnelere bağlantılar ekleme yeteneğiydi. Bu nedenle web sitenizi oluştururken her zaman bağlantıların “sihrini” unutmayın.
Bu derste bunun hakkında konuşacağız bağlantı nasıl oluşturulur siteye, ona ayrı sayfa veya dosya. 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ı kurma 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ı, web sitesine 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 haricidir orijinal sayfa 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 adres başvurulacak nesne. Şimdi dersin ana kısmına geçelim.
§ 2. Dış bağlantıların oluşturulması
Bağlantılar birbirinden farklı harici Ve dahili, ayrıca metin Ve grafik. Dış bağlantılar html sayfasının dışına çıkar, iç bağlantılar ise farklı bölümlere yönlendirir aynısı sayfalar. 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 tag özelliğini kullanın - href. Bu özelliğin değeri URL'si site, sayfa veya dosya (bunun hakkında yukarıda konuştuk). Etiketlerin arasında bağlantının görünen 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 görüntü(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, o zaman özellik sınır etiket IMG 0 değerini atamanız gerekir:
kenarlık = "0">
Ana sayfa
§ 3. Dahili bağlantılar
Dahili bağlantılar, çok fazla içeriğe sahip sayfalarda rahatça gezinmek için kullanılır. “Ders İçeriğini” 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 özellik değerinde href bağlantının “çapası” belirtilir. "Çapa" özellik tarafından oluşturulur isim:
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ı öneririm. 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 söylediğim gibi, özellikte href Dahili bir bağlantıda, adres yerine istenen “çapanın” adı zorunlu karma sembolüyle belirtilir ( # ) onun önünde. Bir örnekle bakalım.
Adıyla bir "çapa" oluşturdum zagolovok ve bu dersin başlığının yanındaki sayfa koduna yerleştirdim (“HTML'de Köprüler”). Bağlantı kodu aşağıdaki gibidir:
name = "zagolovok">
href="#zagolovok">Başlığa git
Ve tarayıcıda şöyle:
Fark 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, diyelim ki bir şey hakkında uzun bir makale içeren bir sayfa oluşturdunuz (veya bunu sayfada yayınladınız) büyük sayı fotoğraflar) ve dahili bağlantılarla işaretlendi. 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 referanslar
Ana sayfa
Ancak göreceli bağlantılarda durum biraz daha karmaşıktır. Bu tür bağlantılarda adres de belirtilir nispeten sitenin kök klasörü (içinde ana sayfa) veya orijinal sayfaya göre. 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.
Bunu bir kenara bırakalım, sayfaya bağlantı vermemiz gerekiyor clienty.html hangi yalan tek bir klasörde sitenin ana sayfası ile. Daha sonra ilgili bağlantı kodu şöyle görünecektir:
/klienty.html">İstemciler
Şimdi ana sayfayla aynı klasörde olduğunu varsayalım. zakazy klasörü ve zaten içinde klienty.html sayfasında yatıyor Daha sonra ilgili bağlantının kodu şöyle görünecektir:
/zakazy/klienty.html">Müşteriler
Şimdi köprüler oluşturmaya bakalım orijinal sayfaya göre. Diyelim ki bir sayfamız var fiyat.html (ana sayfa) ve buradan sayfaya bağlantı vermeniz gerekir clienty.html Aşağıdaki tipik seçenekler vardır:
1. Price.html ve clienty.html sayfaları bulunur tek bir klasörde.
klienty.html">Müşteriler
2. sitenin kök klasöründe, sayfa fiyatı.html zakazy klasöründe bir seviye daha yüksek).
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ü bulunur sitenin kök klasöründe, mebel klasörü zakazy klasöründe, sayfa fiyatı.html mebel klasöründe(yani klienty.html sayfası, orijinal Price.html sayfasına göre yatıyor iki seviye daha yüksek).
../../klienty.html">Müşteriler
Yani her seviye iki nokta ve bir eğik çizgi ile gösterilir” / ».
4. sitenin kök klasöründe, clienty.html sayfası zakazy klasöründe(yani artık orijinal Price.html sayfasına göre klienty.html sayfası yatıyor bir seviye daha düşük).
zakazy/klienty.html">Müşteriler
Bu durumda noktalar ve eğik çizgiler kullanılmaz.
5. Price.html sayfası (orijinal sayfa) ve zakazy klasörü bulunur sitenin kök klasöründe, mebel klasörü zakazy klasöründe, clienty.html sayfası mebel klasöründe(yani klienty.html sayfası artık orijinal Price.html sayfasına göredir) iki seviye aşağıda yatıyor).
zakazy/mebel/klienty.html">Müşteriler
6. Sitenin kök klasöründe iki klasör var: zakazy ve oplata. Clienty.html sayfası zakazy klasöründe, orijinal sayfa fiyatı.html oplata klasöründedir(yani her iki sayfa da yalan söylüyor farklı klasörlerde bir seviye aşağı sitenin kök klasöründen).
../zakazy/klienty.html">Müşteriler
§ 5. E-postaya bağlantı
İçin e-postaya bağlantı oluşturmaözellik değerindeki URL yerine gerekli href adresi yaz e-posta protokolü belirten ( posta:). 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 da böyle.
Köprü tarayıcıya, HTML belgesinin içinde veya dışında hangi nesneye erişmesi gerektiğinin bir göstergesidir. Köprüleri kullanarak kullanıcılar bir sayfadan diğerine geçebilir, dosya indirebilir vb. Bir metin parçası veya resim köprü olarak tasarlanabilir ( grafik dosyası). Bir web sayfası tarayıcı penceresinde görüntülendiğinde, metin bağlantısı genellikle mavi renkle vurgulanır ve altı çizilir. Ancak bu her zaman böyle değildir. Bir bağlantının gösterdiği konuma gitmek için kullanıcının yalnızca metnine tıklaması yeterlidir.
Köprü oluşturmak için etiketleri kullanmanız gerekir Ve, etiketi için tanımlama bağlanmak HREF. Değeri, bağlantının işaret ettiği URL olmalıdır. Bağlantı metni etiketlerin arasına yerleştirilir Ve.
Bağlantının işaret ettiği web sayfası başka bir sitede yer alıyorsa özelliğin değeri HREF protokol adını içeren tam URL olmalıdır; bu tür bağlantılara dış bağlantılar denir. Köprü aynı sitenin başka bir sayfasına işaret ediyorsa, bir belgeyi aramak için yalnızca göreceli bir yol belirtmek yeterlidir; böyle bir bağlantıya dahili bağlantı denir.
Bir bağlantı etiketi ilk önce buraya gömülüyse, bir köprü sayfa içindeki belirli bir konuma işaret edebilir. Etiketler aynı zamanda bir çapayı tanımlamak için de kullanılır Ve, ancak bir nitelik yerine HREF niteliği ayarla İSİM değeri çapanın adı olmalıdır. Harf ve rakamlardan oluşabilir ancak boşluk karakterleri içermemelidir. Bir sayfada birden fazla etiket varsa, bunların hepsinin farklı adları olmalıdır.
Yüklü bağlantıya bir bağlantı oluşturmak için etikette ihtiyacınız var adını URL'nin sonuna, belge adından sonra, ile ayırarak yazın # . Sembol # arkasından dosya adının değil, etiket adının geleceği anlamına gelir.
Bağlantı metni
Özellikte ise HREFönünde mailto kelimesi bulunan bir e-posta adresi belirtin: bunun ardından böyle bir bağlantıyı seçtikten sonra alanın neresinde olursa olsun bir mesaj gönderebilirsiniz "Kime" bu adres kaydedilecektir.
Aşağıdaki örnekte çeşitli köprü türlerinin kullanımı anlatılmaktadır.
Köprüler ve çapalar kullanan HTML belgesi:
Ameliyathaneye yönelik standart programların yeni versiyonları Windows sistemleri ve sürücüler şirketin web sitesinde de bulunabilir Microsoft.
Artık sitenin ana sayfasına gidebilirsiniz.
Bu sayfanın sonunda benimle nasıl iletişime geçeceğinizi öğrenebilirsiniz.
bu metin belgesinde.
Tarayıcı tarafından oynatıldıktan sonra HTML belgesi şu şekilde görünecektir:
Standart programların yeni versiyonları işletim sistemi Windows ve sürücüler Microsoft web sitesinde bulunabilir.
Bu metin belgesinde yayınlanan materyalleri kullanabilirsiniz.
Bu örnekte, "Microsoft" kelimesi harici köprü etiketinde yer almaktadır ve metin "sitenin ana sayfası"- dahili bağlantı etiketinde. Metin "bu sayfanın sonunda" bağlantı bağlantı etiketine yerleştirilir ve "bu metin belgesinde"- bir özniteliğe sahip bir köprü etiketinde HREF bir web sayfasıyla değil, bir bağlantı belirttiğimiz metin belgesi geçerli HTML belgesiyle aynı klasöre kaydedilir. Metin " [e-posta korumalı] ", bağlantı etiketini açıklayan etikette ve özellikte bulunur HREF e-posta adresi sağlandı.
Sayfanın ziyaretçisi bir Microsoft harici bağlantısı kullanıyorsa sayfa şu adreste açılacaktır: http://www.microsoft.com/. Bir köprüye tıkladıktan sonra "sitenin ana sayfası" Sitenin ana sayfası açılacaktır. Bir metin belgesindeki dahili bir bağlantıya tıklamak, metin belgesini içeren bir pencere açılacaktır metin.doc içinde bulunan geçerli klasör. Bu sayfanın sonundaki bağlantı bağlantısını kullanırsanız mevcut sayfanın görüntüsü, etiket metni " [e-posta korumalı] " çapanın ilişkili olduğu belgenin ekranda görünen kısmına yerleştirilecektir.
Metni yerleştirin " [e-posta korumalı] ", kullanıcının bilgisayarda yapılandırılan e-postayı kullanarak özellikte belirtilen e-postaya bir mektup gönderebileceği bir köprüdür HREF adres - [e-posta korumalı] .
Metin köprüleri oluşturmanın başka bir örneğine bakalım. Şirketin iki çalışma alanını tanımlayan iki HTML belgesinin belirli bir klasöre kaydedildiğini varsayalım: 1.html Ve 2.html.
Her biri şirketin çalışma alanlarından birini gösteren bir köprü listesi oluşturalım:
Ürünlerimiz
Müşterilerimiz
Sonuç:
Ürünlerimiz
Müşterilerimiz
Bu örnekte köprü etiketleri birinci düzey başlık etiketlerinin içinde yer almaktadır. Hyperlink metinleri ayrı satırlarda yer alacak ve birinci düzey başlıklar halinde tasarlanacaktır.
Varsayılan olarak metin köprüleri mavi renkte ve altı çizili olarak görüntülenir; daha önce kullanılmışlarsa koyu kırmızı renkte görüntülenir. Bu renkleri değiştirmek için etikete karşılık gelen özellikleri ekleyin : . Bu, sayfa ilk yüklendikten sonra tüm köprülerin mor olacağı ve ziyaretçi bunlardan birini kullandığında metin renginin sarıya döneceği anlamına gelir. Bu, sayfada çok sayıda bağlantı olduğunda ve ziyaretçi bunları tek tek görüntülemek istediğinde kullanışlıdır: daha sonra ziyaret edilen hiper bağlantıların yerine farklı bir renk koymak, bu tür görüntülemenin sistemleştirilmesine olanak tanır.
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: Hyperlink'in 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/ adresinden öğrenebilirsiniz.
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 da, konuşma dilinde bunlara hala basitçe 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.
Oh iyi. İ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 üzere bu örnekte bir yazıya tıkladığınızda “ Arama motoru Yandex" yazıldığında kişi href özelliğinin değerinde yazılan adrese yönlendirilecektir.
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
Aynı klasördeki dosya
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.
Başka bir klasördeki dosya
- Pushkin.html dosyasını Notepad++ ile açın
- Şimdi fotoğraf kelimesini bulun ve etiketlere sarın<bir href> .
- Şimdi dikkat! Öznitelik değerinde, düzenlenen dosyaya, yani pushkin.html'nin kendisine göre yolu belirtiriz. Sonunda böyle bir şey elde etmelisin:
Şimdi ne yaptık? Ve şunu yaptık: Fotoğrafçılığa giden yol, ayrı klasör Pushkin.html dosyasıyla aynı klasörde bulunan img dosyasında, daha sonra nitelik değerinde önce klasörün adını ve ardından eğik çizgi (/) aracılığıyla belgenin tam adını (içinde) yazmamız gerekir. bizim durumumuz, fotoğraflar).
Ş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.
Peki nasıl? Her şey açık mı? Bir şey olursa sormaya çekinmeyin.
Dış geçişler
Ve elbette belirtmeden geçemeyeceğiz dış bağlantılar, tıkladıktan sonra tamamen farklı bir siteye yönlendirileceğiz. 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.
Yeni bir pencerede açılır
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.
Peki, bunun gibi bir şey. Görünüşe göre size en önemli şeylerin hepsini 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, o zaman mutlaka göz atın mükemmel video kursu bu konu hakkında. Dersler gerçekten mükemmel ve gerçekten web sitesi oluşturma konusunda henüz çok az bilgisi olan veya aşina olmayan kişiler için öğretiliyor.
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 diliyorum. Güle güle!
Saygılarımla, Dmitry Kostin.