Bağlantılar ve resimler

Başlamadan önce

Önceki dersteki örneği çalıştırmış olman ve dosya/çıktı ayrımını biliyor olman yararlı.

Öğrenme sırası: konuyu oku → çıktıyı tahmin et → örneği değiştir → alıştırmayı çöz → cevabını gerekçelendir.

Konu anlatımı

Bağlantının görünen metni ile hedefi iki ayrı bilgidir. href hedef adresi tutar; a öğesinin içindeki metin kullanıcıya ne olacağını anlatır. Sadece “buraya tıkla” yerine “Python çalışma planını oku” gibi bir metin, bağlantıların tek başına da anlaşılmasını sağlar. İnternet adresi ile projendeki göreli dosya yolunu karıştırma.

Görselde src dosyayı gösterir; alt ise görselin o bağlamda taşıdığı bilgiyi anlatır. Bir fotoğraf içerik için önemliyse kısa ama anlamlı bir açıklama yaz. Sırf süs olan görselde boş alt kullanılabilir. Dosya adını veya “resim” sözcüğünü tekrar etmek yerine ziyaretçinin kaçıracağı anlamı düşün.

Göreli yol bulunduğun dosyanın klasörüne göre çözülür. Sayfa bir alt klasöre taşınırsa aynı yol başka bir yeri gösterebilir. Tarayıcının Network bölümünde isteğin tam adresini ve 404 durumunu kontrol et. Sorunu dosyanın kendisinde mi yoksa ona giden yolda mı aradığını böyle ayırabilirsin.

İlk örneği oku ve dene

<a href="https://www.wikipedia.org">Vikipedi'ye git</a>

<img src="https://picsum.photos/300/150" alt="Dış kaynaktan yüklenen örnek fotoğraf">

Tıklanabilir mavi "Vikipedi'ye git" yazısı ve yanında bir fotoğraf görünür.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Adım adım neden böyle çalışıyor?

1. ./ aynı klasörü, ../ bir üst klasörü ifade eder.
2. width ve height tarayıcının görsele yer ayırmasına yardım eder; mobilde CSS ile max-width:100% kullan.
3. Yeni sekme açmak zorunlu değildir; açıyorsan kullanıcıya anlaşılır hedef metni ver.
4. alt, görselin her pikselini değil içerikteki amacını anlatır.

<a href="dersler/python.html">Python derslerini aç</a>
<img src="gorseller/calisma-masasi.jpg"
     alt="Not defteri yanında açık kod editörü"
     width="640" height="400"
     style="max-width:100%;height:auto">

Dosyalar bu yollarda varsa Python bağlantısı ve ekran genişliğine sığan fotoğraf görünür.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Kolaydan zora sen dene

1. Bir gorseller klasörü aç; kendi seçtiğin bir fotoğrafı içine koy.
2. src yolunu bilinçli olarak yanlış yaz; Network bölümündeki adresi ve alt metnini gözlemle.
3. Bir alt klasördeki sayfadan üst klasöre giden bağlantı yaz ve nereye çözüldüğünü kontrol et.

<a href="../index.html">Ana sayfaya dön</a>
<img src="../gorseller/notlar.jpg" alt="Üç aşamalı çalışma planı" width="600" height="400">

Bir alt klasörden ana sayfaya ve üstteki gorseller klasörüne erişir; dosyalar ayrıca oluşturulmalıdır.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Yaygın hata ve çözümü

1. İnternetten kopyalanan görsel adresi kalıcı olmayabilir; izinli kendi görselini yerelde tut ve kaynağını not et.
2. Anlam taşıyan bir fotoğrafa alt="" vermek görsel bilgiyi ekran okuyucudan gizler.

Kendini değerlendir

Ezberlemeden açıklayabiliyor musun?

Bir alt klasördeki sayfadan üst klasördeki index.html hedefine nasıl gidilir?

Kendi çözümünde bir girdiyi değiştir. Çalıştırmadan önce beklenen sonucu yaz; gerçek sonuçla karşılaştır ve fark varsa hangi satırdan kaynaklandığını açıkla.

Kaynak ve çalışma ortamı

Örnekler küçük öğretim senaryolarıdır. Java/C#/PHP/Swift çalışma ortamını kendi cihazında ayrıca doğrula; yazılı sonuçlar beklenen davranışı açıklar.