HTML Resimler

HTML Resimler <img> Etiketi

HTML'de resimler <img> etiketi ile gösterilir.

<img> etiketi boş etiket olarak tanımlanır, yani kapanış etiketi yoktur ve sadece özellikler (parametreler) içerir.

src özelliği resmin URL'sini (web adresini) belirtir. alt özelliği ise, resmin görüntülenmediği durumlar için alternatif metni tanımlar:

<img src="URL" alt="alternatif metin">

Örnek


<!DOCTYPE html> <html> <body> <h2>HTML Resimler - Örnek</h2> <img src="cennet_papagani.jpg" alt="Papagan" width="150px" height="150px"> </body> </html>
Not Resimlerin yükseklik ve genişlik değerlerini her zaman belirtin. Yükseklik ve genişlik değerleri belirtilmediğinde, resim yüklenirken sayfada titreşimler oluşur.

alt Özelliği

alt özelliği resmin görüntülenmediği, zayıf bağlantı, src özelliğindeki bir hata, veya ekran okuyucu kullanımı gibi durumlar için tanımlanan alternatif metindir.

Tarayıcı resmi bulamadığında alt özelliğine girilen alternatif metni gösterir:

Örnek


<img src="resimler_ornek.jpg" alt="HTML Resimler" style="width:150px; height:150px;">

HTML belgelerinde, resimler için alt özelliği gereklidir.

HTML Ekran Okuyucular

Ekran koruyucusu, ekran üzerinde gösterilenleri okuyabilen bir yazılım programıdır.

Ekran okuyucuları görme engelli kullanıcılar için faydalıdır.

Not Ekran okuyucular alt özelliğine girilen metinleri okuyabilirler.

HTML Resim Boyutları - Genişlik ve Yükseklik

Bir resmin genişliğini ve yüksekliğini belirlemek için style özelliğini kullanabilirsiniz.

Resim boyutundaki genişlik ve yükseklik değerleri piksel birimiyle belirtilir. Değerden sonra px kullanılır:

Örnek


<img src="cennet_papagani.jpg" alt="Papagan" style="width:200px; height:200px;">

Alternatif olarak width (genişlik) ve height (yükseklik) özelliklerini kullanabilirsiniz. Değerler varsayılan olarak piksel birimiyle tanımlanır:


Örnek


<img src="cennet_papagani.jpg" alt="Papagan" width="200" height="200px">

Hangisi kullanılmalı: Width ve Height mi? Yoksa Style Özelliği mi?

Son HTML5 Standartlarına göre width, height ve style özellikleri hâlâ geçerliliğini koruyor.

Resimlerin orijinal boyutlarının stil şablonları (CSS) tarafından değiştirilmesine engel olduğu için style özelliğini kullanmanızı öneririz:

Örnek


<!DOCTYPE html> <html> <head> <style> img { width:100%; } </style> </head> <body> <img src="HTML.png" alt="HTML5 ikon" style="width:150px; height:150px;"> <img src="HTML.png" alt="HTML5 ikon" width="150" height="150"> </body> </html>

Başka Bir Dosya Yolundaki Resimler

Resmin konumu belirtilmediğinde, tarayıcı resmi web sayfasının bulunduğu sunucu dosyası içinde arar.

Ancak, resimleri bir alt klasörde depolamak daha yaygın kullanılan bir yöntemdir. Daha sonra bu dosya adı src özelliğine eklenir:

<img src="/resimler/html.png" alt="HTML5 ikon" style="width:150px; height:150px;"

Başka Bir Sunucudaki Resimler

Bazı web siteleri resimlerini, resim sunucularında depolar. Sayısız resme bu sunucular yardımıyla erişebilirsiniz:

Örnek


<img src="http://i1264.photobucket.com/albums/jj485/MichelleLuvsYoou/images36.jpg" alt="Coffee Art">

HTML Hareketli Resimler

GIF (Graphics Interchange Format) standartları hareketli resimlere izin verir:

Örnek


<img src="smiley.gif" alt="Computer man" style="width:100px;height:100px;">

Hareketli resimler için kullanılan özellik ve değerler, hareketsiz resimler için kullanılanlardan farklı değildir.

