HTML Bağlantılar Ve Görseller

Bu yazının kısa özetini dinleyebilirsin.

HTML, web teknolojilerinin temel taşlarından biridir ve web sayfalarının iskeletini oluşturur. Bağlantılar (linkler) ve görseller ise kullanıcı deneyimini zenginleştiren, sayfayı görsel olarak daha güçlü hale getiren bileşenlerdir. HTML bağlantılar ve görseller konusunu yalnızca yüzeysel bir seviyede değil, ileri düzey ipuçları, SEO uyumluluğu ve pratik kod örnekleriyle birlikte tam kapsamlı şekilde inceleyeceğiz.

HTML’de Bağlantılar (Link) Nedir?

Bağlantılar, kullanıcıların bir web sayfasından başka bir sayfaya, bölüme, dosyaya veya harici bir kaynağa geçiş yapmasını sağlar. Web’in temel mantığı “hiper bağlantılara dayalı bir yapı” olduğundan, <a> etiketi HTML’in en önemli etiketlerinden biridir.

Temel Bağlantı Yapısı

<a href="https://www.ornek.com">Buraya tıklayın</a>

href: Bağlantının yönlendirdiği URL’dir.
Anchor Text (Bağlantı Metni): Kullanıcının tıkladığı görünen kısımdır.

Bağlantılarda Kullanılan Diğer Önemli Özellikler

target özelliği bağlantının nasıl açılacağını belirler:

target=”_blank” → Yeni sekmede açar.
target=”_self” → Varsayılan, mevcut sayfada açar.
rel=”noopener noreferrer” → Güvenlik için dış bağlantılarda önerilir.

<a href="https://teknokod.net/egitimler/html-dersleri/linklerle-calismak" target="_blank" rel="noopener noreferrer">
  HTML Bağlantılar Eğitimi
</a>

Dahili Bağlantılar (Internal Links)

Aynı site içindeki sayfalara yönlendirme yapmak için kullanılır. Bu, SEO için de oldukça önemlidir.

<a href="hakkimizda.html">Hakkımızda</a>

İç linkleme, sayfa otoritesini artırır ve kullanıcıların sitede daha uzun süre kalmasını sağlar.

Sayfa İçi Bağlantılar (Anchor Link)

Uzun sayfalar için mükemmeldir.

<a href="#iletisim">İletişim bölümüne git</a>
<h2 id="iletisim">İletişim</h2>

Bu yöntem, özellikle dokümantasyon ve içerik açısından zengin blog yazılarında çok kullanılır.

Dosya İndirme Bağlantıları

HTML, kullanıcıya doğrudan bir dosya indirme bağlantısı sunmanıza da olanak tanır:

<a href="dosyalar/dokuman.pdf" download>PDF İndir</a>

Tarayıcı desteğine bağlı olarak dosya doğrudan indirilebilir.

Telefon, E-posta ve WhatsApp Bağlantıları

Mobil uyumluluk için faydalıdır.

Telefon:

<a href="tel:+905551112233">Bizi Arayın</a>

E‑posta:

<a href="mailto:info@site.com">Mail Gönder</a>

WhatsApp:

<a href="https://wa.me/905551112233">WhatsApp ile İletişim</a>

HTML’de Görsellerle Çalışmak

Görseller, kullanıcıların dikkatini çekmek, içeriği daha anlaşılır kılmak ve sayfanın görsel kalitesini artırmak için kullanılır. HTML’de görseller eklemek için <img> etiketi kullanılır.

Temel Görsel Yapısı

<img src="gorsel.jpg" alt="Görsel açıklaması">

src: Görsel dosyasının yolu.
alt: Görsel yüklenmediğinde görüntülenen açıklama. SEO ve erişilebilirlik için zorunlu bir etikettir.

Örnek: Görsel Ekleme

<img src="https://academy.patika.dev/images/html-example.png" alt="HTML eğitim örneği">

Görsellerde Title Kullanımı

İsteğe bağlıdır, çoğu zaman üzerine gelindiğinde açıklama görünmesi için kullanılır:

<img src="kod.png" alt="Kod örneği" title="HTML kod ekran görüntüsü">

Alt Metni Neden Önemlidir?

SEO için görseli arama motorlarına “anlatır”
Görme engelli kullanıcılar ekran okuyucu kullanırken bu metni duyar
Görsel yüklenmezse kullanıcı yine bağlamı anlar

Görsel Boyutlandırma ve Responsive Tasarım

Görselleri HTML üzerinden boyutlandırabilirsiniz:

<img src="resim.jpg" width="300" height="200" alt="Örnek resim">

Ancak modern web geliştirmede CSS ile boyutlandırma daha sağlıklıdır.

Responsive Görsel Örneği

<img src="gorsel.jpg" alt="Responsive görsel" class="responsive">

.responsive {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: 8px;
}

