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


<img src="manzara.jpg"/>

Ç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ı:


<img src="otomobiller/bmw.jpg"/>

İ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.


<img src="../otomobiller/bmw.jpg"/>

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.

    
<img src="../../otomobiller/bmw.jpg"/>

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:


<img src="manzara.jpg" alt="manzara resmi"/>

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


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

HTML:


<img src="manzara.jpg" title="manzara resmi"/>

ÇIKTI:

RESİMLERE ÇERÇEVE EKLEME


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

HTML:


<img src="manzara.jpg" border="7"/>

Ç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:


<img src="manzara.jpg" width="300" height="300"/>

ÇIKTI:

RESİMLERİ HİZALAMA


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

HTML:


<img src="manzara.jpg"  align="right"/>

ÇIKTI:


Alperen 13/10/2018

Abi ben Şimdi kendi sayfamın arkasına böyle bi kapak fotoğrafı ekliyecem nasıl yapabilirim.

yönetici 13/10/2018


<body style = "background-image: url(manzara.jpg)">

Resim büyük boyutlu olmalı yoksa yan yana ekran dolana kadar tekrarlar.</br> css biliyorsan:

body, html {

            height: 100%;

           }

.bg { 
    /* Kullanılan Resim */
    background-image: url("manzara.jpg");

    /* Full yükseklik */

    height: 100%; 

    /* Resmi  ortalayın ve ölçeklendirin */

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;
 }
	
HTML:

<body class="bg">

Esra Uzun 11/11/2019

Merhaba hocam, resmin köşeleri nasıl oval yapılır? Teşekkürler.

yönetici 12/11/2019

Esra, css border-radius özelliğine bakın.

sibel çakmak 10/02/2020

Hocam merhaba slider seklinde fotoları nasıl yapıyoruz ve resimlere tıkladığımızda Nasıl büyütüyoruz.

Abdullah S T 08/03/2020

Hocam şimdi arka plana bir resim koyucam ama sadece kenarlarından gözükecek yani ortada yazı yazabileceğim bir yer olabilecek nasıl yaparım ? Teşekkürler.

yönetici 12/03/2020

Arkaplan resim ekleme için bakın. --- css arka plan sayfaya ortalanmış sayfa büyüklüğüne yakın bir div oluştur bunun için css bilmen gerekir.

rümeysa turak 16/03/2020

Resme tıklayınca bir ekran daha çıkıp o ekranda yine resim eklemek istiyorum nasıl yapabilirim?

yönetici 18/03/2020

Rümeysa, Resme link ekleyeceksin, linkte'de istediğin sayfayı açaçaksın, istediğin resimleride bu sayfaya ekleyeceksin, şu konuya bak.

<a href="yenisayfa.html">

<img border="0" src="images/resim.jpg"></a>


        

Nurettin kızılhan 26/03/2020

Merhaba, yaptığım sitede aynı kodları kullanmama rağmen bazı sayfalarda yazı resmin üstünde bazı sayfalarda ise yanında çıkıyor, nerede hata yapıyorum?

yönetici 27/03/2020

Nurettin, boş bir HTML sayfası aç kodları orda dene, Düzgün çalışıyorsa diğer css veya javascript kodlar düzeni bozuyordur birde alttaki kodu dene.

<img src="manzara.jpg" style="z-index:9"alt="manzara resmi"/>

nurettin kızılhan 01/04/2020

Teşekkür ederim.

engin ateş 02/06/2020

Slm sorum şöyle olucak herhangibi bir sayfada bir makale düşünün örnek olarak arkadaşlar bugun neredesin yazısı neredesin yazısına mause ile üzerine geldimi küçük bir sesim açılıcak nasıl yapabilirim tşkler.

yönetici 04/06/2020

Engin, css'de sözde element :hover özelliğini kullanacaksın. google'dan "css tooltip" araması yap konuyu incele, resim konumlandırmayı o şekilde yap.

Ali kılıçer 08/06/2020

Hocam şimdi ben fotoğrafı bir siteden almak istiyorum mesela istediğim fotoğraf "https://site.domain/sfhawa" olsun bunu nasıl ekleyebilirim?

yönetici 08/06/2020

Ali, Resmi alacağın site Büyük ve güvenilir bir site olsun yoksa o site ve sayfası kapanırsa senin sitede o resim kaybolur. Mause ile sağ tıkla farklı kaydet seçeneği ile bilgisayarına indirebilir ve sitene ekleyebilirsin.
Resmi sağ tıkla "Resmi yeni sekmede aç" tıkla URL'yi kopyala img src kısmına yapıştır.

Ecem kaya 31/07/2020

Ben diyelim siteme https://images.app.goo.gl/6z1STW351WjGUudVA Bu görüntüyü eklemek istiyorum . Ne yapmam gerekir , kullandığım program resmi göstermedi bir yerde hata mı yaptım ?

yönetici 02/08/2020

Ecem, Resim etiketinin src kısmına url'yi ekle gösterir. yada Resme sağ tıkla "resmi farklı kaydet" ile bilgisayarına ekle sitene ordan yükle.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

4849

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