HTML'de Resimleri Link Olarak Kullanma

HTML'de resimleri tıklanabilir bir link olarak kullanabilmek için <img> etiketini <a> etiketi içerisinde kullanmak yeterlidir.

Örnek


<a href="html-resimler.html"> <img src="HTML-CSS.png" alt="HTML Resimler" style="width:280px;height:210px;border:0;"> </a>
Not Internet Explorer 9 ve önceki sürümlerinin resmin çevresinde kenarlık göstermesini önlemek için "border:0;" özelliğini kullanabilirsiniz.

Yazıya Göre Resim Konumlandırma

Resimlerin metnin sağına ya da soluna konumlandırılmasını sağlamak için CSS float özelliğini kullanabilirsiniz.

Örnek


<p> <img src="smiley.gif" alt="Smiley" style="float:left; width:60px; height:60px;"> Resim paragrafın soluna konumlandırılacak. </p> <p> <img src="smiley.gif" alt="Smiley" style="float:right; width:60px; height:60px;"> Resim paragrafın sağına konumlandırılacak. </p>

HTML Resim Haritaları

Resim haritası tanımlamak için HTML <map> etiketi kullanılır. Resim haritaları tıklanabilir alanları olan resimlerdir.

Tıklanabilir alanlar ile resim arasında ilişki kurulması için <map> etiketinin name özelliğine verilen değer ile <img> etiketinin usemap özelliğine verilen değerin aynı olması gerekir.

<map> etiketi, her biri resim haritasındaki tıklanabilir alanları tanımlayan <area> etiketlerini içerir.

Örnek

Tıklanabilir alanları olan bir resim haritası:


<img src="gezegenler.gif" width="145" height="126" alt="Gezenler" usemap="#gezegenharitasi"> <map name="gezegenharitasi"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="gunes.gif"> <area shape="circle" coords="90,58,3" alt="Mercury" href="merkur.gif"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.gif"> </map>

Konu Özeti

  • Bir resim tanımlamak için HTML <img> etiketini kullanın.
  • Resmin URL'sini tanımlamak için HTML src özelliğini kullanın.
  • Resmin görüntülenemediği durumlarda resmin yerine alternatif metin tanımlamak için HTML alt özelliğini kullanın.
  • Resmin boyutunu tanımlamak için HTML height ve width özelliklerini kullanın.
    (Alternatif olarak CSS height ve width özelliklerini)
  • Resmi öğenin sağına veya soluna yaslamak için CSS float özelliğini kullanın.
  • Bir resim haritası tanımlamak için HTML <map> etiketini kullanın.
  • Resim haritası üzerinde tıklanabilir alanlar tanımlamak için HTML <area> etiketini kullanın.
  • Resim haritası ile ilişkilendirmek için <img> etiketinin usemap özelliğini kullanın.
Not Dikkat: Büyük boyutlu resimlerin yüklenmesi biraz zaman aldığından, sayfanızın açılış hızını önemli ölçüde etkiler ve yavaşlatır.

HTML Resim Etiketleri

Etiket Tanım
<area> Resim haritasındaki tıklanabilir alanı tanımlar.
<img> Bir resmi tanımlar.
<map> Bir resim haritasını tanımlar.
« Önceki Ders
Sonraki Ders »

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

HTML DOCTYPE Bildirimi

HTML <!DOCTYPE> Bildirimi Örnek <!DOCTYPE> Bildirimi: < !DOCTYPE html > < html > < head > < title > Sayfanızın başlığı < /title > < /head > < body > Sayfanızın içeriği........ < /body > < /html > Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI Sayfanızın başlığı Sayfanızın içeriği........ HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com <!DOCTYPE> Tanımı ve Kullanımı  HTML dökümanınızda <html> etiketinden önce, en başta olması gereken şey <!DOCTYPE> bildirimidir.  <!DOCTYPE> bildirimi bi...
Devamı Oku »

Javascript ile neler yapılabilir

