Html Resim Etiketi (4. Ders Resim Ekleme) – BilgeBank
Anasayfa / DERSLER / Web Tasarım Dersleri / HTML - CSS Dersleri / Html Resim Etiketi (4. Ders Resim Ekleme)

Html Resim Etiketi (4. Ders Resim Ekleme)

Html sayfanıza resim eklemeniz için <img src=”resim.jpg”/> etiketini kullanmamız yeterlidir. img etiketi içeriğin resim olduğunu belirtir. src= tanımı da resmin bulunduğu konumu tanıtmanıza yarar   ” “  işaretleri içindeki resim.jpg yerine resmin bulunmuş olduğu konumu belirterek resmi html sayfanıza ekleyebilirsiniz. img olarak açtığımız etiketi /img olarak kapatmadık resim etiketi için bunu yapmamıza gerek yoktur /> kullansak da yeterlidir. dikkat etmemiz gereken .jpg.png, .gif gibi uzantılarını doğru girmemiz gerekir.

Resim Konum yolunu eklemenin 3 yolu vardır.

<img src="http://www.bilgebank.com/wp-content/uploads/2017/01/html-resim-ekleme.jpg"/>

Resmi eklemek için internet url adresini ekleyerek resmi çekebilirsiniz.

<img src="resim-ekleme.jpg"/>

Resim ve Html dosyanız aynı yerde ise sadece resim adı ve uzantısını yazmanız yeterli olacaktır.

<img src="resimklasoru/resim-ekleme.jpg"/>

Eğer html dosyanız ve farklı klasörlerde ise resimklasoru/resim-ekleme.jpg gibi dosya yolunu bildirmeniz gerekmektedir. / işareti dosya yollarını belirler.

<img src="http://www.bilgebank.com/wp-content/uploads/2017/01/html-resim-ekleme.jpg" alt="google açıklaması" title="açıklaması" align="right" height="300" width="500" border="0" />

Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz

Resim etiketine çeşitli stil kodları ekleyerek kendi içinde özellikler ekleyebilirsiniz.

alt=”” Komutuyla resmi google için tanıtabiliriz

title=”” Komutu ile resmin üzerine mouse ile gelindiğinde açıklama yazısı çıkmasını sağlarız.

align=”” Komutu ile resmin “right” ile Sağ “left”ile sola “center” ile ortalama yapabiliriz.

height=”” Komutu ile resmin yükseklik ayarlarını yapabilirsiniz.

width=”” Komutu ile resmin genişlik ayarlarını yapabilirsiniz.

border=”0″ Komutu ile resme çerçeve oluşturabilirsiniz

Daha kapsamlı ayarlamaları style üzerinden yapabilirsiniz.

Hakkında BilgeBank

İlgili Makale

CSS3 Dersleri 4 box-shadow Kutuları Gölgelendirme

CSS3 ile birlikte gelen ve kutuya gölge verme için kullanılan box-shadow özelliği ve kullanımı ile ilgili bilgi vermeye çalışacağım. Hemen …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

%d blogcu bunu beğendi:
%d blogcu bunu beğendi: