Bücdet - Bilginin Sayfası

Resim Yerleşimi

Web sayfaları sadece metinlerden oluşmuyor elbette. Bir web sayfasını göz alıcı hale getirmek için resim, fotoğraf, animasyon, ses efekti, müzik gibi çeşitli donatılar kullanılır. Tabi ben burada nasıl resim, animasyon, foto kompozisyon, efekt yapılacağını göstermeyeceğim. HTML'in konusu, hazırlanmış bu donatıları web sayfalarında sergilemekle ilgili.

Resim Dosyaları

İnternette veri akışı çok yavaş olduğu için, sayfamızı son kalite resim ve fotoğraflarla doldurmamız olanaksızdır, bu nedenle resim kullanırken, resim dosyalarının kapladığı alanı da dikkate almak zorundasınız. Web tasarımcıları genellikle ellerindeki resim dosyalarını (bmp vb.) sıkıştırarak gif veya jpg dosyaları haline getirirler. Gif sıkıştırma yöntemiyle resimin kalitesinden taviz verilmez, isterseniz renk çeşidini azaltabilirsiniz. Jpg sıkıştırma yönteminde ise resmin kalitesi sıkıştırılan alanla orantılı olarak düşer, özellikle çok renkli resimlerde jpg sıkıştırma yöntemi seçilmelidir. Ben az renkli (genellikle yazı veya logo) resimleri Adobe Photoshop ile "gif" dosyası haline getiriyorum. Çok renkli resimleri (genellikle fotoğraflar) ise JPEG Optimizer isimli yazılımla kalitesini ve kapladığı alanı dikkate alarak "jpg" dosyası haline getiriyorum.

Resim Dosyalarını Görüntüleme

HTML'de görüntüleri (resim, fotoğraf, animasyon vb.) sergilemek için <img> (image) kodundan ve src (source) parametresinden yararlanılır. Bir resmi göstermek istiyorsak, o resimin adresini, ismini ve kök ismini src="..." parametresiyle belirtmemiz gerekir. HTML kullanıcılarının resim dosyalarının kök isimlerini genellikle unuttuğu veya yanlış yazdığı sık görülen vakalardandır. (Bazen jpg yerine gif yazmak gibi.)

Üstteki uygulamada src="..." parametresine bir resim dosyası koydum. Bir dosyanın adresinin nasıl yazılacağını daha önceki derslerimizde görmüştük. Burada da aynı kural geçerlidir.

Resim Boyutları

Resimin boyutlarını belirtmezseniz, resim orijinal boyutlarıyla web sayfasında yer alır. Tabi width ve height parametreleriyle resimin boyutlarını da ayarlayabilirsiniz. Resimin en/boy oranının sabit olmasını istiyorsanız sadece width veya sadece height parametrelerini kullanın, HTML en/boy oranını sabit tutarak, belirtilmeyen boyutu ayarlar. Ama resimi deforme etme pahasına hem genişlik hem de boy ölçülerini piksel veya oran cinsinden yazdırabilirsiniz. Örneğin son uygulamadaki resimin genişliği 200 piksel, yüksekliği ise 315 pikseldir. Şimdi yapacağımız örnekle Cameron Diaz'ı biraz şişmanlaştıralım:

Resim dosyalarına link de koyabiriz. Bunun için <img> kodu <a href="...">...</a> kodunun arasına yazılır. Aşağıdaki uygulamada Camy'nin fotoğrafına tıklanıldığında, daha önce yaptığımız uygulamaya geçiliyor.

Resim Sınır Çizgisi

Dikkat ederseniz, link koyduğumuz zaman resimin kenarında koyu mavi bir sınır çizgisi oluştu. Bu sınır çizgisini yok etmek istiyorsanız, <img> koduna border parametresini "0" olarak atayacağız. Deneyelim:

Böylece o mavi kenarlıklardan kurtulmuş olduk. Tabi burada resimin tamamına link verdik. İstersek resim üzerinde belli alanlara ayrı linkler verebiliriz. Örneğin Camy'nin başına bir link koyarken, sol göğsüne başka bir link koyabiliriz. (Zevkli bir ders değil mi? İleri ki derslerde Camy'i ayrıntılı olarak inceleyeceğiz.:))

