Oyunlar Teorisine Giriş

Bu bölümde web sayfaların tasarımsal yönünü ortaya çıkarmak için en çok kullanılan ortamların başında gelen görselleri inceleyeceğiz.

Bir web sayfasına görsel eklemek için etiketi kullanılır. Boş bir HTML öğesi olduğundan kapanış etiketi yoktur. Söz dizimi şu şekildedir:

src

Görselin bulunduğu konumu belirtmek için kullanılan özniteliktir. Görselin adresini yazarken şu örneklerden faydalanabilirsiniz:

• Eğer görsel html sayfasıyla aynı klasörde ise sadece görselin adresini yazmanız yeterli olacaktır: src="resim.png"
• Eğer görsel farklı bir klasörde ise görselin mutlak adresini veya göreceli adresini kullanabilirsiniz.
  • Mutlak adres: src="/klasor1/klasor2/resim.png"
  • Göreceli adres: src="../klasor1/resim.png"
•  Görsel başka bir web sitesinde ise görselin mutlak adresini yazmanız gerekir: src="http://www.websitesi.com/klasor/resim.png"

alt

Görsel yüklenemediğinde ekranda görüntülenecek metni belirtmek için kullanılan özniteliktir. Arama motorları, ekran okuyucular ve tarayıcılar için ek bilgi sağlar. Kullanımı zorunludur!

Görseli Boyutlandırmak

Görselleri boyutlandırmak için width (genişlik) ve height (yükselik) öznitelikleri kullanılır. 

Alternatif olarak görselleri boyutlandırmak için CSS kullanabilirsiniz. style özniteliğini kullanarak görseli boyutlandırmak için img etiketini şu şekilde yazabilirsiniz:

Dikkat!

• Web ortamında sadece .jpg, .png, .gif ve .svg kullanın. 
• Resimlerin yüklenmesi vakit alabilir. Büyük boyutlu resimler daha yavaş yüklenir.
• Çözünürlüğü yüksek olan resimlerin boyutlarını Photoshop vb. grafik editörleri kullanarak küçültün.
• Gerekmedikçe sayfanıza resim eklemeyin. Resimler web sitelerinin yavaş açılmasına sebep olur.

Görüntü Haritaları Oluşturmak

Görüntü haritalarını kullanarak, bir görsele tıklanabilir alanlar ekleyebilirsiniz. Görüntü haritaları, etkileşimli görseller ve infografikler oluşturmak için idealdir.

Görsle haritaları oluşturmak için map ve area etiketleri kullanılır. Söz dizimi ve kullanımı şu şekildedir:

Picture Etiketinin Kullanımı

HTML5 ile birlikte web geliştiricilerin hayatına giren picture etiketi, img etiketinden farklı olarak farklı ekran boyutları için özelleştirilmiş görsel setleri oluşturmak için kullanılır. picture etiketi ile aynı görselin farklı kaynakları tanımlanabilir. Web tarayıcıları belirtilen kaynaklardan en uygun olanı seçer ve onu görüntüler. Söz dizimi şu şekildedir: