HTML Resim

20 Şubat 2012çinde | Yorum yok

[table_of_contents]

Merhaba arkadaşlar Bu yazımızda sizlerle HTML etiketleri ile nasıl resimlerimizi ve fotoğraflarımızı web sayfalarına ekleyebiliriz konusunu gündeme alıcaz. Görselleşen dünya standartlarında foroğraf paylaşmanın arttığı önemi sosyal paylaşım sitelerinden görebilirsiniz. Kullandıkları diller bakımından dinamik olsalarda tarayıcımızda bir resim göstermek için birazdan bahsedeceğimiz strandartları taşımaları gerekmektedir. Kullanım alanı HTML ile hazırlanan sayfalarda şirketinizin ürünlerini göstermek veya kişisel web sayfalarınızda seyahatlerinizden fotoğraflar yayınlamak isteyebilirsiniz. Bu durumda doğru başlıktasınız Herzamanki gibi bir kaç örnekle ne demek istediğimizi sizlere anlatalım. Gereken resim yolu adreslerinizi masaüstünüzdeki herhangi bir resim dosyasının özellikler kısmından ögrenebilirsiniz. Ne demek istediğimizi aşağıdaki resime bakarak anlayabilirsiniz.

Dosya yolu

İşte örneklerimiz. Dersin son bölümünde daha ayrıntılı örnekler bulabilirsiniz.

<html>
<body>
<p>
Bir resim:
<img src="gulenyuz.gif" alt="Gülen Yüz" width="32" height="32" />
</p>
<p>
Hareketli bir resim:
<img src="hhareketli.gif" alt="Hareketli resim" width="48" height="48" />
</p>
<p>
Hareketli ve Hareketsiz resim gömmelerinin farksız olduğuna odaklanın !
</p>
</body>
</html>

<html>
<body>
<p>Başka bir dosyadan resim gösterme:</p>
<img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32" />
<p>Bir siteden resim gösterme:</p>
<img src="http://www.kodhane.com/images/logo.png" alt="kodhane.com"
width="104" height="142" />
</body>
</html>

HMTL Resim-Görsel – <img> Etiketi ve src parametresi

HTML sayfalarında tanımlamak için kullandığımız etiket <img> dir. Biraz özel bir etikettir ve kapanış etiketi yoktur. Bu etiketten faydalanmak için çeşitli parametreler kullanmamız gerekmekte. Örnek vermek istersek src parametresi ile kombine edilmiş olan şu örneğe bakmamız yeterli olacaktır.

<img src="adres" alt="yazı"/>

Yukarıdaki örnekte dikkatinizi çekmek istediğim nokta adres yazılı kısıma yazımızın girişindeki konum adlı labelin karşısındaki adresi yazmanız. Resim eğer internet bağlantınız varsa internet üzerindeki herhangi bir noktadaki bir resim olabilir. Görüntülere tıkladığınızda boş bir sayfada çıkan resimde tarayıcının adres satırında bulunan konum adresi bizim HTML dökümanlarımızda resimleri gömmek için kullanabileceğimiz adrestir. Tarayıcımız belgemizdeki <img> tagını gördükten sonra resim algılamayı etkinleştirip otomatik bir paragraf içine koyar. Böylece resim belgeye yerleştirilmiş olur. src’den kasıt kaynak demektir.

HTML Alt parametresi

Yukarıdaki örnkte srcden hemen sonra alt isminde bir parametre daha kullandık. Bunun açıklaması için başka bir örnek üzerinden gidersek daha mantıklı olabilir.

<img src="tenke.gif" alt="büyük tekne" />

HTML‘deki bu etiket eğer resmin görüntülenmesinde bir hata oluşursa web sayfalarında onun yerine kullanılacak alternatif yazı üretmektir. Belki resmimizin adresi değişmiş olabilir. Hemen şimdi bir HTML sayfası oluşturup resim import edin. daha sonra resmin adresini değiştirin. Alt olarak girdiğiniz parametrenin sayfada görüneceğini söyleyebiliriz. İsminin ne olacağına ise biz karar veririz. Alt parametresine istediğiniz yazıyı girebilirsiniz. Tabiki açıklayıcı olma açısından alakalı şeyler yazarsanız daha bi güzel olur. İnternet bağlantısı yavaş olanlar, kaynağı düzgün görüntüleyemeyenler veya resim engelleme eklentisi kullananlar için Alt özelliği öenm taşımaktadır.

HTML yükseklik genişlik width height

Yerleştireceğimiz görselin boyutlarını ayarlamak bizim için öenmlidir. Sayfamızın şekline uygun resimler elde etmek için küçük bir örnekle başlayalım !

<img src="bor.jpg" alt="bor madeni" width="304" height="228" />

Yukarıdaki örnekte gördüğünüz gibi width ve heigth ile kullandığımız sayılar bizim görselimizi şekillendiriyor. Buradaki rakamlar bize default olarak pixel cinsinden tanımlanmıştır. Kullandıgımız büyüklük 304px ve 228px’dir.

