Bağlantılar, Görseller ve Sayfalar Arası Geçiş

Bir önceki derste bir HTML dosyasının iskeletini kurmuştunuz: başlıklar, paragraflar ve temel etiketlerle tek bir sayfa oluşturmuştunuz. Bu derste artık o tek sayfayı diğer sayfalarla ve dış dünyayla bağlamayı öğreneceksiniz. Bir sonraki derste ise bu sayfaları CSS ile güzelleştirmeye, yani renk, yazı tipi ve düzen vermeye başlayacaksınız; bu yüzden bugün kuracağınız çoklu sayfa yapısı, ilerideki stil dersleri için de sağlam bir zemin olacak.

Bu derste ne yapacağız?

Bu dersin hedefi, bir metni tıklanabilir bir bağlantıya (link) dönüştürmeyi, bir sayfaya görsel (resim) eklemeyi ve iki veya daha fazla HTML dosyasını birbirine bağlayarak küçük, gezinebilir bir web sitesi taslağı oluşturmayı öğrenmektir. Dersi rahatça takip edebilmek için bir önceki derste oluşturduğunuz temel HTML dosyasının hâlâ elinizde olması ve bilgisayarınızda metin düzenleyici (örneğin Not Defteri, Visual Studio Code veya benzeri bir program) ile bir internet tarayıcısının kurulu olması yeterlidir. Kod yazma deneyiminiz olmasa bile, adımları sırayla uyguladığınızda rahatlıkla tamamlayabileceğiniz bir derstir.

Kavram

Bir web sitesini, birbirine kapılarla bağlı odalardan oluşan bir eve benzetebilirsiniz. Her HTML dosyası bir odadır; odanın içindeki mobilyalar ise başlıklar, paragraflar ve görsellerdir. Bağlantı (link) etiketi ise iki oda arasındaki kapı gibidir: birine tıkladığınızda o kapıdan geçip başka bir odaya (yani başka bir sayfaya) geçersiniz. Bağlantılar sadece kendi sitenizdeki sayfalar arasında değil, aynı zamanda internetteki başka sitelere açılan kapılar olarak da kullanılabilir.

Görsel (image) etiketi ise duvara asılan bir tablo veya fotoğraf gibidir; sayfanın kendisi değildir, dışarıdan getirilip sayfaya yerleştirilen bir dosyadır. Tarayıcı, sayfanızı açtığında görsel dosyasını da ayrıca bulup göstermeye çalışır; dosya doğru yerde değilse, duvarda boş bir çerçeve kalır.

HTML'de bağlantı oluşturmak için <a> (anchor, yani çapa) etiketi kullanılır. Bu etiketin en önemli özelliği (attribute) <strong>href</strong> adını taşır ve gidilecek adresi belirtir. Örneğin şu şekilde yazılır: <a href="hakkimizda.html">Hakkımızda</a>. Burada tırnak içindeki kısım hedef dosyanın adıdır, iki etiket arasındaki metin ise tarayıcıda görünecek ve tıklanabilir olacak yazıdır.

Görsel eklemek için ise <img> etiketi kullanılır. Bu etiket diğer birçok etiketten farklı olarak kapanış etiketine ihtiyaç duymaz, tek başına yazılır. Görselin dosya yolunu belirtmek için yine <strong>src</strong> (source, yani kaynak) özelliği kullanılır. Ayrıca görselin ne anlattığını açıklayan <strong>alt</strong> özelliği eklenmesi hem görme engelli kullanıcıların ekran okuyucularına yardımcı olur hem de görsel yüklenemediğinde yerine açıklayıcı bir metin gösterir. Örnek kullanım şöyledir: <img src="logo.png" alt="Şirket logosu">.

Adım adım uygulama

