Art?k resimlerimizi websayfam?za yerle?tirmenin zaman? gelmi? bulunuyor. ?imdi bu resimi kullanaca??z, sa? t?klayarak resim klasörüne kopyalay?n
Bir resmi belirtmek için <IMG> (image) etiketini kullan?r?z.
<BODY BGCOLOR="#FFFFFF">
<IMG>
</BODY>
Ayn? zaman da kayna??n? ( src = source ) ve ölçülerini ( size ) belirtiriz.
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="chef.gif" WIDTH=130 HEIGHT=101>
</BODY>
Bir ?eyi belirtmeden olmaz. Kaynak yani SRC resmin hangi resim oldu?unu belirtirken, ayn? zamanda nerede oldu?unuda bildirir. Yukardaki SRC, "chef.gif", browserin "chef.gif" ad?ndaki resmi HTML ile ayn? directory den yüklemesini belirtiyor (yani resim dosyas? ile HTML dosyan?z ayn? klasörün içinde bulunuyor.)
A?a??da ?emalarla anlatmaya çal??t?m (ilk bakt???n?zda anlamazsan?z, gidin kendinize bir kahve yap?n, yada mevsim meyvalar?ndan at??t?r?n, uykunuz aç?ls?n, tekrar okuyun. Bunlar?n da faydas? olmazsa, üzerinde resim olan herhangi bir web sayfas?n? sa? t?klay?p, kayna??n? görüntüleyin, bak?n nas?l yapm??lar. Gene çözemediyseniz, üzülmeyin, bana da ilk 1-2 sefer böyle olmu?tu, bak?n ?imdi size ders bile veriyorum :-))), gerçekten, anlamad???n?z ?eyleri hiç dert edinmeyin, nas?lsa bir gün ö?reniyorsunuz.)
 |
SRC="chef.gif" resmin onu ça??ran HTML döküman? ile ayn? klasörde oldu?u anlam?na gelir. |
 |
SRC="images/chef.gif", resmin, onu ça??ran HTML döküman?ndan bir seviye a?a??da ba?ka bir klasörde oldu?unu belirtir. Bu daha da ileri seviyelere gidebilir. |
 |
SRC="../chef.gif", resmin, onu ça??ran HTML döküman?ndan bir seviye yukarda oldu?unu belirtir. (bir itiraf-moraliniz düzelsin diye- bu sat?rda yazd?klar?m?, sayfay? tercüme etti?im ?u ana kadar ben bile bilmiyordum. Gerçekte bu benim için bir hobi gibi bir?ey, ama insanlara olabildi?ince yard?mc? olmaya çal???yorum, hepsi bu.) |
 |
SRC="../../chef.gif" resmin, onu ça??ran HTML döküman?ndan iki seviye yukarda oldu?unu belirtir (yalan yok, yukardaki sat?rdaki itiraf?m? bu sat?r için de tekrarlayabilirsiniz, gerçekten :-))) |
 |
SRC="../images/chef.gif"resmin, onu ça??ran HTML döküman?ndan bir seviye yukarda ve images klasöründe oldu?unu belirtir (art?k bu sayfa benim itiraflar?m sayfas?na dönmeden bu konuyu kapamal?y?m, çünkü, bir bilen olarak imaj?m baya?? hasar ald?.) |
| Diyorum ki: | Siz kafan?z? fazla kar??t?rmay?n, web alan?n?z? da saçma bir hale getirmemek için, bütün resimlerinizi resimler diye bir klasörde toplay?n sonrada a?a??daki formatta bir etiketleme yap?n. Hepimizin selameti aç?s?ndan en uygunu budur. Zaten biz amatörlere bukadar? gerçekten yeterli, hem sonra kim görecek ki directorynizi? |
Bu arada bir de?i?ik yoluda resimlerin kayna??n?n komple bir URL olmas?. Örne?in, http://www.korfez.net/images/banners/banner_7.gif Bana bir iyilik yap?n, web sitenize a?a??daki linki yerle?tirin (yani dersler hepten bedavaya gelmesin bari.)
|
Bir ba?ka IMG özelli?i olan ALT tan da bahsetmeden geçemeyiz....
<IMG SRC="chef.gif" WIDTH=130 HEIGHT=101 ALT="Chef">
ALT resimin yerine kullan?lan bir aç?klama yaz?s?n?n bulunmas?d?r. Kullan?c?n?n taray?c? program?n?n resim yükleme özelli?i sayfalar?n h?zl? yüklenmesini sa?lamak için kapat?lm??, yada sadece metin gösteren bir browser kullan?yor olabilir. Bu gibi durumlarda ALT özelli?i önemli olabilir.
Gelelim resimlerin SIZE yani ölçülerrine.
Bunu bir deneyin bakal?m...
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="chef.gif">
</BODY>
Gördü?ünüz gibi, browser bütün i?i kendisi yap?yor, tahminen resmi ölçülendirdi ve görüntüledi. O zaman ölç,yle i?imiz ne? Detaylara girmezseniz sayfan?z daha çabuk yüklenir.
Güzel taraf? nerede? ?una bir bak?n...
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="chef.gif" WIDTH=300 HEIGHT=101>
</BODY>
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="chef.gif" WIDTH=40 HEIGHT=200>
</BODY>
Dile?idiniz ölçüleri yazabilirsiniz, ve esas ölçülerin önüne geçersiniz. ?imdi ?u k?rm?z? noktaya bak?n -> 
<-. 1x1 ölçüsünde bir kare. Bak?n onunla neler yapabiliyorum...
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=1><P>
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=2><P>
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=5><P>
<CENTER><IMG SRC="red_dot.gif" WIDTH=2 HEIGHT=200></CENTER>
</BODY>
Ekranda resim görüntülemek için,
<img src="resmin bulundugu dizin">
demeniz yeterlidir. Burada, nasil HTML dökümanlarin hepsi .html ile bitiyorsa, tüm resim dosyalarinin sonu da .xbm , .gif veya .jpg ile bitmelidir. Özel bir durum olmadikça görüntülenen resmin alt kismi ile metin yanyana gelirler.
<img src="../images/G.GIF">
Metin resmin altinda ..
Örnegi, ekranda su sekilde gösterilir:
Metin resmin altinda ..
Sözkonusu metni resmin yanina veya üstüne koymak için ALIGN=TOP opsiyonunu yerlestirin.
<img src="../images/G.GIF" align=top>
Metin resmin üstünde ..
Metin resmin üstünde ..
Veya ortaya almak için ALIGN=MIDDLE kullanin.
<img src="../images/G.GIF" align=bottom>
Metin resmin yaninda ..
Metin resmin yaninda ..
Görüntünün orijinal formatinda degisiklik yapmadan ekranda enini ve boyunu ayarlamak mümkündür. Bunun için height=sayi ve width=sayi ara belirteçleri kullanilir. "Sayi" degiskeni piksel olarak verilir.
Kaynak www.kemalunsal.com/htm/html/ders_3.html , www.kesdi.com/htmlders.php
