Grafik, resim, ses vb. nesneleri web sayfasına koymak için, farklı şirketler farklı tag'lar yarattılar. Örneğin, Microsoft video ve audio için DYNSRC tagını, Netscape karma nesneler için EMBED tagını, Sun ise executable kodlar için APP ve APPLET taglarını yarattı. Bunların her birisi, kendi tarayıcılarında iyi çalışıyor. Ama farklı tarayıcılar bu tagları algılamayabiliyor. Bu nedenle, W3 Consortium'u bunları standart bir hale getirebilmek amacıyla OBJECT tagını önerdi.

IMG

Object öğesinden önce, yaygın olarak kullanılan IMG tagını ele alalım.

Digital olarak saklanacak resim(image)ler için çok sayıda kayıt türü (format) vardır. Ama web sunucuları ve tarayıcıları bunların küçük bir alt sınıfını algılar. Bu nedenle, farklı formatta kaydedilen image'lerin, web'in kullandığı formatlara dönüştürülmesi gerekir. Piyasada bu işi yapan çok sayıda program vardır.

Bir çok web sunucusu ve tarayıcısı aşağıdaki formatları algılar:

GIF (Graphics Interchange Format)

CompuServe şirketi tarafından, grafiklerin download edilebilmesini kolaylaştırmak amacıyla 1994 yılında hazırlanmış bir grafik formatıdır. 256 rengi destekler. Transfer edildiğinde, orijinali aynen korunur. Özellikle aynı rengi taşıyan büyük resimler için ideal bir kayıt şeklidir. Bu formatta kaydedilen resimler .gif ekini alır.

JPEG (Photographic Experts Group)

Doğayı gerçek renkleriyle ya da grinin tonlarıyla görüntüleyen resimleri sıkıştırılmış digital kayıtlar biçiminde tutar. Doğa fotoğrafları ve resimlerde olduğu gibi yumuşak hatlı geçişlere sahip image'ler için idealdir. Ama şekil, grafik, karikatür gibi keskin hatlı image'lerde JPEG formatı yerine GIF formatı tercih edilmelidir. JPEG formatındaki kayıtlar .jpeg ya da .jpg uzantısını alırlar.

PNG (Portable Network Graphics)

1995 yılında, internet üzerinde kendi aralarında işbirliği yapan bir gönüllü grup tarafından geliştirilmiş serbest lisanslı bir formattır. Büyük ölçüde GIF formatını iyileştirmiştir. Etkinliği ve ücretsiz oluşu nedeniyle, bir çok web sunucusu ve tarayıcısı GIF formatı yerine PNG formatını kullanmaya başlamıştır. Yakın zamanda GIF formatını piyasadan sileceği umuluyor. PNG formatındaki kayıtlar .pnguzantısını alırlar.

Örneğin, bir zambak resmini "zambak.gif" adıyla kaydetmiş isek, bunu web sayfasına almak için,

kodu yazılır. Burada IMG "image" sözcüğünün, SRC ise "source" sözcüğünün kısaltılmışıdır. <IMG> tagı < /IMG > biçiminde kapatmayı gerektirmez. SRC parametresi (nitelemesi) daima "source'un bulunduğu URL yi gösteren değeri alır.

Tarayıcı gösterilen SRC yi açamadığında, IMG tagı içine alternatif text konulabilir. Bu iş ALT nitelemesiyle yapılır:

Image'in düşey konumlandırılması

Image, bir karakter gibi algılanır. Dolayısıyla, hangi satırın içindeyse, o satırın alt kenarını (baseline) hizalar. Dolayısıyla, bu satır, üst satırdan image yüksekliği kadar ayrılır. Bu default hal her zaman sayfa tasarımında uygun olmayacağından, tasarımcı image'i sayfanın istediği yerine konuşlandırabilir.

Düşey konuşlandırma için ALIGN parametresine aşağıdaki değerler verilebilir.

Bunların işlevleri şöyledir:

ALIGN=bottom

Image'in ait olduğu satırın taban çizgisini (baseline) image'in alt kenarına hizalar (ki bu default olanıdır).

ALIGN=baseline

Image'in ait olduğu satırın taban çizgisini (baseline) image'in alt kenarına hizalar. ALIGN=bottom ile aynıdır.

ALIGN=absbottom

Image'in ait olduğu satırın içerdiği öğelerin en alt çizgisini image'in alt kenarına hizalar.

ALIGN=middle

Image'in ait olduğu satırın taban çizgisini image'in ortasına hizalar.

ALIGN=absmiddle

Image'in ait olduğu satırın orta çizgisini image'in ortasına hizalar.

ALIGN=top

Image'in ait olduğu satırın içerdiği öğelerin en üst çizgisini image'in üst kenarına hizalar.

ALIGN=texttop

Image'in ait olduğu satırın içerdiği textin en üst çizgisini image'in üst kenarına hizalar.

