Web sayfasına resim eklemek
Web sayfamızın arka planını hazırladık yazılarımızı da yazdık. Şimdi sayfamıza resim de ekleyelim.
Resim dosyaları :
Web sayfalarında çok büyük bir çoğunlukla (.jpeg veya jpg) soyadlı resim dosyaları kullanılır. Aslında (.bmp), (.gif) ve bir kaç değişik resim formatı da kullanılabilir. Ancak bu dosya türlerinden (.bmp = bitmap) dosyaları çok az sıkıştırılmış, adeta kayıpsız ve 256 renk özelliğine bağlı olmayan, yani tüm renkleri gösteren bir resim dosyası türüdür. Bu tür seçildiği zaman, renk ve sıkıştırma kaybı olmadığı için çok büyük boyutlu bir resim dosyası kullanmış oluruz. Bu türün en büyük eksisi de budur. Hem dosya, sitemizi yayınlamak üzere gönderdiğimiz servis sağlayıcının serveri (dağıtıcı) içinde çok yer kaplar, hem de web sayfamızı ziyaret edenler bu dosyanın aşırı büyük boyutlu olmasından dolayı, sayfamızın geç açılmasına katlanmak zorunda kalırlar. Kimsenin bizi bekleme gibi bir lüksü olmadığını düşünerek (.bmp) soyadlı dosya türünü web sayfamızda kullanmaktan kaçınmak daha doğru olacaktır.
Gif (Graphics Interchange Format) resim
dosyaları da sıkıştırılmış ve kayıpsız resim dosyalarıdır. Bu tür dosyalar
web sayfalarında (.gif) soyadıyla ve iki işlemi ile kullanılırlar. Sabit ve anmiated
(Hareketli) gif adı verilen bu iki işlemde, sabit gif dosyaları normal resim dosyaları
gibi, animated gif dosyaları ise bazı işlemlerle değiştirilip anime yani hareketli
hale getirilmiş olarak kullanılırlar. .gif dosya türü sadece 256 renk skalası
kullanır. Bu sebeple kaliteli fotoğrafları bu tür ile kullanmak istenilen sonuçları
veremez. Bu sebeple logo, grafik veya clipart denilen çok küçük boyutlu görsel
öğelerde kullanılmaları en doğru metottur. Gif formatı üzerinde bir resim editörü
ile bir rengin üzerine "trasnparant" (yani şeffaf) lık uygulayabilir,
böylece arka plandaki resim veya rengin kullanılmasını sağlayabilirsiniz.
Jpg (Joint Photographic Experts Group)
soyadlı resim dosyaları, 256 renk dışında gerçek renk adı verilen tüm renkleri
kullanması açışından resim dosyalarının kullanılması açısından en idael
olanıdır. Sıkıştırılmış bir format olan jpg dosyalarında renk kaybı vardır
ancak bu durum resmi küçülttükçe kalite kaybına uğraması olarak gerçekleşir.
Resim düzenleme yazılımları (Resim Editörleri)
Web sayfalarımıza ekleyeceğimiz resimlerin boyutları çok önemlidir. Biz bir manzara
resmini 800 X 600 piksel ebatlarında web sayfamıza eklersek hem çok yer kaplar, hem de
sayfamızın açılma süresini geciktirir. Bu nedenden dolayı ziyaretçilerimize
öncelikle web sayfamızda kullanmayı düşündüğümüz esas resmin yerine
küçük boyutlu (ideal boyut 100 X 100 piksel) olan örneğini eklersek,
ziyaretçilerimiz hem sayfamızı sıkılmadan gezebilir, hem de biraz bekleyerek resmin
gerçek boyutlu olanını, eğer istiyorsa kendi bilgisayarına indirebilir.
Bu işlemi gerçekleştirmek için bir resim editör proramı kullanmamız gerekmektedir.
Bu tür programlar içinde en tanınmışı elbette Adobe firmasının ürettiği
Photoshop adlı programdır. Ancak bu program ücretli olduğu için belli bir sürede,
kısıtlı deneme sürümünü kullanabilirsiniz. Her ne kadar bilgisayarınıza eğer
Windows işletim sistemi kurduysanız, sistem kurulumunda bilgisayarınıza yüklenen
"Paint" adlı bir resim editörü yüklenmiş olsa dahi bu editör işlev
açısından yetersiz kalabilir.
Photoshop kadar kaliteli ve bedava dağıtılan Gimp programını, en azından
profesyonelliğe geçmeden önce, ilk çalışmalarınızda kullanabilirsiniz. Bu
programı nereden indirebileceğinizi sitemin soldaki menüsünde
"Bağlantılar" bölümüne ekledim.
Resim dosyalarının web sayfalarına eklenmeleri :
Bu işlemi yapabilmeniz için bilgisayarınızda (.jpg) veya (.gif) uzantılı bir resim dosyası bulunmalıdır. Bu dosyayı bulunduğu konumdan farenizin sağ tuşuyla ve Kopyala / Yapıştır metoduyla web sayfası çalışmaları yaptığınız klasörün içine kopyalayın. Unutmayın! sayfamızda kullanacağımız tüm enstrümanların aynı klasörde bulunması gerekmektedir.
Yardımcı olması olması düşüncesiyle alta bir resim dosyası ekledim, isteyen / kopyala yapıştır yöntemiyle web sayfalarının bulundurduğu klasöre kopyalayıp kullanabilir. (dosyanın adı=abc1.jpg)
Şimdi tekrar Not Defteri uygulamasını açın ve altaki satırları yazın. Bu kod için ben kendi resmimin adını kullandım. Siz de elinizdeki resmin adını kullanabilirsiniz.
<html>
<head></head>
<title>Benim Sayfam</title>
<body bgcolor=FFFF00><font face=Arial size 5 color=black><p>Bu sayfanın
arka plan rengi açık mavi oldu. Yanda da bir resim görüntüledik.<img
src=abc1.jpg></p></font></body>
</html>
Yazdıklarımızı kaydedip, tarayıcımıza dönelim ve F5 tuşuna basalım.
İşte web sayfamızın durumu.
Burada <img> resim takısına "src" (search=ara) parametresini ekleyerek, tüm dosyalarımızı sakladığımız web klasörümüzdeki kullanacağımız resmin adını ekliyoruz. <img src=abc1.jpg>
Şimdi bu resmimizi yazımızın bir paragraf altına eklemek istersek aşağıdaki kodu Not Defterimize yazmamız gerekecektir.
<html>
<head>
<title>Benim Sayfam</title>
</head>
<body bgcolor="C5FFFF">
<font face="Arial" size 5 color="black">
<p>Bu sayfanın arka plan rengi açık mavi
oldu. Ekleyeceğimiz resmi bir de
yazdıklarımızın bir paragraf altına alalım.</p>
<p><img src="abc1.jpg"></font></p>
</body>
</html>
Yazdıklarımızı kaydedip tarayıcımızdan bakalım.
İşte web sayfamızın yeni görüntüsü.
