Web Tasarım Dersleri linkler Yazılara ve Resimlere Link Verme Ders 11

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=”https://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=”https://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=”https://www.webmasteryolcu.com” target=”_self”> Webmasteryolcu.com Aynı Sayfada Açılan link </a> <br>

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

<a href=”https://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

About SEO Uzmanı Mustafa Gövercin

Merhaba arkadaşlar ben SEO uzmanı Mustafa Gövercin yaklaşık 20 yıldır İnternet siteleri ve SEO konusunda kendimi geliştirmeye çalışıyorum. İnternet siteleri ile tanışmam 1999 yılına uzanmaktadır. Windows 95 işletim sisteminin olduğu ve harici depolama aracı olarak 1.44 MB alanı olan disketli bilgisayarlarla başlamıştım.

Mustafa Gövercin
Esenyurt Belediyesi kültür merkezinde öğrendiğim bilgisayarı o zaman yeni açılan ve hızla yaygınlaşmaya başlayan İnternet kafe türü yerlerde geliştirme imkânı bulmuştum. Çünkü kendime ait ne bilgisayar nede İnternetim vardı. İnternet kafede insanlar o dönemin en ünlü Chat (sohbet) programı Mirc ve ICQ ile vakit geçirirken ben Word ile yazı yazarak parmaklarımı hızlandırmaya çalışıyordum.

Sonrasında İnternet sitelerini incelemeye ve onların nasıl yapıldığını merak etmeye başlamıştım. Karşıma HTML işaretleme dili çıktı. O zaman henüz CSS stil dili bulunmuyordu. Biraz oradan bilgi, biraz bir yerden kod çalma derken site olamayacak kadar kötü siteler yapmaya başlamıştım.

İlk sitem sadece 10MB hosting olan bedavaweb.gen.tr olduğunu söylemeliyim. Eskiden free hosting kelimesi en çok aranan kelimeler arasında yer alıyordu. Çünkü hosting fiyatları gerçekten fahiş fiyatlarla satılıyordu. Depolama alanı ise oldukça azdı. İnsanlar bu nedenle özellikle yabancı kaynaklardan ücretsiz hosting alarak bir şeyler yapmaya çalışıyordu. Hatta bu hizmeti verenlerin büyük bir bölümü sitenize rahatsız edici reklamlar koyardı. Reklam koymayanlar ise çok kaliteli oldukları söylenemez. Bende Atspace.com sitesinden 50MB fakat MYSQL veritabanı olmayan birkaç hosting aldım. Halen o sitelerin açık olduğunu söyleyebilirim. Bu nedenle Atspace firmasına yürekten teşekkür ediyorum.

Toplistler ve Dizinler Çok Yoğun Kullanılıyordu

Google 1998 yılında kurulmasına karşın tam olarak etkin hale gelmesi 2002 sonrası olmuştur. Biz o süreçte sitelerimize trafik çekebilmek için yerli ve yabancı toplist, dizin sitelerini kullandık, o nedenle sitelerin alt (footer) kısmı toplist ve dizinlerin verdiği banner çöplüğü haline gelirdi. Çünkü bir toplist ya da dizinde siten yer alması için o banneri eklemek zorunda kalıyorsun. Tabii ki şuan bu tür siteler tamamen yok olmasa bile sayıları bir elin parmakları kadar az diyebilirim. Arama motoru olarak Yahoo.com daha eski fakat ABD’den başka ülkelere hayrı yok diyebilirim.

Eskiden SEO Diye Bir Şey Yoktu

Çünkü Google algoritmaları çok amatörce çalışıyordu. Bir kelimede ilk sayfaya gelmek için Title kısmına yazman yeterli olurdu. Daha fazla kelimede yer almak için kelimeler arasına virgül koyman yeterli diyebilirim. Şuan 60-70 karakter olan Title (başlık sınırı) eski sistemde title etkili olduğu için insanlar 600-700 hatta daha fazla başlıklara yer verirdi. Çok iyi hatırlıyorum sitemin biri Hülya Avşar kelimesinde ilk sırada çıkıyordu. Hülya Avşar ile ilgili hiçbir içerik ya da görsel olmadığı halde! Çünkü title Hülya Avşar yazması yeterli oluyordu.

2004 Yılında Google Adsense İle Kazanmaya Başladım

Bu işe başladığım ilk zamanlarda bu işlerden para kazanmayı hedefliyordum. İlk olarak kitapyurdu.com gibi sitelerin reklamını alarak başladım. Fakat biriken paramı hiçbir şekilde ödemediler. Şuan büyük bir şirketiz diye övünseler bile geçmişte benim gibi insanların küçük meblağ olmasına karşın ödemedikleri ve hiçbir şekilde cevap vermedikleri haklarını eminim unutmazlar.

