Yazar: merhaba arkadaşlar.
bu yazımda html dilinde köprü, yani bağlantılar konusunu sizlere anlatacağım.
bir sayfayı ve ya birden fazla sayfaları birbirine bağlamak için bağlantı verilmelidir. işte bu önemli konuyu bu yazımda sizlere tüm detayları ile anlatacağım.
bağlantılar: dört ana guruba ayrılmaktadır.
1. sayfa içi bağlantılar.
2. sayfa dışı bağlantılar.
3. resme bağlantı vermek.
4. e-posta adresine bağlantı verme.
bu genel bilgilendirmeyi verdikten sonra şimdi tek tek bu bağlantı türlerini inceleyelim.
1.Sayfa İçi Bağlantı:
sayfa içi bağlantı konusu oldukça önemli bir konudur. çünkü web sitemizde uzun bir yazı yazdığımızı varsayalım, bu yazımızı ana başlıklara bölmemiz gerekebilir.
bu yüzdende yazılarımızı kısım kısım ayararak bağlantılara tıklanarak, ilgili bölüme gidilmesini sağlayabiliriz.
şimdi bir örnek yapalım ve örnek yaparak bunu pekiştirebilirsiniz.
bir html sayfası oluşturun bir kaç paragraftan oluşan bir yazı yazmamız gerekecektir.
bu yazıları sayfa içi bağlantı kullanarak bölümlere ayıracağız.
örnek:
<html>
<head>
<Title>Sayfa İçi Bağlantı</Title>
</head>
<Body>
İÇİNDEKİLER <BR>
<a href=”#html”>A.html</a><BR>
<a href=”#html5”>B.html5</a><BR>
html: hiper text markup language. html bir web sayfası hazırlanırken. temel olarak kullanılan bir dildir.<br>
bazı uzmanlar html dilini bir dil olarak kabul etmemektedir. ancak bir web sayfasında genel olarak bilinmesi gereken ilk dildir.<br>
benim kişisel görüşüm ise html bir programlama dili değildir. ancak bir web tasarım dilidir.<br>
html 5 teknoloji html in en gelişmiş teknolojisidir. <br>
bizler daha dinamik sayfalar hazırlamak için html öğrendikten sonra bu web sayfasında html 5 yazılarını yazacağız.<br>
bu doğrultuda html ve html 5 oldukça web tasarım için önemli bir konu olduğunu söylemeliyiz.<br>
<a name=”html”></a>
ÜNİTE-1 : temel html dersleri<BR>
html ile ilgili temel bilgiler<br>
…………<br>
<a name=”html5”></a>
ÜNİTE-2 : html5<BR>
html ile ilgili temel bilgiler<br>
…………
</Body>
</Html>
Açıklama : href parametresi ile bağlanılacak hedef belirlenir. <a name…> ise linke tıklandığında sayfa içinde gidilecek satıra konulmuş olan bir yer işaretidir.
2. sayfa dışı bağlantı:
bu html bağlantı türü ise birden fazla html sayfaları arasındaki köprü kurmak için kullanılmaktadır.
şimdi ise burada kullandığımız birtakım parametreler vardır. bu parametreleri öğrenelim.
Açıklama : target parametresi aşağıdaki değerleri alır.
target=”_blank”: Bağlantının, yeni bir pencerede açılmasını sağlar.
target=”_self”: Bağlantının, aynı pencere içerisinde açılmasını sağlar.
target=”_top”: Bağlantının, aynı pencere içerisinde en üstten itibaren açılmasını sağlar.
target=”_parent” : Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerinde açılmasını sağlar.
Örnek Kod :
<html>
<head>
<Title>Sayfa Dışı Bağlantı</Title>
</head>
<body>
<a href=”sayfa2.html” target=”_blank”>Sayfa2 için tıklayınız.</a>
<a href=”sayfalar/sayfa2.html” target=”_blank”>Sayfa2 için tıklayınız.</a>
<!–Bir alt klasördeki sayfaya bağlantı kurar. –>
<a href=”..\sayfa2.html” target=”_blank”>Sayfa2 için tıklayınız.</a>
<!—Bulunduğunuz konumdan bir üst klasördeki sayfaya bağlantı kurar. –>
</body>
</html>
burada yukarıdaki yapmış olduğumuz açıklamayı dikkat almanız gerekmektedir. burada target etiketinin parametrelerini kullanmış olduk.
şimdi sayfa dışı bağlantısında bilmemiz gereken bir konu daha vardır. bu da başka bir web sayfasına bağlantı vermektir. burada sayfanın url adresi tam olarak girilmelidir. aksi taktirde sayfa urlsi çalışmayacaktır.
yine burada bir örnekle açıklayalım.
örnek:
<html>
<head>
<Title>Site dışı bağlantı</Title>
</head>
<Body>
<a href=”https://ozdogan.gen.tr” target=”_blank”>Sayfa2 için tıklayınız.</a>
<br>
<!—ozdogan.gen.tr yani benim web sitemin bağlantısıdır. tıklandığında ana sayfaya gider.
<a href=”https://www.sadikozdogan.com.tr” target=”_blank”>Sayfa2 için tıklayınız.</a>
<br>
<!—yine benim wp ile ilgili olan sadikozdogan.com.tr web sitesine bağlanır.
</Body>
</Html>
3. mail adresine bağlantı verme:
bu bağlantı türünde ise mevcut olan mail adresine direkt olarak mail gönderilmesini istiyorsanız bu bağlantı türünü kullanabilirsiniz.
yine bu bağlantı türünü kullanarak bir örnek yapalım.
örnek:
<html>
<head>
<Title>E-Posta Adresine Bağlantı</Title>
</head>
<Body>
<a href=”mailto:sadikozdogan.net@gmail.com”mail göndermek için tıklayınız.</a>
</Body>
</Html>
burada mail olduğunu belirtmek için mailto etiketini kullanabiliriz.
4. resimli bağlantı:
resimli bağlantı türüne ise resimler konusuna geldiğimizde değineceğimizden bu konuyu şimdilik anlatmayacağım. sadece resimede bağlantı verileceğini bilmenizi istedim.
html dilinde bağlantı konusunu tüm detayları ile sizlere anlatmaya çalıştım.
umarım faydalı bir yazı olmuştur.
soru ve sorunlarınızı yazımın altına yorum olarak bana iletebilirsiniz.
iyi bloglamalar herkese.a
Bir önceki yazımız olan html renk kodları başlıklı makalemizde html renk kodları, html renk kodları kullanımı ve html renk kodları ne işe yarar hakkında bilgiler verilmektedir.