27
Ekim

Yazan: WEBMASTERYOLCU  |  Kategori: Uygulamalı Html Dersleri  |  Okunma: 42.325 Defa

Selamun aleyküm değerli arkadaşlar artık keyifli ve bilgilerimizin iyice arttığı derslere neyin nasıl yapıldığını dha iyi anladığınız derslere girmiş bulunuyoruz bu dersimizde her sitede mutlaka bulanan bağlantılar (linkler) nasıl yapıldığını yazıya veya resime tıklanınca başka sitelere yada sayfaları açmayı öğrenecez onun öncesinde bir önceki dersimizi hatırlayalım aşağıda.

Bir Önceki Dersimiz: Web Tasarım Dersleri Border ve Sayfaya Arkaplan Resmi Ders 10

Metinlere (Yazılara Link Verme)

Yazılara lşnk verebilmek için değerli arkadaşlar <a> ve  href parametresini ne tür link olursa olsun kullanmak zorunda olduğumuzu unutmayın iyi ezberleyin bol bol uygulama yapın ilk uygulamamızı buyrun aşağıda yapalım açalım not defterimizi aşağıdaki kodları yazıp metinlerelink.html olarak masaüstüne farklı kaydedin.

<html>
<head>
<title>Web Tasarım Dersleri Linkler Link Verme Ders 11</title>
</head>
<body>
<a href=”http://www.webmasteryolcu.com”> Web Tasarım Dersleri </a>
</body>
</html>

Yukardaki mantığı anlatıyım arkadaşlar < href =”buraya açılacak sayfa yada site”>   Bu kısıma ise yazı yada resim kodu gelecek </a> link bitişi </a> kapatıyoruz bu kadar linkler zor değildir .

Yazılara Link Verme

Yazılara Link Verme

Sayfadaki Yazıya Tıklayınca Linkte belirtilen adres açılır başka bir siteye link verirken adresta http:// kulanmayı unutmayın şimdi resimlere link nasıl veriliyor onu görelim resim eklemeyi daha önce anlattım ona girmeyecem takılan eski derslerden inceleyebilir.

Resimlere Link verme

Resimlere link vermekte yazılara verilen linkle aynı mantıkta arkadaşlar resime tıklayınca ister bir sayfaya açılır ister resmin büyük halini açabilir isterseniz örnektede yapacağım gibi başka bir site açılabilir hepsindede mantık aynıdır aşağıdaki uygulamayı sizde yapın not defterinizde farklı kaydet diyerek dosya adı resimlerelink.html olarak kaydedin masaüstüne

<html>
<head>
<title>Web Tasarim Dersleri Resimlere Link Verme Ders 11</title>
</head>

<body>
<a href=”http://www.webmasteryolcu.com”> <img src=”gul.jpg”> </a>
</body>
</html>

yukardaki işlemi özetliyalim arkadaşlar <a href=”ile buraya adres yada sayfa uantısı”> buraya ise ister yazı ister bu örnekte olduğu gibi resim kodu link bitti ilk başta açmış olduğum a etiketini kapatmam gerekir </a>

Resimlere Link verme

Resimlere Link verme

Evet arkadaşlarım yukardaki resime link verdim linkte belirttiğim adres açılacak dikkat ettiyseniz resi kenarlarında mavi çizgi oluştu onu önlemek için resimlere link verdiğinizde border 0 yapmalısınız.

Sitemizde Sayfa İçi Link Verme

Düşünün 10 tane sayfanız var sitenize giren ziyaretçi ana sayfaya ulaşır diğer sayfalara ulaşmak için sayfa içi linkler ile bunuda çözmüş olacaz arkadaşlar bunun için masaüstüne linkler isminde klasör açın ve not defterimizle aşağıdaki uygulamayı yapalım 3 sayfamız olsun projemiz için

  1. Ana Sayfa
  2. Ürünler
  3. İletişim

3 Sayfa oluşturacaz arkadaşlar sayfalarımızı masaüstüne açtığımız linkler klasörüne kaydedeceğiz hadi buyrun bakalım kodlar aşağıda yer alan kodlar arasında yer alan dik çizgiyi yapabilmek için Alt Gr ile tire çizgisi butonuna basmalasınız.

Bu kodları linkler klasörüne index.html olarak kaydedin

<html>
<head>
<title>Web Tasarim Dersleri Sayfa Içi Link verme 11</title>
</head>

<body>
<a href=”index.html”>Ana Sayfa</a> | <a href=”urunler.html”>Ürünler</a> | <a href=”iletisim.html”>Iletisim </a>
<br><br><br>
Bu Sayfa Sitemizin Ana Sayfasidir…
</body>
</html>

