Html Dersleri : IMG Tagı Nasıl Kullanılır?

Transkript

IMG Tagı Nasıl Kullanılır?
Eger Web sayfalarini gezerken grafik destekleyen bir tarayıcı
kullaniyorsaniz, ekranda resimlerin, arkaplanlarin ve hatta animasyonlarin
oldugunu farketmissinizdir.Bu resimler genellikle X Bitmap (XBM) , GIF, veya
JPG formatli olurlar ve dosyaya görsel bir çekicilik katarlar.Buna ragmen
ayni ekranda çok miktarda resim kullanmaktan sakinmalidir, çünkü bu
durumda resimler kullaniciya daha geç bir sürede ulasir
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, yani dosya yolu ) ve ölçülerini ( size ) belirtiriz.
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="chef.gif" WIDTH="130" HEIGHT="101" />
</BODY>
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 dosyası ile aynı directory den yüklemesini belirtiyor (yani resim dosyası ile HTML
dosyanız aynı klasörün içinde bulunuyor) Burada, nasil HTML dökümanlarin hepsi .html ile bitiyorsa, tüm resim dosyalarinin sonu da
.xbm, .gif, .png veya .jpg ile bitmelidir.
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ıı sağ tıklayı,
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.)
<img src="chef.gif" width="130" height="101" />
chef.gif adındaki resmin onu çağırran HTML dökümanı ile aynı klasörde olduğu anlamına gelir.
www.dersmax.net
1
<img src="images/chef.gif" width="130" height="101" />
chef.gif adındaki 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.
<img src="../chef.gif" width="130" height="101" />
chef.gif adındaki resmin, onu çağıran HTML dökümanından bir seviye yukarda olduğunu belirtir.
<img src="../../chef.gif" width="130" height="101" />
chef.gif adındaki resmin, onu çağıran HTML dökümanından iki seviye yukarda olduğunu belirtir.
<img src="../images/chef.gif" width="130" height="101" />
chef.gif adındaki resmin, onu çağıran HTML dökümanından bir seviye yukarda ve images klasöründe olduğunu belirtir.
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.
<img src="resimler/chef.gif" width="130" height="101" />
Veya tüm resimleriniz için URL adreside kullanabilirsiniz.
<img src="http://www.korfez.net/resimler/chef.gif" width="130" height="101" />
Eğer resimler en üst klasörde (root -kök) yerleştirilmişse
<img src="/chef.gif" width="130" height="101" />
Ancak kök adres web hosting için farklı, local makineniz için farklı adrestir. Webte bu adres hostingin size izin verdiği alanı, kendi
makinenizde C: yi ifade eder.
Websayfanızı Upload ettikten sonra, resimleriniz gözükmüyorsa ve resimleri de yüklediğinize eminseniz (FTP programı ile program
penceresinden orada olduklarını görün) aşağıdaki seçenekleri kontrol edin
www.dersmax.net
2
Chef.gif ile CHEF.GIF aynı şeydir.
Dosya adlarında boşluk bırakmayın, alt karakter kullanın. Benim Annem.gif yerine benim_annem.gif i tercih edin.
IMG Parametresi [Alt]:
<img src="chef.gif" width="130" height="101" alt="Çok sevimli bir kuş türü" />
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 Kullanıcımız sadece metin gösteren bir browser kullanıyor olabilir. Bu
gibi durumlarda ALT özelliği önemlidir. Ayrıca arama motorları resim hakkında bir fikre ulaşmak için alt içerisinde yazana bakarlar
ki, SEO için bu önemli konulardan biridir.
IMG Parametresi [width] [heigth]:
Aşağıdaki gibi width ve height parametrelerini kullanmadan IMG tagı kullandığınızda da tarayıcı resimleri gösterir. Ancak burada
hızdan kaybedersiniz, çünkü tarayıcı bilmediği resim boyutları gelene kadar sayfayı yüklemez. Eğer boyutları bilse resim dosyası
yüklenmese dahi pencerede resmin alanı kadar yer ayırır ve sayfayı yükledikten sonra eksikleri tekrar yükleyebilirdi.
<img src="chef.gif" alt="Çok sevimli bir kuş türü" />
Width ve Height değerleri ile resim boyutlarında göreceli oynama yapabilirsiniz.
<img src="chef.gif" alt="Çok sevimli bir kuş türü" width="300" height="100" />
<img src="chef.gif" alt="Çok sevimli bir kuş türü" width="100" height="300" />
İstediğiniz ölçüleri yazabilirsiniz ve esas ölçülerin önüne geçersiniz.
www.dersmax.net
3
Örneğin şu kırmızı noktaya bakın: . Bu 1x1 pixel ölçüsünde bir kare aslında.
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=1><P>
<CENTER><IMG SRC="red_dot.gif" WIDTH=2 HEIGHT=200></CENTER>
Parametreler:
Attribute
Value
Description
HTML5
align
top
bottom
middle
left
right
Deprecated in HTML 4.01. Specifies
the alignment of an image according
to surrounding elements
alt
text
Resmine açıklama eklemek için
kullanılır. SEO için önem taşır.
border
pixels
Resmin etrafını saran çizgi kalınlığı
crossorigin
anonymous
use-credentials
Allow images from third-party sites
that allow cross-origin access to be
used with canvas
height
pixels
Specifies the height of an image
hspace
pixels
Not supported in HTML5. Deprecated
in HTML 4.01. Specifies the whitespace Desteklenmez
on left and right side of an image
ismap
ismap
Specifies an image as a server-side
image-map
longdesc
URL
Not supported in HTML5. Specifies the
URL to a document that contains a
long description of an image
src
URL
Specifies the URL of an image
usemap
#mapname
Specifies an image as a client-side
image-map
vspace
pixels
Not supported in HTML5. Deprecated
in HTML 4.01. Specifies the whitespace
on top and bottom of an image
width
pixels
Specifies the width of an image
Desteklenmez
Desteklenmez
Hizalama Parametresi [align]:
Bu şekilde yapılan hizalama işlemleri HTML 4 ve sonrasında tavsiye edilmemektedir. Bunun yerine CSS kodlarını kullanmak elbette
daha mantıklıdır.
www.dersmax.net
4
<IMG SRC="pumpkin.gif" ALT="picture of a pumpkin" ALIGN="LEFT">
<IMG SRC="pumpkin.gif" ALT="picture of a pumpkin" ALIGN="RIGHT">
<IMG SRC="pumpkin.gif" ALT="picture of a pumpkin" ALIGN="TOP">
<IMG SRC="pumpkin.gif" ALT="picture of a pumpkin" ALIGN="TEXTTOP">
<IMG SRC="pumpkin.gif" ALT="picture of a pumpkin" ALIGN="BOTTOM">
<IMG SRC="pumpkin.gif" ALT="picture of a pumpkin" ALIGN="ABSBOTTOM">
www.dersmax.net
5
<IMG SRC="pumpkin.gif" ALT="picture of a pumpkin" ALIGN="MIDDLE">
<IMG SRC="pumpkin.gif" ALT="picture of a pumpkin" ALIGN="ABSMIDDLE">
<IMG SRC="pumpkin.gif" ALT="picture of a pumpkin" ALIGN="BASELINE">
Kaynak
www.kemalunsal.com/htm/html/ders_3.html
www.kesdi.com/htmlders.php
http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/image-examples.html
www.dersmax.net
6

Html Dersleri : IMG Tagı Nasıl Kullanılır?

Transkript

Benzer belgeler

img src= nukegif gif

Anarihisi stin Kalimno-Kalymnos`ta Tırmanış!

Folie 1

Yönetim Kurulu Başkan Yardımcısı`nın Mesajı

RND - TEAkolik