• Metin düzenleyicinizde bir önceki derste oluşturduğunuz HTML dosyasını açın. Bu dosyanın adının, örneğin, index.html olduğunu varsayalım.
• Aynı klasör (dosyaların bulunduğu dizin) içinde ikinci bir dosya oluşturun ve adını hakkimizda.html koyun. Bu dosyaya, önceki derste öğrendiğiniz temel iskeleti (html, head, body etiketleri) yazın ve içine kısa bir başlık ile bir paragraf ekleyin.
• index.html dosyasını açın ve body etiketinin içine, tıklanabilir bir bağlantı ekleyin: <a href="hakkimizda.html">Hakkımızda sayfasına git</a>. Bu satır, aynı klasördeki hakkimizda.html dosyasına giden bir kapı açar.
• Dosyayı kaydedin ve tarayıcınızda açın (dosyaya çift tıklayarak veya tarayıcıya sürükleyerek). Ekranda "Hakkımızda sayfasına git" yazısının altı çizili ve genellikle mavi renkte göründüğünü fark edeceksiniz; bu, onun tıklanabilir bir bağlantı olduğunun görsel işaretidir.
• Yazıya tıklayın. Tarayıcının hakkimizda.html dosyasını açtığını görmelisiniz. Eğer bir hata sayfası çıkarsa dosya adının veya konumunun doğru yazılıp yazılmadığını kontrol edin.
• Şimdi hakkimizda.html dosyasına, index.html'e geri dönmek için benzer bir bağlantı ekleyin: <a href="index.html">Ana sayfaya dön</a>. Böylece iki sayfa arasında ileri geri gezinebilirsiniz.
• Bir görsel eklemek için, kullanmak istediğiniz bir resim dosyasını (örneğin bir .jpg veya .png dosyası) HTML dosyalarınızla aynı klasöre kopyalayın. Dosya adının, örneğin, fotograf.jpg olduğunu varsayalım.
• index.html dosyasında, görselin görünmesini istediğiniz yere şu satırı ekleyin: <img src="fotograf.jpg" alt="Kısa açıklama metni">. Dosyayı kaydedip tarayıcıda yenileyin (genellikle F5 tuşu veya adres çubuğundaki yenile simgesi ile); görselin sayfada göründüğünü kontrol edin.
• İsterseniz görseli de bir bağlantı hâline getirebilirsiniz: <a href="hakkimizda.html"><img src="fotograf.jpg" alt="Kısa açıklama metni"></a>. Bu şekilde görsele tıklandığında da hakkimizda.html sayfasına gidilir.
• Son olarak, farklı bir web sitesine bağlantı vermeyi de deneyin. Bunun için href değerine tam adresi (örneğin https:// ile başlayan bir bağlantı) yazmanız gerekir; kendi dosyalarınıza bağlantı verirken sadece dosya adını yazmanız yeterlidir.

Sık karşılaşılan sorunlar

Mini görev

Şimdi öğrendiklerinizi pekiştirmek için küçük bir görev yapın: üç sayfalık basit bir site taslağı oluşturun. Sayfalar index.html, hakkimizda.html ve iletisim.html olsun ve her sayfada diğer iki sayfaya giden bağlantılar bulunsun; böylece hangi sayfada olursanız olun diğer ikisine kolayca geçebilesiniz. Ayrıca en az bir sayfaya bir görsel ekleyin ve bu görsele uygun bir alt metni yazın. Aşağıdaki listeyi kontrol ederek görevi tamamlayıp tamamlamadığınızı kendiniz denetleyebilirsiniz.

• Üç ayrı HTML dosyası oluşturuldu ve hepsi aynı klasörde duruyor.
• Her sayfada, diğer iki sayfaya giden en az birer bağlantı var.
• Bağlantılara tıklandığında doğru sayfa açılıyor, hata sayfası çıkmıyor.
• En az bir görsel eklendi ve tarayıcıda düzgün görünüyor.
• Eklenen görselin alt metni, görseli anlamlı biçimde açıklıyor.
• index.html dosyasından başlayarak tüm sayfalar arasında geri dönmeden gezinebiliyorsunuz.

Kendini sına

1) Bir metni tıklanabilir bağlantı hâline getirmek için hangi etiket kullanılır?

2) Bir bağlantının gideceği adresi belirten özelliğin (attribute) adı nedir?

3) Bir sayfaya görsel eklemek için kullanılan etiketin adı nedir ve bu etiketin kapanış etiketi var mıdır?

4) Görsele eklenen alt metninin (alt) amacı nedir?

5) Kendi klasörünüzdeki bir dosyaya bağlantı verirken href değerine ne yazmanız yeterlidir; internetteki başka bir siteye bağlantı vermekten farkı nedir?

Cevaplar

• 1) <a> (anchor) etiketi kullanılır.
• 2) href özelliği, gidilecek adresi belirtir.
• 3) <img> etiketi kullanılır ve tek başına yazılır, kapanış etiketine ihtiyaç duymaz.
• 4) alt metni, görsel yüklenemediğinde açıklayıcı bir yazı gösterir ve ekran okuyucu kullanan kişiler için görselin içeriğini tarif eder.
• 5) Kendi klasörünüzdeki bir dosyaya bağlantı verirken sadece dosya adını yazmak yeterlidir; başka bir siteye bağlantı verirken ise https:// ile başlayan tam adresi yazmanız gerekir.

Not: Tarayıcı ve işletim sistemine göre dosya açma, kaydetme ve yenileme adımlarının görünümü küçük farklılıklar gösterebilir; kullandığınız programın arayüzü burada anlatılandan biraz farklı görünebilir, temel mantık aynı kalır.