- Katılım
- 2 Ağustos 2010
- Mesajlar
- 393
- Reaction score
- 0
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.
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
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
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
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
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 .
<html>
<head>
<title>Web Tasarim Dersleri Linklerde Target Parametresi 11</title>
</head>
<body>
<a href=”http://www.webmasteryolcu.com” target=”_self”> Aynı Sayfada Açılan link </a> <br>
<a href=”http://www.webmasteryolcu.com” target=”_blank”> Yeni Pencerede Açılan link </a> <br>
<a href=”http://www.webmasteryolcu.com” target=”_top”> Aynı Sayfada Üstten Başlayarak Açılan link </a>
</body>
</html>
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.
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 VermeSayfadaki 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 vermeEvet 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
- Ana Sayfa
- Ürünler
- İletişim
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 vermeEvet 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
<html>
<head>
<title>Web Tasarim Dersleri Linklerde Target Parametresi 11</title>
</head>
<body>
<a href=”http://www.webmasteryolcu.com” target=”_self”> Aynı Sayfada Açılan link </a> <br>
<a href=”http://www.webmasteryolcu.com” target=”_blank”> Yeni Pencerede Açılan link </a> <br>
<a href=”http://www.webmasteryolcu.com” target=”_top”> Aynı Sayfada Üstten Başlayarak Açılan link </a>
</body>
</html>
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.