HTML’de görseller

Başlangıçta Web sadece metinden oluşuyordu – ve gerçekten oldukça sıkıcıydı. Neyse ki, web sayfalarına resim (ve diğer daha ilginç içerik türleri) yerleştirme yeteneğinin eklenmesi çok uzun sürmedi. Göz önünde bulundurulması gereken başka türler olsa da, multimedyaya <img> gibi basit bir görüntüyü web sayfasına yerleştiren bir öğe ile başlamak mantıklıdır. Bu makalede, HTML’de görsellere, temel bilgiler de dahil olmak üzere, bakacağız. <figure> öğesinin nasıl kullanılacağına ve bu öğeye altyazılarla açıklama eklemeye, CSS arka plan resimleriyle nasıl ilişki kuracağımıza bakacağız.

Bir web sayfasına görsel nasıl ekleriz?

Bir web sayfasına basit bir resim koymak için <img> öğesini kullanırız. Bu öğe, kullanılabilmesi için en az bir öznitelik gerektiren (kaynak) boş bir öğedir (metin içeriği veya kapanış etiketi olmadığı anlamına gelir ). Kaynak olarak <a> ile aynı şekilde, göreli veya mutlak URL eklenebilir.

Not : Devam etmeden önce göreli ve mutlak URL’lerde hafızanızı yenilemek için URL’ler ve yollar hakkındaki yazımızı okumalısınız.

Örneğin, resminiz dinosaur.jpg olarak adlandırılıyorsa ve HTML sayfanızla aynı dizinde bulunuyorsa, resmi şu şekilde sayfanıza gömebilirsiniz:

<img src="dinosaur.jpg">

Resim, HTML sayfasıyla aynı dizinde bulunan images alt dizinindeyse, şu şekilde gömerdiniz:

<img src="images/dinosaur.jpg">

Not : Arama motorları ayrıca resim dosya adlarını da okur ve bunları SEO için sayar. Bu nedenle, resminize açıklayıcı bir dosya adı vermelisiniz; dinosaur.jpg kullanmak img835.png‘den daha iyidir .

Mutlak URL’sini kullanarak da resmi gömebilirsiniz, örneğin:

<img src="https://www.example.com/images/dinosaur.jpg">

Ancak bu anlamsız olur, çünkü tarayıcının daha fazla çalışmasını sağlar – IP adresini tekrar DNS sunucusundan arar, vb. Web sitenizin resimlerini neredeyse her zaman HTML’nizle aynı sunucuda tutarsınız.

Uyarı: Çoğu görselin telif hakkı saklıdır. Aşağıdaki durumlar dışında web sayfanızda bir resim görüntülemeyin:

• Görüntünün sahibi sizsinizdir.
• Görsel sahibinden açık ve yazılı izin almışsınızdır.
• Görüntünün aslında kamu malı olduğuna dair yeterli kanıtınız vardır.

Telif hakkı ihlalleri yasa ve etik dışıdır. Buna ek olarak, asla kendi siteniz dışında başka bir siteye işaret eden -izniniz yoksa- bir src bağlantısı oluşturmamalısınız. Buna “hotlink” denir. Başka bir sunucudan bant genişliği çalmak da yasa dışıdır. Ayrıca sayfanızı yavaşlatır ve görüntünün kaldırılıp kaldırılmayacağı veya utanç verici bir şeyle değiştirilip değiştirilmeyeceği konusunda size hiçbir kontrol bırakmaz.

Yukarıdaki kodumuz bize aşağıdaki sonucu verecektir:

Not: <img> ve <video> gibi öğelere bazen değiştirilen öğeler olarak atıfta bulunulur . Bunun nedeni, öğenin içeriğinin ve boyutunun, öğenin içeriği tarafından değil, harici bir kaynak (görüntü veya video dosyası gibi) tarafından tanımlanmasıdır. 

Alternatif metin

Bakacağımız bir sonraki özellik alt özelliği. Görüntünün görülemediği/gösterilemediği veya yavaş internet bağlantısı nedeniyle oluşturulmasının uzun sürdüğü durumlarda alt için yazacağımız değer için görüntünün metinsel bir açıklamasıdır. Örneğin, yukarıdaki kodumuzu şu şekilde değiştirelim:

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth">

alt metninizi test etmenin en kolay yolu, dosya adınızı bilerek yanlış yazmaktır. Örneğin, resmimizin adını dinosooooor.jpg yazalım; tarayıcı resmi göstermez ve bunun yerine alternatif metni görüntüler:

Peki, neden alt metin görüyor veya ihtiyaç duyuyorsunuz? Birkaç nedenden dolayı kullanışlı olabilir:

• Kullanıcı görme engellidir ve bir ekran okuyucu ile Web’de dolaşıyordur. Aslında, görüntüleri açıklamak için alternatif metnin mevcut olması çoğu kullanıcı için yararlıdır.
• Yukarıda açıklandığı gibi, dosyanın veya yol adının yazılışı yanlış olabilir.
• Tarayıcı resim türünü desteklemiyor olabilir. Bazı insanlar hala salt metin tarayıcıları kullanıyor olabilir.
• Arama motorlarının kullanması için metin sağlamak isteyebilirsiniz. Arama motorları alternatif metni arama sorgularıyla eşleştirebilir.
• Kullanıcılar, veri aktarım hacmini ve dikkat dağıtıcı unsurları azaltmak için görüntüleri kapatmıştır. Bu, özellikle cep telefonlarında ve bant genişliğinin sınırlı veya pahalı olduğu ülkelerde yaygındır.

alt özelliğinizin içine tam olarak ne yazmalısınız? Bu görüntünün neden orada olduğuna bağlı. Başka bir deyişle, resminiz görünmezse ne kaybedersiniz:

• Dekorasyon. Dekoratif resimler için CSS arka plan resimleri kullanmalısınız, ancak HTML kullanmanız gerekiyorsa boş bir alt="" kullanın. Görsel içeriğin bir parçası değilse, bir ekran okuyucu onu okumak için zaman kaybetmemelidir.
• İçerik. Görseliniz önemli bilgiler sağlıyorsa, aynı bilgiyi kısa bir alt metinde veya daha iyisi herkesin görebileceği ana metinde verin. Gereksiz alt metin yazmayın. Ana içerikte tüm paragrafların iki kez yazılması gören bir kullanıcı için ne kadar can sıkıcı olurdu? Resim ana metin gövdesi tarafından yeterince tanımlanıyorsa, sadece alt="" kullanın.
• Bağlantı. <a> etiketlerin içine bir resim koysanız da bir resmi bağlantıya dönüştürmek için yine de erişilebilir bağlantı metni sağlamanız gerekir. Bu gibi durumlarda, metni <a> öğesinin içine veya görüntünün alt özniteliğinin içine yazabilirsiniz – hangisi sizin durumunuzda en iyi sonuç verirse.
• Metin. Metninizi resimlere koymamalısınız. Örneğin, ana başlığınızın alt gölgeye ihtiyacı varsa, bunun için metni bir görüntüye yerleştirmek yerine CSS kullanın. Ancak, bunu yapmaktan gerçekten kaçınamıyorsanız, metni alt niteliğin içinde de sağlamalısınız.

Aslında olay, görüntüler görülemese bile kullanılabilir bir deneyim sunmaktır. Bu, tüm kullanıcıların içeriğin hiçbir kısmını kaçırmamasını sağlar. Tarayıcınızdaki görüntüleri kapatmayı deneyin ve sayfanızın nasıl göründüğüne bakın. Resimler görülmediğinde alternatif metnin ne kadar yararlı olduğunu anlayacaksınız.

Genişlik ve yükseklik

Resminizin genişliğini ve yüksekliğini belirtmek için width ve height niteliklerini kullanabilirsiniz. Resminizin genişliğini ve yüksekliğini çeşitli şekillerde bulabilirsiniz. Örneğin Mac’te, görüntü dosyası için bilgi ekranını açmak içinCmd+ Ituşlarını kullanabilirsiniz. Örneğimize dönersek, şunu yapabiliriz:

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
     width="400"
     height="341">

Bu, normal şartlar altında ekranda fazla bir fark yaratmaz. Ancak resim görüntülenmiyorsa, örneğin kullanıcı sayfaya yeni gittiyse ve resim henüz yüklenmediyse, tarayıcının resmin görünmesi için bir boşluk bıraktığını fark edeceksiniz:

Bu, sayfanın daha hızlı ve daha sorunsuz yüklenmesiyle sonuçlanan iyi bir şeydir.

Ancak, HTML niteliklerini kullanarak resimlerinizin boyutunu değiştirmemelisiniz. Görüntü boyutunu çok büyük ayarlarsanız, bulanık veya çok küçük görünen görüntüler elde edersiniz. Böylece kullanıcının ihtiyaçlarına uymayan bir görüntüyü indirerek bant genişliğini boşa harcarsınız. En boy oranını doğru şekilde korumazsanız da görüntü bozuk görünebilir. Resminizi web sayfanıza koymadan önce doğru boyuta yerleştirmek için bir resim düzenleyici kullanmalısınız.

Not : Bir görüntünün boyutunu değiştirmeniz gerekiyorsa, bunun yerine CSS kullanmalısınız.

Resim başlıkları

Bağlantılarda olduğu gibi, title niteliğini de ayrıca ekleyebilirsiniz. Bu şekilde resimlere destekleyici bilgileri sağlayabilirsiniz. Örneğimizde şunu yapabiliriz:

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
     width="400"
     height="341"
     title="A T-Rex on display in the Manchester University Museum">