Resimlerin Farklı Bölgelerine Farklı Link Koyma

Şimdi tek resim üzerinde belirlenen alanlara link koymayı öğrenelim. Bunun için <img> koduna usemap="..." parametresini atayarak, resim üzerinde seçili yerleri belirten harita kullanmasını sağlarız. Bu harita aynı sayfada bulunuyorsa, adres yerine "#" işareti ve haritanın ismi yazılır. Eğer başka sayfadaysa o sayfanın ismi, "." işareti, kök ismi (html), "#" işareti ve haritanın ismi yazılır:

<img src="diaz.jpg" usemap="#harita">

veya,

<img src="diaz.jpg" usemap="denhtm73.html#harita">

İlk satırdaki kod, aynı sayfada bir harita tanımlamakta ve adının da "harita" olduğunu söylemektedir. İkinci satırdaki kod ise haritanın başka bir sayfada olduğunu, sayfanın isminin "denhtm73.html" olduğunu ve haritanın isminin de "harita" olduğunu belirtiyor.

Gelelim haritanın nasıl yapıldığına. Bu harita resimin belli bölgelerini tanımlamaya yarar, örneğin Camy'nin başını. Bu haritayı şöyle başlatırız: <map name="..."> Burada <map> kodu haritanın başlangıç kodu (</map> kodu ile de kapatılır), name="..." ise haritaya isim atayan parametredir. Buraya "camy" ismi koyarsanız, usemap="#camy" ile haritaya ulaşabilirsiniz.

Söz konusu bu harita atandığı rakam üzerinde bazı bölgeleri piksel değerleriyle belirtecektir. Bu alanlar <area> kodu ve coords="..." ve shape="..." parametreleri ile belirlenir. coords="..." parametresi resmin sol üst kesmini orijin kabul eden pozitif x,y düzlemini esas alan değerlerle belirlediğimiz alanın köşelerinin konumu yazılır. (Biraz aklınız karışmış olabilir, sabırla okumaya devam edin.) shape="..." parametresi ise belirlenecek alanın şeklini belirtir: dikdörtgense shape="rect", daireyse shape="circle", çokgense shape="poly" olarak yazılır. Eğer belirlenecek alan dikdörtgense, dikdörtgenin solüst köşesinin x,y değerlerini ve sağalt köşesinin x,y değerlerini piksel cinsinden yazarız: coords="x_solüst,y_solüst, x_sağalt, y_sağalt". Eğer alan bir daire ise, merkezinin x, y koordinatları ve yarı çapının uzunluğu yazılır: coords="x_merkez,y_merkez, yarıçap". Eğer alan bir çokgen veya yıldız ise, tüm köşeler sırasıyla x,y çiftleri halinde belirtilir.

Analitik geometrisi zayıf olanlar için anlaması biraz zor. Ama aşağıdaki örnekle anlamamız mümkün sanırım. Hedefimiz Camy'nin vücudunun çeşitli bölgelerine linkler koymak idi. Bunun için Camy'nin fotoğrafını usemap="#camy" parametresiyle camy isimli haritaya göndermede bulunacağız. Sonra <map name="camy">...</map> kodları arasına belirleyeceğimiz alanları yazacağız. Camy'nin bu fotoğrafı 200 piksel ene ve 315 piksel yüksekliğe sahip. Bunu aklımızda tutarak bölgeleri belirlemeye başlayalım.

Önce yüz bölgesini belirleyelim. Fotoğrafta Camy'nin güzel yüzünü kaplayan bir dikdörtgen düşünün ve bu dikdörtgenin 200x315'lik fotoğrafta solüst köşesinin ve sağalt köşesinin x,y değerlerini tahmin edelim. Böylece şu kod ortaya çıkar:

<area shape="rect" coords="57,42,98,107" href="denhtm76.html">

