<img /> takısı ile resim koyma

HTML dökümanlarına resim koymak için < img > takısı kullanılabilir.

Sözdizimi şöyledir:

<img alt "Cennet-Cehennem Vadisi" src="./resim/cennet_cehennem_vadisi.jpg" />


Nitelemeler (attributes):

Nitelemeler İçin Açıklamalar

SRC
<IMG ...>
takısı için kullanılması zorunlu olan tek nitelemedir. Diğer nitelemeler yazılmadığında, tarayıcılar öndeğerleri (default values) kullanırlar. SRC resmin adresini belirtir. Örneğin,

Kod Görüntü
<IMG SRC="./resim/dunya.jpg" ALT="dünya">

dunya

ALT

Herhangi bir nedenle tarayıcı resmi göstermediğinde, izleyiciye görünmeyen resim hakkında bilgi vermek için kullanılır.

Örneğin, aşağıdaki kodlarda SRC resmin yerini doğru işaret etmediği için tarayıcı resmi gösteremez; onun yerine ALT için yazılan text görünür:

Kod Görüntü
<IMG 
src="http://www.etudio.biz/graf/bulut.jpg"
ALT="Bulut">
Bulut


ALIGN
ALIGN = LEFT | RIGHT | TOP | TEXTTOP | MIDDLE | ABSMIDDLE | BOTTOM | ABSBOTTOM | BASELINE

ALIGN nitelemesi, etrafındaki texte göre konumunu belirler: SOL , SAĞ , ALT ve ÜST olmak üzere dört değeri vardır:

Örnekler:

Kod Görüntü
<IMG SRC="./resim/ada.jpg" ALT="Ada" ALIGN=LEFT>
Ada Programlamaya yeni başlayanlar için, öğrenmenin en iyi yolu kitaplarda yazılan küçük programları usanmadan yazmak, derlemek ve çalıştırmaktır. Bu küçücük programlar, bilgisayarın yapabileceği bütün işleri size öğretecektir. Unutmayınız ki, büyük programlar bu küçücük programların birleşmesiyle oluşur.
<IMG SRC="./resim/sunset.jpg" ALT="Gün batımı" ALIGN=RIGHT>

Gün batımı Derleyici kaynak programda sözdizimi (syntax) hatası olduğunda programı derleyemez. Derleyici, derleyemediği her programda, sözdizimi yanlışlarını türlere ayırır ve her yanlış türüne bir kod numarası verir. Bu kod numaraları, programın düzeltilmesinde (debug) çok işe yararlar.


ALIGN tarafından işaret edildiği biçimde, text resmin etrafında kayar; resmin sonuna gelince normal genişliğine kavuşur. İstenirse, <BR CLEAR="..."> komutu ile testin akışı resmin sonuna kaydırılabilir:

<BR CLEAR="..."> kodları, texti resmin bitimine aktarır:

Kod Görüntü
<IMG SRC="./resim/rainbow.jpg" ALT="Gökkuşağı" ALIGN=LEFT> Algol ve benzeri dillerin etkisiyle 1970 li yıllarda ortaya çıkan yapısal programlama kavramı Pascal dilinde record, C dilinde struct diye adlandırılan soyut veri tipini yarattı. <BR CLEAR=ALL>
C# dilinde her şey sınıflar içinde tanımlanır. Dolayısıyla, bazı dillerde önemli rol oynayan global değişkenler ve global fonksiyonlar C# dilinde yoktur. Onun yerine sınıf öğeleri (class member) dediğimiz değişkenler ve metotlar vardır. Sınıfın bir öğesine 'global' rol oynatmak istediğimizde, onu public erişim belirteci ile niteleriz; yani public nitelemeli sınıf öğelerine başka sınıflardan erişilebilir.
Gökkuşağı Algol ve benzeri dillerin etkisiyle 1970 li yıllarda ortaya çıkan yapısal programlama kavramı Pascal dilinde record, C dilinde struct diye adlandırılan soyut veri tipini yarattı.
C# dilinde her şey sınıflar içinde tanımlanır. Dolayısıyla, bazı dillerde önemli rol oynayan global değişkenler ve global fonksiyonlar C# dilinde yoktur. Onun yerine sınıf öğeleri (class member) dediğimiz değişkenler ve metotlar vardır. Sınıfın bir öğesine 'global' rol oynatmak istediğimizde, onu public erişim belirteci ile niteleriz; yani public nitelemeli sınıf öğelerine başka sınıflardan erişilebilir.


Eğer text resme çok yakın görünüyorsa, aşağıdaki kodlarla text ile resmin arasında kalan yatay ve düşey mesafeleri ayarlayabiliriz:

<IMG HSPACE="..."> ve <IMG VSPACE="...">.

Öteki Nitelemeler

ALIGN nitelemesinin aldığı öteki değerler resmi bir satır içine yerleştirir. Satır ile resmin üstü, ortası veya altı hizalanabilir.

Örnekler:

ALIGN kullanılmazsa

1. Resmin alt kenarı satırın altına hizalanır:

Kod Görüntü
<IMG SRC="./resim/cicek.jpg" ALT="çiçekler">
Xy img align



TOP

2. Resmin üst kenarı satırın üstüne hizalanır:

Kod Görüntü
<IMG SRC="./resim/sultan_ahmet_cami.jpg" ALT="img align" ALIGN=TOP>
Xy img align



TEXTTOP

3. Resmin üst kenarı satırın üstüne hizalanır:

Bazı tarayıcılarda, TEXTTOP resmin üst kenarını en yüksek harfin üst sınırına hizalar. Ama bazı tarayıcılarda, TEXTTOP aynen TOP, koduna denktir.

Kod Görüntü
<IMG SRC="./resim/ishak.jpg" ALT="img align" ALIGN=TEXTTOP>

xy img align



MIDDLE

4. Resmin ortası satırın ortasına hizalanır:

Farklı tarayıcılar arasında biraz farklı görüntüler vardır.

Kod Görüntü
<IMG SRC="./resim/zap.jpg" ALT="img align" ALIGN=MIDDLE>
Xy img align



ABSMIDDLE

5. Resmin ortası satırın tam ortasına hizalanır:

Kod Görüntü
<IMG SRC="./resim/ada.jpg" ALT="img align" ALIGN=ABSMIDDLE>

Xy img align



BOTTOM

6. Resmin alt kenarı satırın altına hizalanır:

Kod Görüntü
<IMG SRC="alignbox3.gif" ALT="img align" ALIGN=BOTTOM>
Xy img align

 ALIGN=BOTTOM  
ve ALIGN=BASELINE Bazı tarayıcılar BOTTOM ile BASELINE takılarını aynı gösterirler.


ABSBOTTOM

7. Resmin alt kenarı satırın altına (kesin) hizalanır:

Kod Görüntü
<IMG SRC="./resim/sultan_ahmet_cami.jpg" ALT="img align" ALIGN=ABSBOTTOM>

Xy img align



BASELINE

7. Resmin alt kenarı satırın altına (kesin) hizalanır:

Tarayıcıların çoğu BASELINE ile BOTTOM kodlarını aynı gösterir.

Kod Görüntü
<IMG SRC="./resim/niagara.jpg" ALT="img align" ALIGN=BASELINE>
Xy img align