HTML Resimler

Kod : <img src=”dosyaismi.gif”>

Text ve Gömülen Resimin Düzeni

Kod : <img…> belirteciyle bazı özellikleri kullanarak text ve resim arasında nasıl bir düzen olmasını istiyorsanız ayarlayabilirsiniz. <img> belirtecinin içine yerleştirilen align özelliği sayesinde aşağıdaki efektleri yapabilirsiniz:

align=top


Kod:

<img align=top src=”dosyaismi.gif>


Yazı buraya gelecek. Dikkat ederseniz, ilk satırdan sonraki yazı 
boşlukları dolduruyor.

align=middle

Kod:

<img align=middle src=”dosyaismi.gif”>


Yazı buraya gelecek. Bu sefer “align=middle” yani “orta” dediğimiz
için yazı grafiğin ortasından devam ediyor.


align=bottom (normal)

Kod:

<img align=bottom src=”dosyaismi.gif”>

Yazı bu sefer buraya gelecek. “align=bottom” demekle yazının en

alt kısımda olacağını belirttik.

HTML Dökümanımıza Resim Yerleştirelim

Bu çalışmada, üzerinde çalıştığımız dökümana bir giriş resmi koyacağız.

Çalışmanızı, açık değilse tekrar açın.
Text editörünüzde volkanlar.html dosyasını açın.
<h1>Volkanlar Sayfası<h1> başlığının üzerine şunu yazın:


Kod:

<img src=”lava.gif”>


Bu belirteç, sayfanızın en üstüne daha önce bulduğunuz volkan resimini yerleştirir. “lava.gif”, bu dosyanızın ismidir; eğer dosyanızın ismi değişikse, “lava.gif” yerine o ismi yazmalısınız.
Dosyanızı kaydedin ve browserınızda tekrar yükleyin.

NOT: Dikkat etmeniz gereken nokta, lava.gif ya da kullandığınız resim dosyası HTML dökümanınızla aynı dizinde olmalıdır. Eğer değilse, dosyanın bulunabileceği yerin tam yolunu yazmalısınız.

Resimi yerleştirdiğinizde aklınıza neden resim belirtecinden sonra <p> belirtecini kullanmadığınız gelebilir, bunun sebebi resim belirtecinden hemen sonraki belirtecin bir başlık <hN> belirteci olmasıydı; daha önce gördüğümüz gibi bir browser başlık belirteçlerinden önce ve sonra bir satır boşluk bırakır (paragraf belirtecine gerek kalmaz).