Bu kodla Camy'nin yüzünü kaplayan bir dikdörtgen şeklinde seçmiş olduk. Ve o dikdörtgen bölgeye fareyle tıkladığımızda href="denhtm76.html" parametresi sayesinde, ismi belirtilen sayfaya gitmiş olacağız. Bu koordinasyon noktalarındaki x,y değerlerini ilk denemede tutturamayabilirsiniz; yüzünü belirleyeceğim diye başka bir yerini belirleyebilirsiniz. Bu biraz alışkanlık meselesi. Photoshop'ın hızlı "lasso" kullancılarındansanız, sorun yok. Ama bilgisayara yeniysenin dört beş denemeye ihtiyacınız olabilir. Ayıptır söylemesi, ben bir bakışta belirledim bu rakamları.

Bu kadar anlatmak yeter, daha fazla anlatırsam zekânıza hakaret etmiş olacağım. Aşağıdaki uygulamayı gözden geçirin. Bu uygulamada Camy'nin yüzüne tıkladığınızda başka sayfaya, sol göğsüne tıkladığınızda başka sayfaya, etekliğine tıkladığınızda başka sayfaya gidiyorsunuz.

Anlaması ve anlatması biraz uzun sürüyor ama sonuç mükemmel. Düşünsenize, Cameron Diaz'ın sol göğsüne dünyada kaç kişi dokunabiliyor.:)

Dikkat ederseniz yavaş yavaş ileri düzeyde web tasarımcıların bildiği konuları öğrenmeye başlıyorsunuz. Son yaptığımız uygulamayla ilgili küçük bir eklemede daha bulunayım. Son uygulamada Camy'nin çeşitli bölgelerine <area href="..."> kod ve parametresiyle link koymayı sağladık. nohref parametresiyle tersini yapabilirdik. Önce tüm fotoğrafa <a href="..."> ile link koyar, sonra da bazı bölgelerde <area nohref="..."> kodu ve parametresini kullanarak linkten arınmasını sağlayabilirdik.

Önce Düşük Sonra Yüksek Kaliteli Resmi Yükleme

Web tasarımcıların sorunlarından bir tanesi de uzun yüklenen resimlerle, metinleri bir arada kullanmak. Web sayfası yüklenirken, kaliteli ve büyük resimlerin yüklenmesi o kadar uzun sürer ki bazen kullanıcıyı bezdirir. Bu nedenle başka bir taktik geliştirilmiştir. Sayfaya önce resmin kalitesi düşük bir dosyası yüklenir, sonra yavaş yavaş kaliteli resim yüklenmeye başlanır. Bu taktik artık pek kullanılmıyor, bu nedenle örnek vermiyorum.

Resim Dosyalarını Hizalama

<img> kodunun konumunu belirleyen parametreler aşağıda görünmektedir. Açıklamalarda alt seviye ile taban seviyenin aynı şey olmadığına dikkat edin. Resimler genellikle bu parametreler yerine genellikle görünmez tablolar kullanılarak konumlandırılır. Ama aynı satır veya paragrafları paylaşan küçük resimlerle, metinler yapacaksanız bu parametreler çok işinize yarayacaktır.

align="left"-Resmi metinin sol tarafına yerleştirir.

align="right"-Resmi metnin sağ tarafına yerleştirir.

align="top"-Satırdaki en yüksek donatının (yazı, resim vb.) üst seviyesini hizalayacak şekilde resmi yerleştirir.

align="texttop"-Satırdaki en yüksek yazının üst seviyesini hizalayacak şekilde resmi yerleştirir. (genellikle top ile aynı işlevi görür, ama her zaman değil)

align="middle"-Satırın taban seviyesini, resmin orta yükseklik seviyesine getirir.

align="absmiddle"-Satırın orta seviyesini, resmin orta yükseklik seviyesine getirir.

align="baselign"-Satırın taban seviyesini, resmin taban seviyesine getirir.

align="bottom"-baselign ile aynı işlevi görür.

align="absbottom"-Resmin alt seviyesini, satırın alt seviyesine getirir.

