Bağlantılar ve görseller

HTML adındaki “HyperText” (hiper metin), bağlantılar içeren metin demektir. Ayrı sayfaları bir ağa dönüştüren şey bağlantılardır: tek bir tıklamayla başka bir sayfada, başka bir sitede, hatta başka bir ülkedesin. Bu derste sayfaları bağlantılarla birbirine bağlayacak ve görsellerle canlandıracaksın.

Bağlantılar: `<a>` öğesi

Bağlantı <a> (anchor, yani çapa) öğesiyle oluşturulur. href özniteliği adresi tutar; etiketlerin arasındaki metin ise kullanıcının tıkladığı kısımdır. İyi bir bağlantı metni nereye götürdüğünü söyler: “buraya tıkla” değil, “Ders programına bak”.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; line-height: 1.8; }
  a { color: #4f46e5; }
</style>

<p>Another site: <a href="https://example.com">Example website</a></p>
<p>New tab: <a href="https://example.com" target="_blank" rel="noopener">Open in a new tab</a></p>
<p>Email: <a href="mailto:info@example.com">Write to us</a></p>
<p>Same site: <a href="about.html">About us</a></p>

• target="_blank" bağlantıyı yeni bir sekmede açar. Yanına rel="noopener" ekle; bu, yeni sayfanın senin sayfanı etkilemesini engeller.
• mailto: ile başlayan bir adres, e-posta uygulamasını alıcısı doldurulmuş hâlde açar.
• about.html gibi kısa bir adres aynı sitedeki bir dosyaya götürür; bu bir göreli yoldur.

Mutlak ve göreli yollar

Mutlak URL, protokol ve alan adı dâhil tam adrestir: https://example.com/images/cat.png. Başka sitelere bağlantı vermek için kullanılır. Göreli yol ise geçerli dosyaya göre hesaplanır ve kendi sitenin içinde kullanılır. Diyelim ki sitenin klasörleri şöyle:

my-site/
├── index.html
├── about.html
├── images/
│   └── logo.png
└── blog/
    └── post.html

Sayfa içinde atlama

Bir bağlantı aynı sayfadaki belirli bir yere de götürebilir. Bunun için hedef öğeye bir id özniteliği ver, bağlantının href'ine de # işaretinden sonra bu id'yi yaz. Uzun makalelerdeki içindekiler bölümü böyle kurulur. href="#top" ise sayfanın en üstüne döndürür.

<nav>
  <a href="#fruits">Fruits</a> |
  <a href="#drinks">Drinks</a>
</nav>

<h2 id="fruits">Fruits</h2>
<p>Apples, pears, pomegranates.</p>

<h2 id="drinks">Drinks</h2>
<p>Tea, ayran, juice.</p>
<a href="#top">Back to top</a>

Görseller

Bir görsel boş <img> öğesiyle eklenir. src özniteliği görsel dosyasının yoludur; alt ise alternatif metindir: ekran okuyucu onu sesli okur, görsel yüklenemezse onun yerinde görünür ve arama motorları da onu kullanır. width ve height görselin boyutunu belirtir; böylece tarayıcı görsel yüklenmeden önce ona yer ayırır ve sayfa “zıplamaz”.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  figcaption { color: #475569; font-size: 14px; }
</style>

<figure>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Crect width='120' height='80' fill='%2338bdf8'/%3E%3Ccircle cx='95' cy='20' r='12' fill='%23fde047'/%3E%3Cpath d='M0 80 40 35 70 65 90 45 120 80Z' fill='%2316a34a'/%3E%3C/svg%3E"
       alt="Green hills under a blue sky with a yellow sun"
       width="240" height="160">
  <figcaption>Figure 1. A picture made of three shapes.</figcaption>
</figure>

SVG ve emoji

SVG (Scalable Vector Graphics), bir resmi pikseller yerine şekillerle tanımlar: “burada yarıçapı 28 olan kırmızı bir daire var”. Bu yüzden her yakınlaştırmada keskin kalır. SVG'yi ayrı bir dosya olarak <img> ile ekleyebilir ya da doğrudan HTML'in içine bir <svg> öğesi olarak yazabilirsin. Emojiler ise yalnızca metin karakterleridir ve hiçbir dosyaya ihtiyaç duymaz.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
</style>

<p>Emoji are just text: 🚦 🌞 🍎</p>

<svg width="220" height="110" viewBox="0 0 220 110" role="img" aria-label="A traffic light">
  <rect x="5" y="5" width="210" height="100" rx="20" fill="#1e293b"/>
  <circle cx="50" cy="55" r="28" fill="#ef4444"/>
  <circle cx="110" cy="55" r="28" fill="#facc15"/>
  <circle cx="170" cy="55" r="28" fill="#22c55e"/>
</svg>