Resimlerin Avantaj ve Dezavantajları
Resimler sitenizin güzel görünmesi ve sitenizi daha estetik yapabilmenizi sağlar.Ancak resimler siteye ekstra yük getirir.Yani resimlerin yüklenmesi uzun sürer.Tabii bu süre resmin boyutuna bağlıdır.
Bir web sitesi 20 saniyeden daha uzun bir sürede açılıyorsa bu site çok ziyaretçi kaybeder veya hiç ziyaretçi çekemez.Resimler sitenizin geç açılmasına neden olan etmenlerden sadece bir tanesidir.
Bu yüzden resimlerin kullanımı büyük dikkat ve hesaplama ister.Siz siz olun sitenize fazla resim koymayın.
Sayfaya Resim Koymak
Resimler de metinlere benzer. Yani istediğiniz yere istediğiniz resmi koyamazsınız. Metinleri her bir karakter aralığına yazıyoruz. Resimleri de bu karakter aralarından bir tanesine yerleştiririz.
Resimleri sayfaya koymak: <IMG SRC="resim adı">
IMG ile SRC arasında bir boşluk vardır.SRC resminizin adını ve resmin tam yolunu belirtmeye yarar.
Burada dikkat edilmesi gereken husus resmin adının, uzantısının ve yolunun doğru yazılmasıdır.Daha önce bu yol ve resim adı bilgisini vermiştim.
Örneğin; <IMG SRC=http://www.wswdsada.dsada.jpg>
Resmin Kenarlığını ve Rengini Ayarlamak
Bazen resminizin güzel sağlamasını, ilgi çekmesini ve vurgulu olmasını isteyebilirsiniz.Bunun için resminize kenarlık ekleyebilirsiniz. Bunu <IMG>iminin özniteliği olan BORDER ile yapabiliriz.
Kullanımı: <IMG SRC="resim adı" BORDER="n">
BORDER ' ı yazarken de bir önceki nitelikten bir boşluk ile ayırdığıma dikkat edin. Bu çok önemli.
Buradaki "n" resminize vermek istediğiniz kenarlığın büyüklüğüdür ve istediğiniz sayıyı verebilirsiniz. Tabii vereceğiniz kenarlığın rengini de belirlemek daha güzel olmasına neden olabilir.
Bunu da BORDERCOLOR ile sağlıyoruz.BORDERCOLOR BORDER olmadan çalışmaz.
Kullanımı:
<IMG SRC="resim adı" BORDER=3 BORDERCOLOR="renk adı yada kodu">
Her nitelik arasında bir boşluk mutlaka olmalı bunu kesinlikle unutmayın.
Ama bazen de bu kenarlığı tamamen kaldırmak isteyebilirsiniz.Çünkü bazı durumlarda resminizin güzelliğini bozabilir.Bunun için yapmanız gereken sizin de tahmin edebileceğiniz gibi(eğer tahmin edemiyorsanız biraz daha html yi anlamaya çalışın) kenarlık sayısını sıfır(0) yapmaktır.
Yani BORDER="0" . Bunu kullanırsanız kenarlık olmayacağına göre kenarlık rengi de olmayacaktır.
Resmi Hizalamak
Biz daha önceki konularımızda <P> imini görmüş ve içinde ALIGN özniteliğini kullanmıştık.Bu niteliği de çokça kullanacağımızı belirtmiştik.İşte o kullanacağımız yerlerden bir tanesi.
Burada ALIGN özniteliğini tabii ki <IMG> imi ile yapacağız.
Resmi Sağa Hizalamak: <IMG SRC="resim adı" ALIGN="RIGHT">
Resmi Sola Hizalamak: <IMG SRC="resim adı" ALIGN="LEFT">
Resmi Ortalamak: <IMG SRC="resim adı" ALIGN="CENTER">
RIGHT, LEFT ve CENTER metinden önce yada sonra kullanılır.Metnin içinde kullanılmazlar.
<IMG SRC="resim adı" ALIGN="TOP"> Resmin üstü metnin üst kısmı ile aynı hizaya gelir.
<IMG SRC="resim adı" ALIGN="BOTTOM"> Resmin tabanı ile metnin tabanı aynı hizaya gelir.
<IMG SRC="resim adı" ALIGN="MIDDLE"> Metin resmin tam ortasına gelir.
TOP, BOTTOM, MIDDLE ise metinden önce yada sonra kullanılabileceği gibi özellikle metin içinde kullanılabilir.Metnin içinde kullanılmak içindirler.
Her nitelik arasında boşluk var.
Resmin Boyutlarını Belirtmek
Resminizin aslı küçük ama sayfanızda büyük olmasını istiyor olabilirsiniz.Küçük bir resmin boyutunu büyütürseniz çözünürlüğü bozulur.Yani eski hali kadar net ve güzel olmaz.
Resmin boyutlarını belirtmek daha kolay yüklenmelerini sağlar.Bu da size zamandan tasarruf sağlayabilir.
Bunun için <IMG> iminin WIDTH ve HEIGHT öznitelikleri kullanılır.
Kullanımı: <IMG SRC="resim adı" WIDTH="n" HEIGHT="n"> şeklindedir.
Her nitelik arasında boşluk var.
"n" resminizin boyutunu belirtmek için kullanılan sayıdır.Buraya iki tane n koymam WIDTH ve HEIGHT değerlerinin aynı olacağı anlamını vermez.Yani değerleri farklı olabilir.
WIDTH yatay uzunluğunu belirtir.
HEIGHT ise dikey uzunluğunu belirtir.
Bir benzetme: Bir dikdörtgenin kısa kenar uzunluğu HEIGHT, uzun kenar uzunluğu ise WIDTH 'dir.
Resme Alternatif Bir Metin Eklemek
Resimlerinizi web alanınıza yüklediniz ancak bir hata oldu ve gözükmediler.Bu durumda resmin yerine bir şey yazarak bir şeyler belirtebilirsiniz.
Ayrıca bununla ziyaretçi resminizin üzerine fareyi getirdiğinde yazmış olduğunuz bu alternatif metin görünür.
Örneğin; resmin adını yada buraya tıklayın gibi şeyler yazabilirsiniz.Bu metinler resmin yüklenmemesi ve ziyaretçinin faresini resmin üzerine getirdiği durumlarda görünür.Başka bir şekilde görünmez.
Bu <IMG> iminin ALT özniteliği ile yapılır.
Kullanımı: <IMG SRC="resim adı" ALT="Resim için tanıtıcı bir cümle yada kelime">
Boşluk tabii ki var.Buraya istediğiniz her hangi bir şey yazabilirsiniz.
Resimlerin Çevresine Metin Yerleştirmek
Saf resim bir işe yaramaz.Bunun çevresine metin yerleştirmeniz gerekir.Biz daha önce resimlerinde bir karakter olarak düşünülmesi gerektiğini söylemiştik.Resmi yerleştirdikten sonra hemen sonra metin yazarsanız metin resmin yanına gelecektir.Metin bir alt satıra kaydığında ise resmi atlayacaktır.Çünkü resim üst satırın bir karakterlik yerine oturmuştu.
Resminizin 5 cm büyüklüğünde olduğunu düşünün ve yanına bir metin yazın ve bu metin uzun bir metin olsun.Ne olacaktır.Resimden sonra bir satır metin yazılacak ve alt satıra geçildiğinde 5 cm lik alan boş kalacaktır.Bunu önlemek için <IMG> iminin ALIGN özniteliği kullanılır.
Kullanımı: <IMG SRC="resim adı ve yolu" ALIGN="RIGHT, LEFT">
Yukarıda anlattığın gibi resmi hizaladığımızda metin resmin çevresine yerleşecektir.Yani bir satırdan sonra 5 cm atlamayacak resmin hemen yanından devam edecek.Yani metin resme sarılacaktır.
Metin Sarımını Durdurmak
Resmimizin çevresine metin sarmayı öğrendik değil mi?
Küçük bir resim kullandığınızı ve sarım yapmamayı düşünün.Bu resmin tek başına daha güzel görünmesini sağlayabilir.
Bunu <BR> iminin CLEAR özniteliği ile yapabiliriz.
Kullanımı:
<IMG SRC="resim adı" ALIGN="LEFTya da RIGHT"><BR CLEAR="LEFT, RIGHT ya da ALL"> şeklindedir.
Önce resim sonra <BR CLEAR="">
LEFT resim solda ve metin sağda ise sağ taraf boş kalır ve metin resmin bittiği yerden devam eder.
RIGHT resim sağda ve metin solda ise sol taraf boşalır.
ALL ile resmin her iki tarafını boşaltabiliriz.
Bu özniteliklerden biri kullanılır.Hepsi birden kullanılmaz.
Yatay Çizgi Eklemek
İstediğiniz her hangi bir yere bir çizgi eklemek isteyebilirsiniz.Ancak bu çizgi sadece yatay olabilir.Dikey olamaz.Dikey için bir resim kullanabilirsiniz.
Yatay Çizgi Eklemek: <HR> imleri ile olur.
İsterseniz çizginin rengini, yatay ve dikey uzunluğunu ve hizalamasını belirtebilirsiniz.
Çizginin rengini ayarlamak: <HR COLOR="renk adı">
Çizginin yatay uzunluğunu ayarlamak: <HR WIDTH="n">
Çizginin dikey uzunluğunu ayarlamak: <HR SIZE="n"> HEIGHT değil bilemediniz.
Çizginin hizalaması: <HR ALIGN="LEFT, RIGHT ya da CENTER">
Bunların hepsi birlikte kullanılabilir.
Örneğin; <HR ALIGN="CENTER" COLOR="#fefe00" WIDTH="300" SIZE="5">
Sonuç:
|
