HTML · Bağlantılar ve resimler — videolu atölye

Bağlantılar ve resimler

Dosya yolları, anlaşılır bağlantılar ve erişilebilir görseller kullanmak.

Kavramı kur

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.

Neden böyle çalışıyor?

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.

Çalışma sırası

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.

İkinci örnek · 1

./ aynı klasörü, ../ bir üst klasörü ifade eder. Kodun tamamı yazılı derste bulunur.

<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">

Beklenen sonucu oku

alt, görselin her pikselini değil içerikteki amacını anlatır.

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

Bir değeri sen değiştir

Bir gorseller klasörü aç; kendi seçtiğin bir fotoğrafı içine koy. src yolunu bilinçli olarak yanlış yaz; Network bölümündeki adresi ve alt metnini gözlemle.

Hata nereden gelir?

İnternetten kopyalanan görsel adresi kalıcı olmayabilir; izinli kendi görselini yerelde tut ve kaynağını not et.

Kendi çözümünü kur

Bir alt klasördeki sayfadan üst klasöre giden bağlantı yaz ve nereye çözüldüğünü kontrol et. Dosyanın bulunduğu konumdan değil, HTML dosyasının konumundan başlayarak yolu çiz.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

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

Kendini kontrol et

Bir alt klasördeki sayfadan üst klasördeki index.html hedefine nasıl gidilir? Yanıt: ../index.html ile; ../ bir klasör yukarı çıkar.

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