Satırda başka image yoksa, top ile texttop değerleri aynı işlevi görür.

Bazı tarayıcılar yalnızca üç temel değeri (bottom, middle, top) algılar.

Yatay Hizalama

Image'in sola ya da sağa yanaşık olması için, sırasıyla,

kodları yazılır. Bir objeyi ortalamak için, bazı tarayıcılar

damgasını kabul eder. Ama genel kural

yazmaktır.

Text Akışını Denetlemek

Image çevresinde textin nasıl akacağı, BR damgasının parametresi olan CLEAR in aldığı left , right ve all değerleriyle belirlenir.

kodu, resmi sola yanaşık yerleştirir ve o satırın bulunduğu paragraf resmin sağında kalan boşluğu doldurarak akar. Eğer, resmin sağını boşaltıp, metnin resmin altından itibaren yerleşmesini istiyorsak, söz konusu metnin başına

kodlarını, sağa yanaşık resimlerin sol yanını boşaltmak için, söz konusu metnin başına

kodlarını koymalıyız. Resimlerin her iki yanını boşaltmak için, söz konusu metnin başına

kodlarını yazabiliriz.

Image'in Boyutlarını Belirleme

Bir image'in web sayfasındaki genişliğini ve yüksekliğini WIDTH ve HEIGHT parametreleri ile belirleyebiliriz. Örneğin,

kodları, çağrılan resmin genişliğinin (yatay uzunluk) 300 pixel ve yüksekliğinin (düşey uzunluk) 100 pixel olmasını sağlar. Resmin aslının boyutları ne olursa olsun, burada verilen ölçülere uyar. Ancak bazı tarayıcılar bu özeliğe sahip değildir. Onlar, resmi asıl boyutlarıyla gösteririler. Resimlere yeni boyut verirken, uygun oranlar seçilmezse, resim deforme olabilir.

Resmin etrafında bir çerçeve isteniyorsa BORDER nitelemesi kullanılır. Buna verilen sayısal değer, pixel cinsinden çerçevenin kalınlığını belirler.

Resim ile text arasındaki boşluk HSPACE ve VSPACE nitelemeleriyle belirlenir. Örneğin, aşağıdaki kodlar, resmin boyutunu, çerçevenin kalınlığını ve textten uzaklığını, pixel cinsinden belirlemektedir:

Tıklanabilir Image

Bazı resimler ancak kullanıcı isterse görünsün istenebilir. Örneğin, sunucuya yavaş bir modemle bağlı bir istemci makinanın, büyük boyutlu bir resmi görüntülemesi zaman alıcı bir iştir. Üstelik bu resim kullanıcının o anda istemeyebileceği bir nesne de olabilir. Bu durumlarda, kullanıcıya seçme şansı vermek uygun olur. Bunun için, esas resme ANCHOR yapmak yetecektir. Bunun basit bir yolu,

biçiminde bir hypertext link yapmaktır. Kullanıcıya daha iyi bir fikir verebilmek için, esas resmin yerine, onun bir minyatürünü koymak da mümküntür:

Web sayfasına konulacak reim, grafik, ses, alt program gibi nesneler için bir standart yöntem yaratmak amacıyla W3 Consortium'u tarafından önerilen bir HTML tagı'dır.

Örneğin "zambak.gif" adlı resmi konuşlandırmak için, en basit biçimiyle

kodları yazılır. Ama istenirse nesnenin konumu ALIGN nitelemesiyle, textten uzaklığı VSPACE, HSPACE nitelemeleriyle, büyüklüğü WIDTH, HEIGHT nitelemeleriyle, kenar çizgisinin kalınlığı BORDER nitelemesiyle belirlenebilir.

Bunlara ek olarak, OBJECT tag'ı, tarayıcı imag'i açamadığında yapılacak işi belirleyen alternatif HTML kodlarını da içerebilir. Örneğin,

kodları yazıldığında, "zambak.gif"i açamayan tarayıcılarda

alternatif yazısı görünecektir.

İstenirse OBJECT tagı içine başka kodlar da konulabilir. Aşağıdaki örnek bir listenin OBJECT tagı içine alternatif olarak yerleşebildiğini göstermektedir. Senaryoyu şöyle düzenleyelim: "diyagram.gif" adlı nesne bir aracın harekete geçmeden önce sürücünün yapacağı işleri sıralı şemalarla anlatıyor olsun. Diyagramı açamayan bir tarayıcıda, şemalar yerine onları text olarak anlatan bir listenin gelmesi uygun olur. Bunu şöyle yapabiliriz:

Bu iş IMG tagı içinde yapılamaz. Orada şöyle bir yol izlenebilir: Yukarıda yazılı olan alternatif liste bir html dökümanı olarak hazırlanabilir, IMG tagı içinde bu döküman ALT olarak gösterilebilir. Örneğin, bu listeye "alternate.html" dersek,

kodları yazılabilir.