Görsellerin dinamik cihaz boyutlarına uyum sağlaması, kullanıcı deneyimini doğrudan etkiler.

Lazy Loading (Performans İçin)

Sayfanızdaki tüm görsellerin aynı anda yüklenmesi performansı düşürebilir.

<img src="resim.jpg" alt="örnek" loading="lazy">

Bu özellik, özellikle çok görselli blog yazılarında performansı ciddi oranda artırır.

Görselleri Bağlantılarla Birleştirme

Bir görseli tıklanabilir hale getirmek oldukça yaygındır.

<a href="https://academy.patika.dev/courses/html/gorsellerle-calismak" target="_blank">
  <img src="html-kurs-kapak.jpg" alt="HTML Görseller Eğitimi">
</a>

Bu yöntem özellikle reklam banner’larında, kurs kapaklarında, ürün görsellerinde sıkça kullanılır.

SEO İçin Bağlantı ve Görsel Kullanım Stratejileri

Bağlantı ve görsel optimizasyonu, hem kullanıcı deneyimini hem arama motoru sıralamalarını doğrudan etkiler.

Bağlantılar İçin SEO Kuralları

Anchor text mutlaka açıklayıcı olmalı.
Harici sitelere verilen linklerde rel=”noopener noreferrer” kullanılmalı.
İç linkler, içerikler arası bağ kurarak otoriteyi artırır.
Gereksiz uzun URL’ler yerine temiz yapılar tercih edin.

Görsel SEO Kuralları

Alt metni mutlaka doğru ve açıklayıcı yazın.
Çok uzun alt metinlerden kaçının.
Görsel boyutlarını optimize edin (TinyPNG benzeri araçlarla sıkıştırabilirsiniz).
Görsel dosya adlarını anlamlı yapın: html-gorseller-ornek.jpg gibi.
WebP formatı kullanarak yüksek performans elde edebilirsiniz.

Örnek Uygulama: Bağlantılar ve Görsellerle Hazırlanmış Minik Eğitim Sayfası

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Bağlantı ve Görseller Eğitimi</title>
    <style>
        .responsive {
            width: 100%;
            max-width: 150px;
            height: auto;
            border-radius: 8px;
            margin: 10px 0;
        }
    </style>
</head>

<body>
    <h1>HTML Bağlantılar ve Görseller</h1>

    <p>Detaylı bağlantılar için <a href="https://teknokod.net/html-baglantilar-gorseller" target="_blank">bu
            eğitime göz atabilirsiniz</a>.</p>

    <img src="https://teknokod.net/wp-content/uploads/2025/01/html-5.png.webp" alt="HTML logosu" class="responsive">

    <h2 id="iletisim">İletişim</h2>
    <ul>
        <li><a href="tel:+905551112233" target="_blank">Bizi arayın</a></li>
        <li><a href="mailto:info@site.com" target="_blank">E-posta gönderin</a></li>
    </ul>

</body>

</html>

Bağlantılar ve görseller, web sayfalarının vazgeçilmez yapı taşlarıdır. Doğru ve SEO uyumlu kullanıldığında:

Kullanıcı deneyimini artırır,
Sayfa otoritesini güçlendirir,
Sayfanın görsel ve işlevsel kalitesini yükseltir.

Artık HTML’de bağlantılar ve görselleri kapsamlı şekilde kullanabilir ve web sayfalarınızı kullanıcı dostu hâle getirebilirsiniz.

Etiketler: HTML Bağlantılar HTML görseller

Paylaş:

Tayyip Bölük

Merhaba, ben Tayyip Bölük. Profesyonel bir yazılım geliştiricisi olarak, özellikle PHP tabanlı web projeleri geliştirme konusunda uzmanlaşmış durumdayım. Yazılım dünyasındaki yolculuğuma, yaratıcı çözümler üreterek ve kullanıcı odaklı projeler geliştirerek devam ediyorum.Blog sitemde yazılım ve teknolojiye dair güncel bilgileri, yenilikleri ve ipuçlarını paylaşıyorum. Amacım, yazılım dünyasına ilgi duyan herkese faydalı içerikler sunarak bilgi birikimimi paylaşmak ve sektörel gelişmelere ışık tutmak.PHP’nin yanı sıra, React, Bootstrap, Tailwind, Jquery gibi modern araçları kullanarak dinamik, kullanıcı dostu ve performanslı web siteleri geliştirme üzerine çalışıyorum. Ayrıca, öğretmenlere ve öğrencilere yönelik inovatif projeler geliştirme konusundaki tutkum sayesinde, eğitim ve yazılımı birleştiren projeler üretmeyi hedefliyorum.Eğer siz de yazılım ve teknoloji konularına ilgi duyuyorsanız, bloğumda sizin için ilham kaynağı olabilecek içerikler bulabilirsiniz.