Bu kodları linkler klasörüne urunler.html olarak kaydedin

<html>
<head>
<title>Web Tasarim Dersleri Sayfa Içi Link verme 11</title>
</head>

<body>
<a href=”index.html”>Ana Sayfa</a> | <a href=”urunler.html”>Ürünler</a> | <a href=”iletisim.html”>Iletisim </a>
<br><br><br>
Bu Sayfa Sitemizin Ürünler Tanitim Sayfasidir…
</body>
</html>

Bu kodları linkler klasörüne iletisim.html olarak kaydedin

<html>
<head>
<title>Web Tasarim Dersleri Sayfa Içi Link verme 11</title>
</head>

<body>
<a href=”index.html”>Ana Sayfa</a> | <a href=”urunler.html”>Ürünler</a> | <a href=”iletisim.html”>Iletisim </a>
<br><br><br>
Bu Sayfa Sitemizin Iletisim Bölümüdür …
</body>
</html>

Evet arkadaşlar masaüstüne açtığımız linkler klasörüne 3 adet sayfa hazırladık index.html urunler.html ve iletisim.html şimdi klasöre girip index.html sayfasını çift tıklayıp açın linklere tıklayın sayfalarda geçişi görün .

Sayfa İçi Link verme

Sayfa İçi Link verme

Evet arkadaşlar bunuda anladıkta sonra şimdide linklerin açılış şeklini görelim aynı sayfadamı açılsın yeni sayfadamı üstten açılma şekli falan.

Linklerde Target Parametresi Kullanımı

Linkler standart olarak aynı sayfada açılır arkadaşlar örneğin bir arkadaşınızın sitesine link verdiniz ziyaretçi tıkladı arkadaşınızın sitesi açıldı ziyaretçi sizin sitenizden gitti bunu önlemek için yeni pencerede açılmasını sağlayın target parametresi 4 adet değerden oluşur nedir bunlar görelim .

  • target=”self” : Link Verilen Sayfa yada Site Aynı Pencerede Açılır
  • target=”blank” : Açılacak sayfa yada site yeni pencerede açılır
  • target=”top” : self gibi buda aynı pencerede açar tek farkı sayfa üstten başlayarak açılır

Uygulayıp Görelim arkadaşlar Ne İşe Yarıyorlar açıyoruz not defterimizi ve aşağıdaki kodları yazıp linktarget.html olarak masaüstüne kaydedin.

<html>
<head>
<title>Web Tasarim Dersleri Linklerde Target Parametresi 11</title>
</head>
<body>

<a href=”http://www.webmasteryolcu.com” target=”_self”> Webmasteryolcu.com Aynı Sayfada Açılan link </a> <br>

<a href=”http://www.webmasteryolcu.com” target=”_blank”> Webmasteryolcu.com Yeni Pencerede Açılan link </a> <br>

<a href=”http://www.webmasteryolcu.com” target=”_top”> Webmasteryolcu.com Aynı Sayfada Üstten Başlayarak Açılan link </a>
</body>
</html>

Linklerde Target Kullanımı

Linklerde Target Kullanımı

evet arkadaşlar ekran görüntümüde yukarda ve linkleri burada şimdilik sonlandırıyoru ilerde projemide yine kullanacaz değinecez bugünkü derste bu kadar bir sonraki ders zorlaşacak biraz tablolara girecez hem zor hem keyifli artık site yapmaya adım adım yaklaştınız çok az kaldı arkadaşlar görüşmek üzere Bizi Yaratan Yüce Mevlaya Emanet olun.

Derslerimizi İstediğiniz sitede blogta izin almaksızın yayınlayabilirsiniz www.webmasteryolcu.com ibaresini eklemeyi unutmamanız dileğiyle



   Paylaş

3 Yorum yapılmış

  • Mehmet Emin TEKİN
    26 Ekim 2012 | Cevapla

    hocam allah razı olsun..Sizin sayenizde banka sitesi ödevimi yapıyorum.tesekkürler.. 🙂

    • 27 Ekim 2012 | Cevapla

      Mehmet emin güzel bir ismin var Anne babana dua et
      Başarılı olmana sevindim lakin benim değil Allahın sayesinde bizler vesile olduysak ne mutlu değerli kardeşim

  • stajyer
    14 Temmuz 2015 | Cevapla

    merhaba rica etsem hem css hem html kodlarını beraber yazar mısınız? Tıkladığımda verdiğim adrese gidiyor fakat fare üstüne geldiğinde rengini değiştiremiyorum.

Yorum yapın