HTML ve CSS'ye Giriş (Bölüm 09): Web için Grafikler (01)

Bir grafik programında resimler kaydedilirken farklı grafik formatları sunulmaktadır. Ancak bir web sitesine resim eklenirken hangisini seçmelisiniz?



Bir web sitesinde bir resim göstermek istediğinizde, üç format arasından seçim yapabilirsiniz.

• GIF

• JPEG

• PNG

Ancak hangi amaç için hangi formattan seçmelisiniz? Fotoğraflar için GIF mi yoksa PNG mi tercih edilmeli? İlk olarak, her bir formatın yeteneklerine kısa bir genel bakış yapalım.

Bu küçük genel bakış, formatların farklı özelliklerini zaten göstermektedir. Bu nedenle belirli formatların diğerlerine göre belirli kullanım amaçları için daha uygun olduğu şaşırtıcı değildir. İşte tam bu noktada aşağıdaki bölüm devreye girer. Hangi formattın ne zaman kullanılması gerektiği gösterilecektir.

Fotoğraflar

Fotoğraflar için kesinlikle JPEG tercih edilir. Çünkü burada resimler oldukça iyi sıkıştırılabilir ve kalite değişken olarak seçilebilir. Kalite ve sıkıştırma oranı arasında doğru denge bulunur.

Ekran Görüntüleri/Diyagramlar

Bu durumda PNG formatı en iyisidir. PNG ayrıca teknik çizimler, planlar vb. için de ilginçtir. PNG, şeffaf alanlarla çalışılan resimlerde de kullanılabilir.

Yazı Tipleri/Logolar

Logo tasarımınızda metin veya genel olarak yazı göstermek istiyorsanız, GIF veya PNG kullanmalısınız. Ancak daha iyi performans nedeniyle genellikle PNG tercih edilir. JPEG, yazıları göstermede uygun değildir, çünkü kenarlar belirsiz şekilde görüntülenir.

Şeffaflık

Şeffaf alanlarla ilgili ise, JPEG önceden elenir. Kalan seçenekler GIF ve PNG'dir. Ancak şeffaflığa bağlı olarak hangi formatı kullanmalısınız? GIF temel olarak şeffaflıkla başa çıkabilir, ancak sonuçlar genellikle belirsiz olur. Bir piksel GIF formatında ya tamamen görünür ya da tamamen şeffaftır. PNG'de bu fenomen meydana gelmez. Bu format daha ince şeffaflık sonuçlarına ulaşabilmek için ek bir alfa kanalına sahiptir.

Resimleri Entegre Etme

Grafikler img öğesi aracılığıyla entegre edilebilir. (Lütfen unutmayın ki resimler artık genellikle CSS aracılığıyla entegre edilmektedir. CSS hakkında detaylı bilgiler tabii ki devam edecektir. Gösterilen HTML yöntemi ise tamamen standart uyumludur ve HTML5'te de rahatlıkla kullanılabilir.)

<img src="logo.png" alt="PSD-Tutorials.de" />

img bir Standalone öğesidir. İlgili öznitelikler aracılığıyla resmi daha fazla açıklayabilir. En önemli öznitelik kesinlikle src'dir. Çünkü buradan resmin eklenmesi gerektiği belirtilir. Gösterilen örnekte, logo.png grafiğinin, img öğesinin tanımlandığı HTML dosyası ile aynı dizinde olduğunu varsayıyorum.

Resimlerin gerçekten gösterilmesi için yolları doğru bir şekilde belirtmek gerekmektedir. HTML, referanslama için çeşitli olanaklar sunar.

• Mutlak yollar

• Temel adresle ilişkili mutlak yol bilgileri

• Temel adresle ilişkili göreli yol bilgileri

Öncelikle mutlak yollara bakalım. Bu yöntemi genellikle, resmin kendi sunucunuzda olmadığı durumlarda kullanırsınız. Diyelim ki, PSD-Tutorials.de sitesinden tanıdık bir kelebeği web sitenize eklemek istiyorsunuz. Bu durumda, teorik olarak, direkt olarak olduğu sunucudan yükleyebilirsiniz. İlk olarak resmin yolunu belirleyin. En kolayı, resmi tarayıcıda sağ tıklayarak Bağlantıyı Kopyala'yı seçmektir.

Anahtarınızda yüklendiği için tanımlanmış olabilecek şey, sonunda şöyle görünmelidir:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Bu, resmin tam adresidir. Bu bilgi, resmi eklemek için yeterlidir.

<img src=" http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg" alt="PSD-Tutorials.de" />

Yani, src özniteliğine resmin tam yolunu atıyorsunuz.

Ancak bu mutlak yolların sorunu, gömülü içeriği gerçekten kontrol edememektir. Dolayısıyla, referans verdiğiniz grafiği sunucudan silinirse veya başka bir dizine taşınırsa bir görüntü hatası oluşur.





Bu nedenle bu mutlak referanslama gerçekten istisna olmalıdır.

Temel Adrese Göre Mutlak Yol Tanımları

Bu seçenek, grafik dosyasının HTML dosyasıyla aynı makinede/sunucuda olduğu ve geçerli protokol üzerinden erişilebilir olduğu durumlarda uygun olabilir. Bu karmaşık görünebilir, ancak değildir.

Bir örnek:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Bu, tam adresi temsil eder. Bir sonraki kısım ise mutlak yol tanımıdır.

wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Bu mutlak yol tanımı, http://4eck-media.de temel adresine göre göreceli olarak belirlenir.

Temel Adrese Göre Göreceli Yol Tanımları

Şimdi tanıtılan bu seçenek kesinlikle en yaygın olanıdır. Her zaman geçerli yolu referans alır ve en sonunda ona göre adresleme yapar. Birkaç örnek daha vereyim. Diyelim ki index.htm adında bir dosyanız var ve içine bir resim eklemek istiyorsunuz. Aynı seviyede images adında bir dizin var ve bu dizinde ilgili resim bulunmaktadır.

index.htm
images
--logo.png

Bu durumda, src özniteliğinde çağrı şu şekilde olur:

src="images/logo.png"

projekt
--images
-----logo.png
--archiv
-----index.htm

Bu durumda, index.htm, logo.png resminin bir dizin altında bulunmaktadır.

src="../images/logo.png"

images dizinine gidip logo.png görüntüle.

projekt
--images
----logo.png
----2013
------januar
--------index.htm

Söz dizimi aşağıdaki gibi görünmektedir:

src="../../images/logo.png"

logo.png resmi, index.htm'in iki seviye üstünde images dizininde bulunmaktadır.

Göreceli yol tanımlarının avantajı esnekliğidir. Projeyi yerel olarak geliştirebilir ve ardından "gerçek" bir sunucuya kopyalayabilirsiniz. Yollar aynen doğru olmaya devam eder.