HTML RESİM EKLEME

Web sayfaları sadece metinlerden oluşmuyor. Bir web sayfasını göz alıcı hale getirmek için resim, fotoğraf, animasyon, ses efekti, müzik gibi çeşitli donatılar kullanılır. HTML belgemize resim eklemek için <img> etiketinden yararlanırız. Seçtiğimiz resmin gif, jpg veya png formatında olması zorunluluğu dışında herhangi bir kısıtlama yoktur.

<br /> Etiketi gibi, <img /> etiketi bir bitiş etiketi gerektirmez. Bunun yerine, bir eğik çizgi (/) ile bu etiketi kapatmak. HTML'de resim eklemek için <img src="Resmin yolu"/> kod bloğundan faydalanıyoruz. Bir resmi göstermek istiyorsak, o resimin adresini src="..." parametresiyle belirtmemiz gerekir

HTML


ÇIKTI:

Diyelim ki bir otomobil sitesi hazırlıyorsunuz ve elinizde websayfanıza göstermek için onlarca resim var diğer resim dosyaları ile karıştırmamak için otomobiller adlı dizin açın. Bu dizinde bulunan bmw.jpg dosyasına erişmek için kullanacağımız kod şöyle olmalı:


İstediğimiz grafik dosyasına hangi alt klasörde olursa olsun ulaşabiliyoruz; Peki üst klasöre nasıl erişeceğiz? Bunun için kullanacağımız kod da şu şekilde "../." bizi bir üst klasöre götürür. Aynı şekilde istediğimiz kadar üst klasöre bu yolla ulaşırız.


Yukarıda örneğimizde bir üst dizine çık otomobiller dizinini bul içindeki "bmw.jpg" dosyasını göster demek. İki dizin üste çıkmak için kod bloğumuz şu şekilde olacak.


Diğer websitelerinde ki resimleride websayfamızda gösteririz. Bunun için yapmamız gereken diğer websitelerinde bulunan resme sağ tıklayıp resim yolunu kaydet(bazı browserlarda resim konumu veya resim url'si ...) diyoruz ve src="" paremetresini tırnakların içine kopyalıyoruz.

img etiketinin alt="" parametreside var bu parametreyi de yazarsak google görsel aramalarında sitemizdeki resim çıkar.

HTML:

manzara resmi

RESMİN ÜZERİNE GELİNCE BİLGİ METNİ ÇIKMASI:


Resimlerin üzerine gelindiğinde bilgi çıkmasını istiyorsak title=""parametresini ekliyoruz.

HTML:


ÇIKTI:

RESİMLERE ÇERÇEVE EKLEME


Resimlere çerçeve eklemek için border="çerçeve kalınlığı" parametresini ekliyoruz.

HTML:


ÇIKTI:

Resimin boyutlarını belirtmezseniz, resim orjinal boyutlarıyla web sayfasında yer alır. Resim boyutlarını ayarlamak için width="" ve height="" parametreleriyle resimin boyutlarını da ayarlayabilirsiniz. Resimin en/boy oranının sabit olmasını istiyorsanız sadece width veya sadece height parametrelerini kullanın. Örneğin resimin genişliği 300 piksel, yüksekliği ise 300 piksel yapalım.

HTML:


ÇIKTI:

RESİMLERİ HİZALAMA


Resimleri sağa veya sola hizalayabiliriz bunun için align="Yön bilgisi" parametresini kullanırız.

HTML:


ÇIKTI:

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

6303

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.