Web Sitesine Resim (image) Nasıl Eklenir?
Web sitesine resim eklemek çok basittir.
Fakat öncelikle şunu belirtmekte fayda var. Digital fotoğraf makinesinde çektiğiniz resmi hemen web sitenize koyamazsınız. Resmin çözünürlüğü ve boyutu ağır gelebilir.
Web sitesinde kullacacağınız resimler gif, jpg, png, bmp gibi internete uyumlu bir formatta olmalıdır. En çok kullanılan format gif ve jpg formatıdır. Yani resim dosyanızın isim uzantıları bunlardan biri olmalıdır.
Diğer bir konu; internet sayfanıza koyacağınız resimlerin çözünürlüğü(resulation) 72 olmalıdır.
Şayet PhotoShop gibi bir resim işleme programını kullanıyorsanız resmi kaydederken File (Dosya) menüsünden Save For Web butonuna basarak kaydetmeniz gerekir. Diğer programlarda da böyle bir buton vardır mutlaka.
Şimdilik, çalışmak için internetteki bir websitesine giderek kullanacağınız resimleri buradan alalım.
Herhangi bir Web Sitesinde bir resmin üzerine farenin imlecini (ok ya da el işareti) getirip Sağ Tıklayın. Açılan menüde Resmi Farklı Kaydet satırını tıklayın. Resmi BinbirKanal Web Dersleri klasörümüzün içerisine kaydedin. Kaydederken resmin adını değiştirebilirsiniz. Fakat isim verirken kelimeler arasında boşluk bırakmayın, Türkçe karakter kullanmayın.
Mesela http://www.hurriyet.com.tr/ linkini tıklayarak Hürriyet Gazetesinin internet sayfasını açalım. Üstte haber karelerinde gördüğümüz resimlerden birisinin üzerine imleci getirerek sağ tıklayalım ve Resmi Farklı Kaydet satırını tıklayıp resmi kaydedelim.
Ben burdaki Genelkurmay Başkanımıza ait resmi genelkurmaybaskani.gif ismiyle BinbirKanal Web Dersleri klasörüne kaydettim.
Şimdi geldi iş bu resmi Web Sitemize eklemeye.
İşin en basit tarafı da bu.
Sayfaya resim eklemek için aşağıdaki kodu kullanıyoruz.
<img src=Resim Adı>
Resim Adı yazan yere indirdiğimiz resmin adını yazalım.
<img src=genelkurmaybaskani.gif>
Bu kodu, resmin sayfamızın neresinde görünmesini istiyorsak orasına koyacağız. Sayfamızda henüz birşey olmadığına göre resmi bizim o meşhur HTML ana kodlarımızın body tagları arasına koyalım.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1254"/>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-9" />
<title> </title>
</head>
<body>
<img src=genelkurmaybaskani.gif>
</body>
</html>
Bu sayfayı da isterseniz daha önceki derslerimizde öğrendiğimiz gibi resimler.htm ismiyle kaydedelim. Sonra üzerinde çift tıklayıp açalım. Nasıl, beğendiniz mi?
Resmin boyutlarını değiştirmek:
Resmimiz sayfada orjinal boyutuyla görünüyor. Biz resmin genişlik ve yüksekliğini aşağıdaki şekilde değiştirebiliriz. Diyelim ki resmin genişliği 200 px(piksel), yüksekliği de 200 px olsun.
<img src=genelkurmaybaskani.gif width=200 height=200>
Sayfamızda bu değişiklikleri yaptıktan sonra kaydedip yeniden açalım. Resim istediğimiz boyutta görüntülendi fakat şekil biraz bozuldu.
Çünkü biz yeni boyutları verirken resmin orjinaline göre orantılayıp küçültmedik.
İşin doğrusu şu olmalıydı. Orjinal resmimiz internet explorerda görüntülenirken resmin üzerine sağ tıklayıp, açılan menüde en alttaki özellikler satırını tıklamalı ve açılan özellikler penceresinde resmin gerçek boyutunu görüp ona göre orantılı küçültmeliydik.
Önemli bir not daha. Resmin boyutunu sakın orjinalinden büyük yapmayın yani resmi büyütmeyin. Resminiz bozulur.
Resme border eklemek:
Yukarda genişlik ve yükseklik eklediğimiz gibi, border=BorderKalınlığı şeklindeki kodu ekledikmi iş tamam. Borderımızın kalınlığı 2 olsun.
<img src=genelkurmaybaskani.gif width=200 height=200 border=2>
Değişikliği kaydedip sayfayı yenileyin.(Refresh tuşuna basın)
Resimleri ayrı bir klasöre koymak:
Resimler için web sitenizde ayrı bir klasör oluşturup bütün resimlerinizi bu klasörde toplamanız daha iyi olur. BinbirKanal Web Dersleri klasörünün içinde sağ tıklayıp resimler adında yeni bir klasör oluşturun. Resmi bu klasöre taşıyın.
Kod sayfasında tek yapmanız gereken; img(resim) tagındaki src(kaynak) bölümüne resmin kaynağını yazarken, resmin resimler klasörü içinde olduğunu belirtmek. Bunu da şöyle yaparız;
<img src=resimler/genelkurmaybaskani.gif width=200 height=200 border=2>
Dersimiz bu kadar. Beğendiniz umarım.
Bizim de sizden bir beklentimiz var.
Sitemizi arkadaşlarınıza tavsiye ederek, elinizdeki email adreslerine tavsiye emailleri göndererek bize destek olursanız derslerimize yeni konuları daha sık ekleriz.
Web Dersleri bölümünü siteye eklediğimizden beri ziyaretçi sayımızda göze çarpacak bir değişiklik olmadı. Bu da bizim moralimizi bozuyor.
Önümüzdeki derste, sayfa tasarımı, Table(tablo) kullanarak sayfa dizaynı yapmak konusunu işleyeceğiz.
Önümüzdeki derste buluşmak üzere hoşçakalın.