Kodhane.com ekibi olarak sizlere bahsetmek istediğimiz bir konu görsel ekleme ile ilgili olarak resimlerimizi sayfalara eklerken onlara genişlik ve yükseklik olarak değerler vermemiz. Çünkü tarayıcımız onları okurken gerekli belleği resmin boyutlarına göre ayırması ve geri kalan elemanları daha hızlı yüklemesini sağlamak istiyoruz. Eğer tarayıcımız resmin büyüklüğünü bilirse bilinmeyen bir resmi yüklerkenki hatalardan ve görüntüleme bozukluklarından uzak duracaktır.

Yazı sonu faydalı notlar

[unordered_list style="tick"]

Eğer bir HTML belgesi 5 tane görsel içeriyorsa 6 tane görsele ihtiyacımız vardır sayfayı düzgün görüntülemek için. Resimleri kullanırken dikkatli olmak lazım ve görsel yüklemesi biraz zor olan bir iştir bundan olabildiğince kaçınmanız gerekmez ama dikkatli kullanım gerektirir.
Tarayıcımızda bir sayfanın yüklenmesi bittiğinde o sayfada resim varsa bilgisayarımıza yüklenmiş olur ve sayfadaki yerini alır. Dikkat etmemiz gereken web sayfasının planlandıgındaki gibimi göründüğüdür. Resimler kayabilir başka alanlarda gösterilebilir kendilerine ayrılan yerden çıkabilirler. Son olarak resim yüklenmez ise bulunduğu yerde kırık bir resim ikonu çıkar. Bu bize görselin tarayıcı tarafından yüklenemediğini gösterir.

[/unordered_list]

Ders Tekrarı ve Özeti

Etiket	Tanım
<img />	Görsel Tanımlar
<map>	Görsel-harita tanımlar
<area />	Görsel haritada tıklanabilir yerleri tanımlar.

Resimler ve Görseller ile alakalı Örnekler

<html>
 <body>
 <p>Bir resim
 <img src="gülen.gif" alt="gülen yüz" align="bottom" width="32"
height="32" />
 yaslama şekli="altta".</p>
 <p>Bir resim
 <img src="gülen.gif" alt="gülen yüz" align="middle" width="32"
 height="32" />
 yaslama şekli="ortada".</p>
 <p>Bir resim
 <img src="gülen.gif" alt="gülen yüz" align="top" width="32"
height="32" />
 yaslama şekli="üstte".</p>
 <p><b>Not:</b> yaslama şekli="altta" otomatik tanımlıdır</p>
 <p><img src="gülen.gif" alt="gülen yüz" width="32" height="32" />
 yazıdan önce resim</p>
 <p>yazıdan sonra resim
 <img src="gülen.gif" alt="gülen yüz" width="32" height="32" /></p>
 </body>
 </html>

<html>
 <body>
 <p>Bağlantı adresi içeren resim:
 <a href="http://kodhane.com">
 <img src="gülen.gif" alt="HTML öğren" width="32" height="32" />
 </a></p>
 <p>Çerçeve olmadan bir resim ama hala link içeren:
 <a href="http://kodhane.com">
 <img border="0" src="gülen.gif" alt="HTML öğren" width="32"
 height="32" />
 </a></p>
 </body>
 </html>

<html>
 <body>
 <p>Resime tıklayın ve daha yakından görün ! bu resimden resime
 bağlantı veren bir örnektir:</p>
 <img src="gezegenler.gif" width="145" height="126" alt="gezegenler"
 usemap="#gezegen" />
 <map name="gezegen">
 <area shape="rect" coords="0,0,82,126" alt="güneş" href="güneş.htm" />
 <area shape="circle" coords="90,58,3" alt="merkür" href="merkür.htm" />
 <area shape="circle" coords="124,58,8" alt="venüs" href="venüs.htm" />
 </map>
 </body>
 </html>

<html>
 <body>
 <p>
 <img src="smiley.gif" alt="Smiley face" align="left" width="32"
height="32" />
 İşte size bir parafraf solunda resim barındıran bir paragraf.
Burada align parametresine left olarak belirledik.
 </p>
 <p>
 <img src="smiley.gif" alt="Smiley face" align="right" width="32"
 height="32" />
 İşte size bir parafraf solunda resim barındıran bir paragraf.
 Burada align parametresine right olarak belirledik.
 </p>
 </body>
 </html>

Sonraki derste görüşmek üzere !

Konular: alt, başlangıç, ders, dosya, ekleme, etiket, geniş anlatım, görsel, görsel eğitim, html, html resim atma, html resim ekleme kodu, html resim koyma kodu, html resim makalesi, html resim ortalama, html resim yerleşimi, html resim yerleştirme, html4, html5, kaynak, kod, kodhane, makale, not, örnek, örnekler, parametre, rehber, resim, resim ekleme türkçe, resim kodu, src, temel, türkçe, yolu

Yorum yok

Bu yazı için Yorum Beslemesi

Geri izleme bağlantısı http://www.kodhane.com/html-resim-gorsel.html/trackback