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.
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.
Sevgül 05/08/2020
Başlığın(title) yanına resmi nasıl ekliyoruz.
yönetici 07/08/2020
Google'dan "favicon ikon ekleme" diye aratma yap.
Gökhan 11/08/2020
Resme tıklayınca aynı sayfada acilmasını,nasil yapabilirim.
teşekkür ederim.
yönetici 12/08/2020
Google'dan "html lightbox ekle" diye aratma yap.
Şerzan Kaya 09/11/2020
Merhaba hocam, Benim yaptığım indexe resim eklemek istiyorum slayt şekilde yani kayan resimler OLMASIN şimdiden saygılar. sevgiler sunarım.
yönetici 10/11/2020
Şerzan Kaya, Bir div oluştur onun içine istediğin kadar resim etiketi ekle yan yana resimler gözükecek. Resim boyutları büyükse photoshop ile boyutlarını aynı boyutta ayarla resimler büyük değilse width, heigth ilede ayarlayabilirsin; fazla olan resimler alt satıra alınarak gösterilir.
Öğrenci 28/11/2020
Abi, ben kodları ekliyorum aynı şekilde yazıyorum ama resim gelmiyor. Bir garip küçük şey çıkıyor ama resim gözükmüyor. Lütfen yardım edin.
yönetici 29/11/2020
"src" kısmında dosya yolunu tam gösteremezsen dediğin şekilde olur yukardaki konuyu iyi oku.
Ece deniz 08/12/2020
Gorseller tasarlayıp eklemek istiyorum ancak bu görseller mouse ile üzerine tıkladığımda efektli yazı olsun veya hafif zoomlansın istiyorum?
yönetici 10/12/2020
Ece, css ile yapılır biraz css bilgin olması gerekir. Şu konuya bak.
said yakut 14/12/2020
Merhaba,resim ekledikten sonra sitede resmi göremiyorum,daha önce de yazdığınız gibi illa tam yolu ya da url mi yazmam gerekli?
yönetici 14/12/2020
Said, göstereceğin resimleri bulunduğun dizine yükle direk resim adlarını yaz.
Ramazan 18/12/2020
Merhaba, Bir sorum var, bu sitede en üstte Anasayfa adlı butonun üstüne gelince renk değişikliği gibi. Animasyon nasıl yapabilirim? lütfen söylermisiniz söylerseniz çok sevinirim ☺
Serhat YAREN 22/12/2020
Ben web siteme logo veya resim url kısmına pdf dosyasının girilmemesi için uyarı almak istesem nasıl yapabilirim
yönetici 24/12/2020
Serhat, sadece yüklenecek dosyalara izin ver diğer dosyaları göremez. Şu konuya bak.
şevket gültekin 10/03/2021
Merhaba hocam sitemin üst kısmında boşluk oluştu nasıl kaldırabilicem.
yönetici 12/03/2021
Şevket, margin ayarları düzgün HTML dosyanı notepad++ ile aç utf8 bomsuz olarak kaydet. bilgi için google "utf-bomsuz nedir" diye aratma yap.
SEFA 04/04/2021
Çalıştığım klasörde img dosyası var ama içinden fotoğraf alamıyorum. Kod satırında resmin üstünde gözüküyor fotoğrafım ama sayfada göremiyorum sebebi nedir acaba
yönetici 06/04/2021
Sefa, img dosyanın yolu doğruysa göstermeli,linux işletim sistemlerinde klasör dışarıya izin yok, izin vermelisin. Windows işletim sistemi ise resmi yeni bir klasöre kopyala boş bir html sayfada dene.
Tuğba Süer 12/05/2021
Hocam ben notepad++ kullanıyorum. Html, css ve veri tabanını birleştirdim. resim üzerine tıklayınca bilgi çıksın istiyorum, bunu veri tabanında yapmak istiyorum. Nasıl yapacağım yardımcı olursanız çok sevinirim. Teşekkürler.
yönetici 14/05/2021
sayfa güncellenmeden, Javascript ajax yöntemiyle veritabanından bilgi çekebilirsin. ajax youtube videolarına bakabilirsin.
Erdal 07/06/2021
Selamlar ve bilgiler için teşekkürler. Ben web sitemde bir resmi tam ekrana otomatik ölçeklemek istiyorum ancak HTML yada CSS kodlarında nasıl yapacağımı bulamadım. Örneğin 2K çözünürlüğünde bir resmim var ve web sitemi görüntüleyen kişinin kullandığı ekran 4K, 2K, 1080P de olsa yada tablet/telefondan da görüntülese resmin tam ekrana otomatik ölçeklenmesini istiyorum, bu nasıl yapılabilir?
bilal bal 19/08/2021
Merhabalar.
Mobil ve masaüstünde görünüm şekillerine göre ayırt ettirebilirmiyiz.
örneğin mobilde şu pixell aralıkta masaüstünde ise orjinal hali görünsün gibi.
Alper 20/08/2021
Sayfadaki resmi güncellediğimde browser eski resmi gösteriyor. Cache belleği temizlediğimde yeni resmi gösteriyor. Resim güncellendiğinde otomatik yenileme nasıl yapılır.
yönetici 21/08/2021
@Bilal Bal üste ki mesajda Responsive web tasarım resimler linkine bak.
SAHİB Abiyev 15/09/2021
Mrb internet sitesindeki bir resmi nasıl Verebiliriz?
yönetici 16/09/2021
Resmin üzerinde, mouse sağ tıkla resim adresini kopyala tıkla, resim etiketinde src kısmına yapıştır.
Hasan 03/11/2021
blogum açılınca ekrana bir resim gelsin ve giren kişi kapatınca bi daha gelmesini istemiyorum, yani bir nevi duyuru gibi. Bunu nasıl yaparım şimdiden teşkkürler.
yönetici 04/11/2021
Hasan, siteye gireni engelleyemen. uyarı mesaj için bakın.
ismail tambolat 18/11/2021
merhaba hocam sadece bize ait olan bir fotoğrafın src kodunu nasıl ayarlıyacağız.
yönetici 20/11/2021
ismail, yukarda anlatıldı. resmin yolu ve resim adı yazılacak.
Giray Gümüş 26/11/2021
hocam ben dediğiniz şekilde yapıyom ama resim oluşmuyo sadece bi tane işaret oluyo
yönetici 27/11/2021
Giray, resim uzantısına iyi bak jpg ile jpeg farklı yazdıysan çalışmaz. resim yolunuda düzgün belirt.
dilek sabuncu 09/12/2021
Müthiş anlatım, çok teşekkürler.
sefa 11/12/2021
hocam php mail için, mailin ortasına logomu koyacağım, bunun kodunu atarmısın sana zahmet.
FURKAN 19/12/2021
Hocam yapılanların aynısını yapıyorum ama resmim hala gözükmüyor ne yapmam lazım
yönetici 20/12/2021
Furkan yukarıda ki yorumları oku bazı çözümler tavsiye edilmiş.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.
