Ana Sayfa / HTML Dersleri / Ders 3

Ders 3 – Linkler, Görseller ve Butonlar

Bu derste bir web sayfasını zenginleştiren üç önemli yapı taşıyla tanışacaksın: linkler (<a>), görseller (<img>) ve butonlar (<button>). Dersin sonunda başka sayfalara giden linkler, resimler ve tıklanabilir butonlar içeren mini bir sayfa oluşturmuş olacaksın.

1. Linklere Giriş (<a> ve href)

Link (bağlantı), kullanıcıyı başka bir sayfaya veya siteye götüren tıklanabilir yazı veya görsellere verilen isimdir. HTML’de link oluşturmak için <a> (anchor) etiketini kullanırız. 

<a href="https://www.google.com">Google'a git</a>
  • href → Linkin gideceği adresi belirtir.
  • <a> ... </a> arasına görünen link yazısı gelir.
Google'a git

1.1. Yeni Sekmede Açmak: target="_blank"

Linkin tıklandığında yeni bir sekmede açılmasını istiyorsan target="_blank" özelliğini kullanırsın: 

<a href="https://www.eba.gov.tr" target="_blank">
  EBA'yı yeni sekmede aç
</a>
EBA'yı yeni sekmede aç

2. Sayfa İçi ve Proje İçi Linkler

Linkler her zaman internet adresine gitmek zorunda değildir. Kendi projen içinde başka bir HTML dosyasına da link verebilirsin.

2.1. Kendi Sayfana Link Vermek

Proje klasöründe başka bir HTML dosyan varsa, ona da link verebilirsin. Örneğin hakkimda.html dosyan olsun: 

<a href="hakkimda.html">Hakkımda Sayfasına Git</a>
Hakkımda Sayfasına Git

💡 Not: Linkin çalışması için HTML dosyalarının aynı klasörde veya doğru klasör yapısında olması gerekir.

3. Görseller (<img>)

Sayfana resim eklemek için <img> etiketini kullanırsın. Bu etiketin kapanış etiketi yoktur. 

<img src="profil.jpg" alt="Profil Fotoğrafım">
Yeşil
  • src → Resmin dosya adı veya yolu.
  • alt → Resim yüklenmezse görünen açıklama.
  • width → Genişlik (piksel cinsinden).

Resim dosyan HTML dosyanla aynı klasördeyse sadece adı yeterlidir: src="kedi.png".

4. Butonlar (<button>)

Kullanıcıdan tıklama beklediğin durumlarda <button> etiketini kullanırsın: 

<button>Beni Tıkla</button>

Şimdilik bu butonlar sadece görsel olarak dursun. İleride JavaScript öğrendiğinde bu butonlara tıklandığında neler olacağını sen belirleyeceksin.

4.1. Butonu Link Gibi Kullanmak (İleri Seviye Fikir)

Daha sonra, istersen butonu tıklayınca başka sayfaya giden JavaScript kodları yazabilirsin. Bu derste sadece fikrini görmüş olalım: 

<button>Hakkımda Sayfasına Git</button>

Bu ders kapsamında JavaScript ayrıntısına girmeyeceğiz, sadece temel fikir olarak görmüş olman yeterli.

5. Mini Görev – Mini Profil Sayfası

Şimdi öğrendiklerini kullanarak basit bir profil sayfası tasarla. Aşağıdaki adımları sırayla uygula:

  1. index.html dosyana git.
  2. En üste bir <h1> başlığı ekle: “Benim Profilim” gibi.
  3. Altına bir adet <img> etiketiyle kendi seçtiğin bir fotoğrafı yerleştir (örneğin images/profil.jpg).
  4. Fotoğrafın altına bir <p> paragraf ekleyerek kendini tanıt.
  5. Bir adet <a> etiketi ile sevdiğin bir siteye link ver (örneğin YouTube, Udemy vb.).
  6. En alta bir <button> ekleyerek “Anasayfaya Dön” yaz. İstersen bu butonu şimdilik sadece görsel olarak kullan, istersen linkle.

Hazırladığın profil sayfasının ekran görüntüsünü alıp öğretmeninle paylaşmayı unutma. 🙂


Kaynaklar

  • MDN – “<a>: The Anchor element”
  • MDN – “<img>: The Image Embed element”
  • MDN – “<button>: The Button element”