Resim
Javascripti web prokelerimizde hangi amaçlarla nasıl kullanabileceğimizi ve javascript ile neler yapılabilir bu yazımda bunları anlatmaya çalışacağım.Javascript  kullancı taraflı bir dildir.Öğrenilmesi en kolay  web programlama dilidir.Ve bir webmasterın öğrenmesi gereken temel 3 dilden biridir.Bu diller:Html,Css ve Javascripttir.
Devamı Oku »

Html belgesi yapısını anlama uygulaması

Resim
Html  dersi uygulama örneğimizde  html belgesinde temel etiketler ve kullanımını öğreneceğiz.Bu uygulama çok basit bir web sayfasının kodlarıdır.Sizlerde başlığı değiştirerek ya da paragraf etiketlerini değiştirerek kod yazmaya başlayabilirsiniz.Bir web sitesi yapmak için temel kurgu iyi bilinmelidir. <!DOCTYPE HTML> <html> <head> <title>Belge Başlığı</title> </head> <body> <h1>İçerik Başlığım</h1> <p>İlk paragrafım.....</p> </body> </html> Html belgesi uygulama videosu Bir html dökümanının uzantısı html'dir.Aşağıda izleyeceğiniz videoda sıfırdan html derslerine uygulamalarla başlamış olacağız.Videoyu izlemeden önce son hatırlatmaları yapalım. Doctype bildirimi ile tarayıcıya sitemizin html5 ile yapıldığını bildiriyoruz. Sitemiz html kodları içerisinde her elemanı kapsayan en önemli etikettir. Bizler kullanıcı olarak web sitelerinde sadece body kodları arası...
Devamı Oku »

HTML5 ile SEO Uyumlu İçerik Üret

Resim
 Merhaba arkadaşlar , HTML5 ile SEO uyumlu içerik üretmek için   yapabileceğiniz çok basit ama bir blog ve web site için çok önemli olan bir kaç şeyi size paylaşıyorum. HTML5 ile SEO Uyumlu İçerik Üret Başlık Etiketlerini Etkili  Kullanın İçeriğinizi önemli anahtar kelimelerle vurgulamak için başlık etiketlerini (H1, H2, H3 vb.) kullanın. Anahtar kelimeleri bu başlık etiketlerinde yerleştirerek sayfanın yapısını anlamlı bir şekilde düzenleyin.  İçeriğinizde başlık etiketlerini (H1, H2, H3 vb.) kullanarak sayfada hiyerarşi oluşturun. Ana başlık (H1) sadece bir kez kullanılmalı ve diğer başlık etiketleri (H2, H3 vb.) alt başlıklar için kullanılmalıdır. Meta Etiketlerini Kullanmayı Unutmayın  Meta açıklama etiketini kullanarak sayfanın içeriğini özetleyin vemümkünse  anahtar kelimelerinizin en azından bir tanesi meta açıklamada bulunsun. Anahtar kelimeleri de bu açıklamada kullanarak arama motorlarının içeriğinizi daha iyi anlamasını sağlayın. Ayrıca, her...
Devamı Oku »

Web Sitenizden Çok Para Kazanin

Resim
  Web sitenizden daha fazla para kazanmanın yolları nı arıyorsanız, Adsterra gibi etkili bir reklam ağından faydalanabilirsiniz. Adsterra, bloglarınızda veya web sitelerinizde reklamlar yayınlayarak hızla para kazanmanızı sağlayan bir dizi avantaj sunmaktadır. Geçen yazımıda SEO içeriklerle web sitenizi arama motorlarınızda nasıl üst sıralara taşıyacağımızı anlatmıştık.Siz de web yayıncılık serüveninizde bloglarınızdan daha çok fazla trafik çekip takipçilerinizi ve trafiğinizi paraya dönüştürmek istiyorsanız bu yazı tam size göre. AdsTerra ile Bloğunuzdan Hemen para kazanmaya başlayın ! Adsterra'nın avantajlarından biri, anında reklam görüntülenme imkanıdır. Bir kez kayıt olduktan sonra, Adsterra'nın reklam ağına erişim sağlayarak bloglarınızda veya web sitelerinizde reklamların hemen yayınlanmasını sağlayabilirsiniz . Bu hızlı başlangıç, gelirinizi artırmanızı ve kazancınızı daha da büyütmenizi sağlar. Adsterra'nın sunduğu reklam çeşitliliği de dikkate değerdir. Kaps...