<html>
 <head>
 <title>Evrenin Evrimi</title>
 </head>
 <body>
 align="left" 
 <img src="yer.gif" align="left">Yeni galaksilerin, yıldızların ve kendi gezegenler sistemimizin oluşmasına çoğu zaman, evrenin, yıldızların ve yıldız sistemlerinin evrim süreci diye bakılır. Burada kullanılan “evrim” sözcüğü tabi ki, canlıların evrimindekinden farklı bir anlamdadır. Her iki durumda da bir “evrimleşme” vardır, ancak farklı bilimlerin çalışma alanlarına girerler. Canlıların evrimi biyolojik bilimlerin, evrenin ve evreni oluşturan birimlerin evrimi ise fiziksel bilimlerin inceleme konusudur. 
 align="right" 
 <img src="yer.gif" align="right">Evrenin evriminin en azından beş-on milyar yıl kadar önce başladığının kanıtları tartışma götürmez derecede açıktır. En çarpıcılarından biri de, uzak galaksilerin kaçış hızlarıdır. Evrenin bir bütün olarak genişlediği, ilk kez 1920’lerin sonunda ve 1930’ların başında Amerikalı astronom Edwin Hubble tarafından uzak yıldız ve galaksilerden gelen ışığın dalga boyundaki değişmelerin incelenmesiyle ortaya çıkarıldı (Hubble, 1929; Hubble ve Humason, 1931). Geriye doğru ekstrapole ederek astronomlar, genişlemenin 10 ila 20 milyar yıl kadar önce başladığını tahmin ediyorlar. 
 align="top" 
 <img src="yer.gif" align="top">Çok daha yoğun bir başlangıç halinden genişleme düşüncesinin gerçek olduğu, 1965’te Bell laboratuarlarındaki radyo-astronomların, ilk evrenden bugüne ulaşmış zayıf bir “radyastatik” bulmalarıyla kanıtlanmış oldu (Penzias ve Wilson, 1965). Üstelik bu zayıf radyasyonun yoğunluğu “genişleyen evren” modelinden beklenen yoğunlukla tam tamına aynıydı. Önceden yapılan tahminlerin gerçekliğini gösteren bu buluş, evrenin 100 milyar santigrad derecelik bir başlama sıcaklığındaki yoğun halinden bugünkü biçimine evrimleştiğine ilişkin bilimsel teoriye büyük bir güç katmıştır (Weinber, 1977). 
 align="texttop" 
 <img src="yer.gif" align="texttop">Bazı elementlerin radyoaktif izotopları değişmez bir kendiliğinden bozunmayla, başka elementlerin kararlı izotoplarına dönüşürler. Buradan evrenin milyarlarca yıldır var olduğuna ilişkin bir yığın kanıt daha bulunmuştur. 
 align="middle" 
 <img src="yer.gif" align="middle">Dünya, meteor ve ay örneklerindeki radyoaktif izotoplarla bunların kararlı bozunma ürünlerinin bağıl oranlarının incelenmesi, yaşlarının 4.5 milyar yol kadar olduğu sonucuna götürmektedir. Elde edilen bulgular, yıldızların evrimi teorisinden yola çıkılarak yapılan tahminlerle ve yaşamın, canlıların evrimi için gereken zamanla tümüyle uyuşmaktadır. Evrenin yaşının diğer bir ölçümü de uranyum izotoplarının bağıl bolluklarını inceleyerek yapılır. Yarı ömrü 700 milyon yıl olan uranyum 235 izotopunun bağıl bulunuş oranının küçüklüğü, dünyadaki Uranyum’un yaşının 7 milyar yıl olduğunu göstermektedir. Evrenin var oluşu ve evrimine ilişkin olarak ortaya koyduğumuz bu tablo nihai çözüm olmamakla birlikte, bu konuda evrenin yaşındaki gibi bir belirsizlik yoktur. 
 align="absmiddle" 
 <img src="yer.gif" align="absmiddle">Astrofizikçiler, ayrıca galaksilerin ve birer birer yıldızların, yıldız sistemlerinin oluşumuyla ilgili olarak da inandırıcı ve tutarlı hipotezler geliştirdiler. Kendi yıldız (güneş) ve gezegenlerin bugün galaksimizin görünür bölümlerinde gözlemlediğimiz gibi, yıldızlar arası boşlukta bulunan toz ve gaz bulutlarının yoğunlaşmasıyla oluştuğu düşünülmektedir. Allende meteorundaki izotoplarla yapılan jeokimyasal incelemeler sonucunda elde edilen yeni bulgular, güneş sistemimizi oluşturan bu yoğunlaşmanın yaklaşık 4.5 milyar yıl önce, yakın bir yıldız ya da süpernova patlamasıyla başladığını gösteriyor. Pek çok ayrıntının bilinmemesine karşın, sürecin ana hatlarında bilim çevrelerinde tam bir görüş birliği vardır. 
 align="baselign" 
 <img src="yer.gif" align="baselign">Yıldızların evrimiyse, daha nicel olarak da anlaşılmıştır. Yıldız evriminin bilgisayar simülasyonuyla, büyük yıldız yığınlarındaki yıldızların, gözlenen sıcaklık ve parlaklıkların karşılaştırılması sonucunda, bu yığınların 10 milyar yaşında olduğu anlaşılmıştır. Yaratılışçıların jeolojik belgelere ve evrime karşı çıkmalarının bir nedeni de, dünyanın çok genç, hatta birkaç bin yıllık olduğuna ilişkin inançlarıdır. Evrenin yaşının çok büyük (milyarlarca yıllık) olduğunu yadsımakla, yaratılışçılar; astronomi, astrofizik, nükleer fizik, jeoloji, jeokimya ve jeofizik bilimlerinden elde edilen sonuçlarla tümüyle çelişkiye düşmektedirler. Yaratılışçılar, dünyanın yaşının birkaç bin yıl olduğu sonucuna Tevrat’taki zamanlanmış olayların incelenmesi ve kayıtlı nesillerin sayılmasıyla ulaşmışladır (Renckens, 1969). Bu sonucu desteklemek için girişilen çabalardan biri de, dünyanın günümüzdeki magnetik
 alanının dünya ile birlikte yaratılan alanın gittikçe yok olmakta olan bir kalıntısı olduğu ve dünyanın yaşının 10.000 yıldan fazla olması halinde, alanın ilk kuvvetinin mümkün olamayacak kadar büyük olması gerektiği iddiasıdır. Bu bilimsel olarak sınanabilecek bir iddiadır ve nitekim sınanmıştır da; sonuçta bu sav tümüyle çürütülmüştür. Bugünkü bilimsel bulgular, dünyanın magnetik alanının sıvı haldeki iç katmanlarının hareketinden oluştuğunu göstermektedir. Bu alan değişmekte ve kaymaktadır, ama kaymalar arasında gücü korunup, dünyanın merkezindeki dinamo etkileriyle sürekli yenilenmektedir. 
 align="bottom" 
 <img src="yer.gif" align="bottom">Bilim adamları, dünyanın yaşını tam olarak bilemedikleri zamanlarda bile çok çok yaşlı olduğunu biliyorlardı. Bugün, dünyanın yaşını saptamakta bir düzineden fazla birbirinden bağımsız yöntem kullanılabiliyor. Bunlar farklı bozunma sistemlerine ve farklı bozunma sabitlerine dayalı yöntemlerdir. Ayrıca, çeşitli uranyum izotoplarının bağıl oranlarına dayanan yöntemler de kullanılmaktadır. 
 align="absbottom" 
 <img src="yer.gif" align="absbottom">Bir kayanın yaşını incelerken, birçok değişik izotop sisteminden aynı sonuç elde edilirse, bilim adamları bu şekilde bulunan bir yaşa, daha büyük bir güven duyarlar. Değişik izotop sistemlerinin aynı sonuçları rastlantıyla vermeleri çok çok düşük bir olasılıktır. Sonuç olarak, şunu söylemek sanırım yeterli olacaktır: Her geçen gün artan jeokronolojik kanıtlar, dünyanın ve güneş sistemimizin yaşının 4.5 milyar yıl olduğunu göstermektedir. 
 </body>
 </html>

Sanırım uzun bir uygulama oldu. Ama resmin parametrelerle konumlandırılırken paragrafların nasıl etkilediğini görmemiz açısından güzel bir uygulama. Burada belirtmek istediğim bir husus var, bu örnekte top veya texttop arasında bir fark göremiyorsunuz çünkü ikisi de metine göre konumlandırılmış. Bu sayfalık bu kadar yeter sanırım, diğer sayfada görüşmek üzere.

Resim Yerlesimi