Böylece tıpkı bağlantı başlıklarında olduğu gibi fareyle üzerine gelindiğinde bir metin görürüz:

Ancak, bu kullanım önerilmez — title bir dizi erişilebilirlik sorunu getirir. Bunun temel nedeni, ekran okuyucu desteğinin çok tahmin edilemez olması ve fareyle gezinmediğiniz sürece çoğu tarayıcının bunu göstermemesidir (örneğin, klavye kullanıcılarına erişim sağlamaz).

Bu tür destekleyici bilgileri görsele eklemek yerine ana makale metnine dahil etmek daha iyidir.

Şekil başlıklarıyla resimlere açıklama ekleme

Altyazılardan bahsetmişken, resminize uygun bir açıklama eklemenin birkaç yolu bulunur. Örneğin:

<div class="figure">
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">

  <p>A T-Rex on display in the Manchester University Museum.</p>
</div>

Yukarıdaki kod ihtiyacınız olan içeriği içerir ve CSS kullanılarak güzel bir şekilde şekillendirilebilir. Ancak burada bir sorun var: görüntüyü ve açıklamayı anlamsal olarak birbirine bağlayan hiçbir şey yok. Örneğin, 50 resminiz ve açıklamanız olduğunda, hangi resimle hangi açıklamayı eşleştireceğiz? Bu özellikle ekran okuyucular için bir sorun olacaktır.

Daha iyi bir çözüm, HTML5 <figure> ve <figcaption> öğelerini kullanmak olacaktır. Bunlar tam olarak bu amaç için oluşturulmuş etiketlerdir: resimler için anlamsal bir yapı sağlamak ve resmi açık bir şekilde açıklamasıyla ilişkilendirmek. Yukarıdaki örneğimiz şu şekilde yeniden yazılabilir:

<figure>
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">

  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>

<figcaption> elemanı tarayıcıya <figure> elemanının içeriğini söyler.

Not : Erişilebilirlik açısından, açıklama yazıları ve alt metinler farklı rollere sahiptir. Altyazılar, görüntüyü görebilen kişilere bile yarar sağlarken, alt metin, mevcut olmayan bir görüntüyle aynı işlevi sağlar. Bu nedenle, resim yazıları ve alt metin aynı şeyi söylememelidir, çünkü ikisi de resim kaybolduğunda ortaya çıkar. Tarayıcınızda görüntüleri kapatmayı deneyin ve nasıl göründüğüne bakın.

Bir figür her zaman bir resim olmak zorunda değildir. Aşağıdakileri sağlayan bağımsız bir içerik türüdür:

• Anlatmak istediğinizi kompakt, kavraması kolay bir şekilde ifade eder.
• Sayfanın akışında birkaç yere uyabilir.
• Ana metni destekleyen temel bilgileri sağlar.

Bir şekil, birkaç resim, bir kod parçacığı, ses, video, denklemler, bir tablo veya başka bir şey olabilir.

CSS arka plan resimleri

Görüntüleri web sayfalarına gömmek için CSS’yi de kullanabilirsiniz (ve JavaScript’i de, ancak bu tamamen başka bir hikaye). CSS background-image özelliği ve diğer background-*özellikleri, arka plan resmi yerleşimini kontrol etmek için kullanılır. Örneğin, sayfanızdaki her paragrafa bir arka plan resmi yerleştirmek için şunu yapabilirsiniz:

p {
  background-image: url("images/dinosaur.jpg");
}

Ortaya çıkan gömülü görselin HTML görsellerine göre konumlandırılması ve kontrol edilmesi bu şekilde daha kolay olacaktır. Öyleyse neden HTML görselleri ile uğraşasınız? Yukarıda belirtildiği gibi, CSS arka plan resimleri yalnızca dekorasyon amaçlıdır. Sadece görünümü geliştirmek için sayfanıza eklemek istiyorsanız, sorun değil. Yine de, bu tür görüntülerin hiçbir semantik anlamı yoktur. Metin eşdeğerleri olamaz, ekran okuyucular tarafından görülmezler vb.. İşte burası HTML görsellerinin parladığı yerdir.

Özetlemek gerekirse: Bir görselin içeriğiniz açısından bir anlamı varsa HTML görseli kullanmalısınız. Bir görsel tamamen dekorasyon ise, CSS arka plan görselleri kullanmalısınız.

Becerilerinizi test edin!

Bu makalenin sonuna geldiniz, ancak en önemli bilgiyi hatırlayabiliyor musunuz? 

Özet

Şimdilik bu kadar. Görselleri ve açıklamalarını ayrıntılı olarak ele aldık. Bir sonraki makalede, web sayfalarına video ve ses yerleştirmek için HTML’nin nasıl kullanılacağına bakacağız.