Tabii ki böylesi başarısız Türk sponsorlar sonrası Google Adsense Türkiye’de de başvuru almaya başladı. Bende kayıt oldum ve reklam yayınlamaya başladım. İlk ödemem 1400$ değerinde olmuştu (birkaç aylık reklam yayını sonrası) çek gönderdiler. O zaman Havele vs yoktu, çek gönderdiler ama ne yapacağımı bilemiyorum. Bankaları dolaşmaya başladım. Çözüm bulan banka neredeyse hiç çıkmadı. Hatta Ziraat Bankasında görevli bir ihtiyar artık sinirimi dayanılmaz hale getirmişti. Koydum önüne bakmadan bile ne bu diyerek artistçe bir yaklaşımda bulunmuştu. Neyse ki Akbank görevlisi durumu anladı ve sorunu çözdü. Çeki bankaya veriyorum 20$’da işlem ücreti ödüyorum. 1 Ay sonra çekin ödemesi hesabıma geçiyordu.

Eğitim, Moda, Turizm Siteleri Yaptım

Google Adsense ile kazanmaya başlayınca artık sitelerimin sayısını artırmaya karar verdim. Bu kapsamda başlıkta da belirtildiği gibi eğitim, moda ve turizm alanında siteler yaptım. Fakat şuan ki kadar başarılı içerik oluşturduğum söylenemez. Bu nedenle sitelerim birçok algoritmadan zarar gördüler. Bunlar benim için aslında engel ve tecrübe oluyordu. Böylece Google’yi daha iyi anlama ve kurallara adapte olmayı öğrendim.

Sağlık Alanında Hizmet Vermeye Başladım

2009 Yılında Webmastersitesi.com yöneticiliği yaparken bir iş ilanı konusu açıldı ve ben başvuru yaptım orada başladım. Tek şubesi olan bir sağlık merkeziydi. Başladığım o işte 10 yıl geçti ve halen devam ediyorum. 1 Olan şube sayısı 3 tanesi İstanbul’da olmak üzere 6’ya yükseldi. Bu süreçte yaklaşık 100 sitenin tasarım ve SEO işlemlerini gerçekleştirdim.

Sağlık Alanında İçerik Oluşturmayı Öğrendim

En sevdiğim şeylerden biri haline gelen sağlık alanında yazı yazmak, öğrenmek, öğretmek daha önce yaptığım işlerin tümünü geride bıraktı diyebilirim. Çünkü bazı hastalıkların çok kolay nüfus ettiğini öğreniyorsun. İnsanlar çok basit, çok kolay önlemlerle hastalıklardan korunabileceğini öğreniyorsun. Bu bilgiyi bir an evvel insanlarla paylaşmak için heyecanlanıyorsun. Bu nedenle sağlık alanında her yazıyı yazabilirim. Tabii ki henüz ilgilenmediğim alanlarda önce araştırma ve öğrenme süreci olacağı için bazen 2-3 saat geç bitebilir.

Bundan Sonraki Çalışma Alanım Sağlık Siteleri

Bugüne kadar yaptığım işler arasında en keyiflisi olan sağlık ve doktorlarla bir arada çalışma güzelliğini devam ettireceğim. Bunda sonra her işi yapmak, her sektörde yer almak yerine sadece sağlık sektöründe olarak, hastaneler, klinikler ve doktorların İnternet siteleri ve SEO çalışmalarını yapacağım. Çünkü severek yaptığım bu işte daha başarılı oluyorum. Böylece hizmet verdiğim kurum, kuruluş ve bireylere faydalı oluyorum.

6 comments

  1. Mehmet Emin TEKİN

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

    • WEBMASTERYOLCU

      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

  2. 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.

  3. SİTEMİN İÇİNDE MESELA YERLİ FİLM ADI BAŞLIKTA BİR KONU AÇIP İÇİNE YOOUTUBEDEN FİLM ATACAM AMA BENİM SAYFAMDA ÇALIŞSIN KODU NASIL OLUR YARDIM EDERMISISNIZ YAPAMIYORUZ…TŞKLER

    • Mustafa: Youtube’de eklemek istediğin videonun alt kısmında yer alan Paylaş butonuna tıkla açılan menüde Ekle tıkla ve karşına çıkan iframe kodlarını alarak sitene ekleyebilirsin. Bu şekilde video sitende oynatılır.

  4. Rabbenâ âtinâ fid’dünyâ haseneten
    ve fil’âhireti haseneten ve gınâ azâbennâr.
    Birahmetike yâ Erhamerrahimîn.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir