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 mevcut belgenin yeteneklerini geliştirmek 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 yapılır
1. Bağlantı yapısı
Köprüler kullanılarak oluşturulur eşleştirilmiş etiket. Etiketin içine web sayfasında görüntülenecek metin yerleştirilir. Bağlantı metni tarayıcıda altı çizili olarak 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.
Zorunlu etiket parametresi web sayfasının URL'sini belirten href özelliğidir.
bağlantı işaretçisiBağlantının iki bölümü vardır - Işaretçi Ve adres bölümü. bağlantı işaretçisi kullanıcı tarafından görülebilen bir metin parçasını veya bir resmi temsil eder. Adres bölümü bağlantı kullanıcı tarafından görülmez, gezinmek istediğiniz kaynağın adresini temsil eder.
Bağlantının adres kısmı URl'den oluşur. URL(Tekdüzen Kaynak Bulucu) - tek tip bir kaynak adresi. Kelimeleri ayırmak için adresler oluştururken alt çizgi yerine kısa çizgi kullanılması önerilir. Genel olarak, bir URl aşağıdaki biçime sahiptir:
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 yerel diskten bir dosya okur:
Dosya:/galeri/resimler/yaz.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, FTP sunucusuna bir dosya almak için istekte bulunur:
ftp://pgu/dizin/kütüphane
mailto, belirtilen hedef ve ana bilgisayarla bir posta oturumu başlatır:
Posta: [e-posta korumalı]
Sunucu adı ağdaki makinenin tam adını açıklar, örneğin site.ru . Sunucu adı belirtilmemişse, bağlantı yerel olarak kabul edilir, yani. bağlantıyı içeren HTML belgesiyle aynı makineye atıfta bulunur.
TCP bağlantı noktası numarası web sunucusunun çalıştığı yer. Yöntem bir bağlantı noktası numarası gerektiriyorsa belirtilecek numarayı temsil eder ( ayrı sunucular kendi ayırt edici bağlantı noktası numarasına sahip olabilir). Bağlantı noktası belirtilmemişse, varsayılan olarak bağlantı noktası 80 kullanılır.Standart bağlantı noktaları şunlardır:
21 - FTP
23 - telnet
70 - sincap
80 - HTTP
Yol dosyanın bulunduğu klasörün adını içerir.
2. Mutlak ve göreli yol
Bir bağlantıda yalnızca bir dosya adı belirtildiğinde, tarayıcı dosyanın köprüyü içeren belgeyle aynı klasörde olduğunu varsayar. Uygulamada, web siteleri, yönetilmesini kolaylaştırmak için ayrı klasörlere yerleştirilmiş yüzlerce belge içerir. Geçerli belgeyi içeren klasörün dışında bir dosyaya bağlantı oluşturmak için dosyanın konumunu veya yolunu belirtmelisiniz. HTML iki tür yolu destekler: mutlak ve göreli.
Pirinç. 1. Klasör yapısı örneği 2.1. Kesin yol
Kesin yol bilgisayardaki (sunucu) tüm klasör yapısı içinde dosyanın tam konumunu belirtir. 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 IP adresi);
3) klasör (dosyanın yolunu gösteren klasörün adı);
4) dosya (dosya adı).
İki tür mutlak yol kaydı vardır - protokollü ve protokolsüz:
http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html
Dosya kök klasörde bulunuyorsa, 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ı (sözde dizin dosyası) yüklenecektir.
http://site.ru/
Genellikle dizin dosyası, index.html adlı bir belgedir. Sondaki eğik çizginin / bulunması, adresin klasöre, yoksa doğrudan dosyaya gittiği anlamına gelir.
2.2. Göreceli yol
Göreceli yol geçerli belgeye göre belirtilen belgenin yolunu tanımlar. 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ılar oluştururken kullanılır. Tarayıcı bağlantıda http:// protokolünü bulamayınca aynı sunucu üzerinde belirtilen belgeyi arar.
Göreli bir yol aşağıdaki bileşenleri içerir:
1) klasör (dosyanın yolunu gösteren klasörün adı);
2) dosya (dosya adı).
Göreli bağlantıların yolunun üç özel gösterimi vardır:
/ kök dizini gösterir ve belge kök dizininden başlamanızı ve bir sonraki klasöre doğru ilerlemenizi söyler
./ geçerli klasöre 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 ve ana klasörlerin adını içermemesidir, bu da adresi kısaltır ve bir etki alanından diğerine geçiş durumunda, buna ihtiyacınız yoktur. yeni bir mutlak adres yazmak için. Ancak, örneğin, ilgili adreslere sahip resimlerinize üçüncü taraf bir kaynak bağlanırsa, bunlar başka bir sitede görüntülenmez.
3. Çapalar
çapalar, veya dahili bağlantılar, farklı bölümlere bağlantılar oluşturun mevcut web sayfası, bölümler arasında hızla hareket etmenizi sağlar. Bu, sayfada çok fazla metin olduğunda kullanışlıdır. Etiket kullanılarak dahili bağlantılar da oluşturulur href niteliğinin işaretçinin adını içermesi farkıyla - sözde Çapa, bir URL değil. Bir işaretçi adının önünde her zaman bir # 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 veya dosyalara, resimlere vb. olabilir.
Bağlantılar harici ve dahili, metinsel ve grafikseldir. Dış bağlantılar diğer sitelere veya nesnelerdeki nesnelere bağlantı, dahili olanlar 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 bir metindir ve grafik bağlantısı, başka bir sayfaya, siteye veya örneğin bir görüntü. HTML'deki bağlantılar bir etiket kullanılarak oluşturulur (İngilizce çapa - çapadan). Ardından, 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 bir URL biçiminde başvurduğu nesne veya sitenin yoludur. Bağlantı (bağlantı gövdesi) metin (metin bağlantısı) veya görüntü (grafik bağlantısı) olabilir. Bir grafik bağlantı oluşturmanız gerekiyorsa, etiketler arasında IMG etiketini bağlantı olarak kullanmanız gerekir. İşte basit bir HTML bağlantı örneği:
bağlantı metni (bağlantı)
Daha iyi anlaman için bir örnek daha vereyim. Web siteme dayanarak:
Tarayıcıdaki html sayfasında şöyle görünecektir:
Bağlantı metni rengi, BODY etiketindeki nitelikler tarafından belirlenir. Basitçe söylemek gerekirse, düzenleme için aynı nitelikler, sayfadaki metin için olduğu gibi bağlantılar için de uygundur. Bu, kalın ve italik olarak vurgulamak ve başlıklar vb. kullanmak içindir.
Html sayfasında aşağıdakiler görünecektir:
Sonucu çerçevesiz alıyoruz:
Ana sayfa 1seo
Fark ettiğiniz gibi, başka bir sayfaya geçiş aynı pencerede gerçekleştirilir. Bağlantının başka bir pencerede veya üst öğede açılmasını istiyorsanız (varsayılan olarak aynı pencerededir), aşağıdakileri kullanabilirsiniz. hedef özellik Etiket A:
- _blank - sayfayı yeni bir pencerede açar;
- _parent - bağlantıyı üst pencereye yükler;
- _self varsayılandır. Bağlantıyı aynı pencerede açar.
1seo web sitesinin ana sayfası
Bağlantı için bir araç ipucu oluşturmak için 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 açılacaktır. posta programı, adresinizin Kime alanına girileceği yer posta kutusu. Örneğin, HTML kodu şöyle görünür:
Bana mesaj gönder
Link oluşturmak için ihtiyacınız olan temel şeyleri HTML olarak yazmaya çalıştım. Bu arada, HTML Eğitimi'nin önceki makalelerini okuduysanız, güvenle söyleyebilirim ki, ilk tam teşekküllü html sayfanızı oluşturmak için zaten minimum düzeyde bilgi sahibisiniz. Bir sayfa oluşturduktan sonra ücretsiz bir hostinge koyabilir ve emeğinizin meyvelerini görebilirsiniz. İ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şturacağınızı anlatacağım. Bu da çok önemli bilgi Tamamen emmeye ve sindirmeye çalışın.
Yayın tarihi: 15 Mayıs 2012Köprüler, ağdaki belgeleri birbirine bağlamak için icat edildi ve siteniz bir sayfadan değil, birkaç sayfadan oluşuyorsa, bunları yalnızca köprüler oluşturarak birbirine bağlayabilirsiniz. Doğrudan nasıl göründüğüne dair bir örneğe bakalım.
Basit bir köprü oluşturun
Başka bir sayfaya git
Yeni bir sayfada bir bağlantı açma
Yararlı bulabileceğiniz başka bir ilginç özellik daha var:
Başka bir sayfaya git
_blank değerine sahip hedef özniteliği, bağlantıyı yeni bir pencerede açar, bu genellikle kişinin sayfanızı kaybetmesini istemiyorsanız ve aynı zamanda ihtiyaç duyduğu bilgileri yalnızca yeni bir sekmede veya pencerede almasını istiyorsanız kullanılır.
Resim bağlantıları
Tarayıcıda sonuç:
Esasen, burada her şey basit, resim etiketini açılış ve kapanış hiperlink etiketi arasına koyuyorum , ancak yine, sadece iki resim eklemedim, img sınıfını, görüntünün etrafındaki çerçeveyi sıfırladığım birine atadım, çünkü bir köprü haline geldiğinde görünür, ancak tüm tarayıcılarda değil, örneğin IE bakın, ancak Google Chrome'da değil.
Bağlantılarda altını çizme
Başka bir sayfaya git
Başka bir sayfaya git
Anlaşılır olması için, bu sorunu çözmek için iki seçenek verdim, onu bir sınıf seçiciye atadım ve bu sınıfı reçete ederek belirli yerlerde gereksiz alt çizgileri kaldıracaksınız. Sorunun ikinci çözümü, etiketteki tüm bağlantılardan alt çizgiyi kaldırmaktır.<а>, ki bu elbette nadiren bir ihtiyaca neden olur, ancak yine de bilgi gereksiz değildir.
Bir belge içindeki bağlantılar
Bir belgenin oldukça uzun olması ve sayfanın başında bu sayfanın alt bölümlerine bağlantılar içeren küçük bir menü olması nadir değildir. Bu bağlantılara belge içindeki bağlantılar denir ve tüm bunlar oldukça basit bir şekilde uygulanır. Başlangıç olarak, belgeye çapalar yerleştirilir, bunlar işaretlerdir, bir dahili bağlantıya tıklandığında hareket edilmesi gereken belgeye yerleştirilirler, kural olarak bunlar bölüm başlıklarıdır, etiket şöyle görünür:
Ve köprüler hakkında bilmemiz gereken son şey, elektronik posta kutularına bağlantılar, çok basit bir şekilde uygulanır, sadece bir mailto: href niteliğine ve posta kutusu adresine bir giriş ekleyin:
benim posta< /a>
Bu, “Html'de köprü oluşturma” dersini sonlandırıyor, fark etmiş olabileceğiniz gibi, burada CSS olmadan yapmadık, genel olarak malzeme oldukça basit, sanırım her şey sizin için basit ve net olacak, sorular yazın.
Yayın tarihi: 2014-04-23
Bir HTML belgesinde bağlantılar nasıl oluşturulur
(Bu sayfanın altında daha fazla örnek bulacaksınız)
HTML Köprüleri (Bağlantılar)
Etiket iki şekilde kullanılabilir:
- Başka bir belgeye bağlantı oluşturmak için - href niteliğini kullanarak
- Bir belgenin içine yer işareti koymak için - name niteliğini kullanarak
HTML Sözdizimi Bağlantıları
Örnek vermek
| Siteyi ziyaret et |
tarayıcı tarafından şu şekilde görüntülenecektir:
HTML Bağlantıları - Hedef Özellik
Hedef özniteliği (hedef), bağlantılı (bağlantının başvurduğu) belgenin nerede açılacağını belirtir.
Aşağıdaki örnek, bağlantılı bir belgeyi yeni bir tarayıcı penceresinde veya sekmesinde açacaktır:
HTML Bağlantıları - Ad Özelliği
name niteliği, bir HTML belgesi içinde bir yer imi ("bağlantı" / "bağlantı") oluşturmak için kullanılır.
Yorum:
Öngörülebilir gelecekte, HTML5 standardı, bir bağlantının adını belirtmek için name niteliği yerine id niteliğinin kullanılmasını önerir.
id niteliğini kullanmak aslında tüm modern tarayıcılarda HTML4'te de çalışır.
Yer imleri herhangi bir özel şekilde görüntülenmez. Okuyucu tarafından görülmezler.
Yorum: Alt dizin bağlantılarına her zaman sonuna eğik çizgi ekleyin. Bunun gibi bir bağlantı oluşturursanız: href="http://site/html", ardından sunucuya iki istek oluşturulur, önce sunucu adrese eğik çizgi ekler ve ardından yeni bir istek oluşturur: href="http ://site/html/" .
Tavsiye: Adlandırılmış bağlantılar genellikle büyük bir belgenin başlangıcında bir "içindekiler tablosu" oluşturmak için kullanılır. Belgedeki her bölüme adlandırılmış bir bağlantı atanır ve bu adlandırılmış bağlantıların her birine bağlantılar belgenin başına eklenir.
Tavsiye: Tarayıcı belirtilen adlandırılmış bağlantıyı bulamazsa, belgenin başına gider. Hiçbir hata oluşmaz.
Örnek No. 1'i kullanarak köprülerin kullanımını düşünün.
Spesifikasyonu görüntüle HTML5 burada yapabilirsiniz.
Sayfa yeni bir pencerede açılacaktır.
Ve element ve nitelik tablolarını buradan indirebilirsiniz.
Örnek 1. Köprüleri kullanma
Bir sayfada bağlantı oluşturmak için köprüleri kullanma
"a" öğesi, bir sayfada gezinmek için bir köprü olarak da kullanılabilir. Bunu yapmak için, belgede doğru yerde oluşturmanız gerekir. Çapa(İngilizceden. Çapa), yani işaretleyin ve köprüde hedef olarak belirtin. Açılış etiketinde özniteliğin belirtildiği boş bir "a" öğesi kullanılarak bir bağlantı oluşturulur. Ayrıca, gelecekte bir dahili köprünün yol açacağı bir bağlantı olarak gerekli işaretleme öğesini kullanabilirsiniz. Bunu yapmak için, içindeki özelliği belirtmeniz yeterlidir. Daha sonra, köprünün href niteliği, "#" kare işaretini ve bunun değeri olarak çapa niteliğinin değerini belirtir. Daha açık hale getirmek için, örnek 2'ye bakalım.
Ben ilk paragrafım.
Özellik tablosunu görüntüle HTML5 olabilmek
resmi sitesinde burada.
Sayfa yeni bir pencerede açılacak ve
nitelik tablosuna kaydırılır.
İlk paragrafa buradan gidebilirsiniz.
Örnek #2. Dahili köprüleri kullanma
Örneğin ikinci paragrafında href niteliğinin değeri olarak belirtilen mutlak adreste bir çapanın varlığına dikkat edin. Böyle bir köprü kullanırken, tarayıcı önce belirtilen adrese gidecek ve ardından sayfayı belirtilen bağlantının konumuna kaydıracaktır. Sayfada çapa yoksa, sayfa en baştan gösterilecektir.
Göreli köprüler ve göreli adresleme oluşturma
Bu bölümü sonuçlandırmak için yapım ilkesini göz önünde bulundurun. göreceli adresler. Köprümüzün yerel sunucuda bulunan bir belgede olmasına izin verin. http://localhost/site/ doc_1/ doc_2/ ... /doc_n/web_page.html, burada doc_n, n'inci yuvalama düzeyinin klasörüdür. Bu durumda, köprülenmiş belgemizin bulunduğu doc_n klasörü, tüm adreslemelerin oluşturulduğu temel olarak otomatik olarak alınır. Böyle:
- Bağlantının, köprülü kaynak belgemizle aynı doc_n klasöründe bulunan bir new_page.html hedef belgesine işaret etmesini istiyorsanız, bağlantının href niteliğini hedef belgenin adına ayarlamanız yeterlidir: href="new_page.html ".
- Klasörde bulunan new_page.html hedef belgesine gitmek için http://localhost/site/ doc_1/ doc_2/ ... /doc_n/ doc_n_1/ ... doc_n_k/, bağlantının href niteliğinin değeri yalnızca doc_n içinde yuvalanmış klasörleri ve elbette hedef belgenin adını içermelidir: href="doc_n_1/ ... doc_n_k/new_page.html". Böylece, tarayıcıya, köprünün yazıldığı kaynak belgenin bulunduğu doc_n klasöründe bulunan doc_n_1 klasörüne, ardından doc_n_2 klasörüne gitmesi gerektiğini ve doc_n_k klasörüne gelene kadar böyle devam etmesi gerektiğini söylüyoruz. orada bulunan ve açması gereken hedef belge.
- Orijinalinden bir seviye daha yüksek bir klasöre ulaşmak için "../" özel karakter kombinasyonu kullanılır. N seviye yukarı çıkmak için "../" kombinasyonunu arka arkaya n kez yazmanız gerekir. Yani bizim durumumuzda, hedef belgeye giden bağlantıyı takip etmek http://localhost/site/ doc_1/ doc_2/ ... /doc_n-3/ new_page.html bağlantının href niteliği "../../../new_page.html" olmalıdır. Bu, tarayıcıya doc_n-1 klasörüne, ardından doc_n-2 ve doc_n-3 klasörüne gitmesini ve ardından orada new_page.html hedef belgesini açmasını söyler.
- Hedef belgeye erişmek için sadece birkaç seviye yukarı çıkmak değil, aynı zamanda oradaki bir klasöre (veya birkaç alt klasöre) gitmek gerekliyse, o zaman bağlantının href özniteliğinin değerinde, önce şunu belirtmeniz gerekir: ". ./" sembollerini kullanarak yukarı çıkmak için gerekli sayıda seviye ve ardından sonuçtaki klasörden hedef belgeye giden yolu ekleyin. Örneğin, hedef belge new_doc klasöründe bulunuyorsa ve bunun adres yolu şöyle görünüyorsa http://localhost/site/ doc_1/ doc_2/ ... /doc_n-3/new_doc/ new_page.html, o zaman bağlantının href özniteliği değere sahip olmalıdır "../../../new_doc/new_page.html". Onlar. tarayıcıya köprülü belgeyi içeren doc_n kaynak klasöründen üç seviye yukarı çıkmasını ve ardından new_doc klasörüne gitmesini ve hedef belgeyi new_page.html açmasını söyleriz
Örnek olarak, tamamen göreli adresleme temelinde oluşturulmuş bir eğitici mini site indirebilirsiniz. İzledikten sonra, yeni bağlantılar, klasörler ve sayfalar değiştirerek ve oluşturarak deneme yapın.
Göreli köprüler yardım kılavuzları gibi tarayıcı tabanlı çevrimdışı uygulamalar geliştirirken çok kullanışlıdır. Ancak, bir belgeyi geçerli klasörden diğerine taşırken, içindeki tüm göreli bağlantıların çalışmayı durduracağını unutmamalısınız. Bu nedenle, yeniden yazılmaları gerekecek. Göreli bağlantılar aynı zamanda geçerli klasörün içinde veya alt klasörlerde bulunan dosyalara işaret ediyorsa, bu klasörü başka bir konuma taşıdıktan sonra belgedeki tüm bağlantılar çalışmaya devam edecektir.
Göreceli yol sayımını site kökünden başlatmanız gerekiyorsa, yolun başına bir eğik çizgi "/" yazmalısınız. Örneğin, bağlantı " Ev" sitenin kök klasöründe bulunan bir belgeye işaret eder (geçerli olanı değil!). Site kökünden saymanın yalnızca gerçek bir web sunucusunun kontrolü altında çalıştığını unutmayın. Yerel bir sunucuda, örneğin Xampp , kök klasör adından saymaya başlamanız gerekir.
