HTML Resim Yerleşimi yardım

RESIMLERIN AVANTAJLARI VE DEZAVANTAJLARI

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:

Kod:

[img]resim adı[/img]

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;

Kod:

[img]./resimlerim/ben.gif[/img]

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

Kod:

<IMG>

iminin özniteliği olan BORDER ile yapabiliriz.
Kullanımı:

Kod:

[img]resim adı[/img]

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ı:

Kod:

[img]resim adı[/img]

Resmi Hizalamak
Biz daha önceki konularımızda
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

Kod:

<IMG>

imi ile yapacağız.
Resmi Sağa Hizalamak:

Kod:

[img]resim adı[/img]

Resmi Ortalamak:

Kod:

[img]resim adı[/img]

RIGHT, LEFT ve CENTER metinden önce yada sonra kullanılır.Metnin içinde kullanılmazlar

Kod:

[img]resim adı[/img]

Resmin üstü metnin üst kısmı ile aynı hizaya gelir.

Kod:

[img]resim adı[/img]

Resmin tabanı ile metnin tabanı aynı hizaya gelir.

Kod:

[img]resim adı[/img]

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

Kod:

<IMG> iminin WIDTH ve HEIGHT

öznitelikleri kullanılır.
Kullanımı:

Kod:

[img]resim adı[/img]

ş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

Kod:

<IMG>

iminin ALT özniteliği ile yapılır.
Kullanımı:

Kod:

<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

Kod:

<IMG>

iminin ALIGN özniteliği kullanılır.
Kullanımı:

Kod:

<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

Kod:

<BR>

iminin CLEAR özniteliği ile yapabiliriz
Kullanımı:

Kod:

<IMG SRC="resim adı" ALIGN="LEFTya da RIGHT"><BR CLEAR="LEFT, RIGHT ya da ALL">

şeklindedir.
Önce resim sonra

Kod:

<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:

Kod:

<HR>

imleri ile olur.
İsterseniz çizginin rengini, yatay ve dikey uzunluğunu ve hizalamasını belirtebilirsiniz.
Çizginin rengini ayarlamak:

Kod:

<HR COLOR="renk adı">

Çizginin yatay uzunluğunu ayarlamak:

Kod:

<HR WIDTH="n">

Çizginin dikey uzunluğunu ayarlamak:

Kod:

<HR SIZE="n">

HEIGHT değil bilemediniz.
Çizginin hizalaması:

Kod:

<HR ALIGN="LEFT, RIGHT ya da CENTER">

Bunların hepsi birlikte kullanılabilir.
Örneğin;

Kod:

<HR ALIGN="CENTER" COLOR="#fefe00" WIDTH="300" SIZE="5">

evet arkadaşlar elimden geldiği kadar anlatmak istedim umarim yardimcı ola bilmişimdir ....kaptan serkan weptasarım