Devamı Oku »

Javascript kodları nereye yazılır

Resim
Javascript kodlarını genel olarak 4 farklı yöntemle kullanabiliriz,istersek html sayfasının head bölümünde istersek body etiketinden önce ,harici bir dosyadan çağırarak yada tarayıcımızın console bölmesinde görüntülenmesini sağlayabiliriz.Unutmadan bir de eğer kullanıcıya uyarı vermek istiyorsak window nesnesinin alert metodunu kullanarak da javascript kodlarını çalıştırabiliriz. Javascript kodları nereye yazılır öğreneceğiz. Javascript kodları nerelerde kullanılır ve çalıştırma şekilleri Bu javascript dersi nde js kodlarını html sayfalarında farklı şekillerde çağırmayı öğreneceğiz. Alert metodu kullanarak görsel bir uyarı alacağız. Script kodunu harici bir dosyadan çağırarak kullanarak kullanacağız. Document nesnesinin write metodunu kullanarak örnek kod uygulaması yapacağız. Son olarak html belgesinin head bölümüne script tagları arasında kod yazıp çalıştıracağız. Tarayıcımızın console bölmesinde de js kodlarının çalışmasını öğrenmiş olacağız. html sayfalarının hea...
Devamı Oku »

Uyurken Bile Para Kazanmak İster misin

Resim
    İnternetten para kazanmanın yolları   ile ilgili yazılar paylaşmaya devam edeceğim. Sizler de internetten gelir elde etmek istiyorsanız yazılarımı takip ederek  internetten para kazandıran siteler  ve uygular ile  hızlı ve kolay para kazan abilirsiniz. Harika Bir pasif gelir elde et Uyurken Bile Para Kazan Ücretsiz bitcoin kazan dıran bu harika sitenin ayrıca referans sistemi var. Üye olduğunuzda Refer(sayfasına gidip kendi linkinizi heryerde paylaşın ve para kazanmaya hemen başlayın.) Arkadaşlarınızı da üye yaparak  pasif gelir elde edebilirsiniz . Genelde  uyurken bile para kazan   denildiğinde anlamanız gereken bu sistemdir. Haydi  Ücretsiz Bitcin kazanmaya başlayalım  ve paraya dönüştürelim. Siteye Hemen Üye ol:  FreeBitcoin  ( tıkla ) Ücretsiz Bitcoin Kazandıran siteye hemen üye ol (arkadaşlarınla paylaş) uyurken bile para kazan Her saat bitcoin kazanabilirsin ( Şanslı isen 200 Dolar değerinde Bitcoin ) Kazandığın...
Devamı Oku »

YouTube reklamları nasıl engellenir

Resim
YouTube Reklamlarını nasıl engellenir çok kolay Telefonunuzda ,bilgisayarınızda ,Androidte ve Iphone ceptelefonlarınızda YouTube reklamlarını kaldırmak için harika bir tarayıcı ve uygulama var . İnternet paketinizi yemez  hızlı güvenilir ve aynı zamanda kullandıkça para kazandırır. Bakalım neymiş bu Harika Youtube reklam engelleyici.Para ödemeden Youtube reklamlarını engelleyebilceğiniz için şimdiden mutlu olun harika bir tarayıcı uygulama sizi bekliyor . Reklamsız YouTube gibi şeylere gidip te  para vermeyin boş yere. Youtube reklamları nasıl engellenir ? Sordunuz hemen söyleyeyim  Ya bilgisayarınıza  reklam engelleyici tarayıcı   indireceksiniz ya da mobil telefonunuza güzel bir uygulama indireceksiniz.Benim tavsiyem ise  Chrome reklam engelleyici uzantısı kurmanızdansa  hem bilgisayarınıza hemde  Android IOS telefonunuzda YouTube reklam engelleyici harika bir uygulama tarayıcı indirmek. Acelem var  hemen indirmek istiyorum diyorsa...
Devamı Oku »