HTML Resimleri
HMTL ile dosyanızın içinde resim görüntüleyebilirsiniz.
Örnekler
Resim Ekle
<html>
<body>
<p>Bir resim:<img src="1.jpg"width="80" height="160"></p>
</html>
</body>
Başka Bir Konumdan Resim Eklemek
<html>
<body>
<p>Baska bir adresten resim ekleme: <br> <img src="http://st1.uzerine.com/images/home_04.jpg"></p>
</html>
</body>
Resim Komutu ve Kaynak Niteliği
HTMLde bir resimi tanımlarken <img> komutunu kullanırız. src niteliği ile kullanacağımız resmin yerini dosyaya tanımlarız.
<img src="url">
url yerine resim dosyasının bulunduğu adresi (internet adresi ya da dosyanın bulunduğu konumu)
Alt Niteliği
<img> komutunu kullanırken faydalanabileceğiniz bir diğer nitelikde alt niteliğidir. Bu nitelik sayesinde kullanıcın tarayıcısı resimi göstermeyi başaramazsa ona bir mesaj yollayabilirsiniz.
<img src="kayik.gif" alt="kucuk kayik">
Örnekler
Arka Plan Resmi
<html>
<body background="2.jpg">
<font color="red">
<h2> Bakin: Bir Arka plan resmi:) </h2>
<p>Hem gif hem de jpg dosyalari arka plan olarak kullanilabilir.</p>
<p>Eger resim sayfadan kucukse, kendini tekrar eder</p>
</font>
</html>
</body>
Resim Konumlandırma
<html>
<body>
<h2>Align niteligi ile resimleri konumlandirma</h2>
<p>Metin icindeki resim <img src="http://st1.uzerine.com/images/home_04.jpg" align="bottom"> </p>
<p>Metin icindeki resim <img src="http://st1.uzerine.com/images/home_04.jpg" align="middle"> </p>
<p>Metin icindeki resim <img src="http://st1.uzerine.com/images/home_04.jpg" align="top"> </p>
</html>
</body>
Resim Konumlandırma 2
<html>
<body>
<h2>Align niteligi ile resimleri konumlandirma 2</h2>
<p><img src="http://st1.uzerine.com/images/home_04.jpg" align="left"> Resmi paragrafin icine ve sol koseye yerlestirmek icin align niteligi ile left (sol) tanimi yapilmalidir. Fark ettiyseniz yazilar ikinci satirda da resimin yaninda durmakta.</p>
<p><img src="http://st1.uzerine.com/images/home_04.jpg" align="right"> Resmi paragrafin icine ve sag koseye yerlestirmek icin align niteligi ile right (sag) tanimi yapilmalidir. Fark ettiyseniz yazilar ikinci satirda da resimin yaninda durmakta.</p>
</html>
</body>
Resim Büyüklüğü
<html>
<body>
<h2>Resim Buyuklugu</h2>
<img src="http://st1.uzerine.com/images/home_04.jpg" width="52" height="25"> <br>
<img src="http://st1.uzerine.com/images/home_04.jpg" width="104" height="50"> <br>
<img src="http://st1.uzerine.com/images/home_04.jpg" width="211" height="100">
</html>
</body>
Alternatif Metin
<html>
<body>
<img src="http://www.w3schools.com/html/goleft.gif" alt="sola git"> <br>
<p>sadece metin tanimli tarayicilar resim gosteremezler. Bu tarz tarayicilar icin resimlerinize alt ile not birakmayi tercih edebilirsiniz. Eger fareyi resim uzerinde bekletirseniz bircok tarayici alt metini bir sure sonra gosterir</p>
</html>
</body>
Bağlantı Resmi
<html>
<body>
<p>bir resime baglantida ekleyebilirsiniz: </p>
<a href="http://www.uzerine.com/"><img src="http://st1.uzerine.com/images/home_04.jpg"></a>
</html>
</body>
Resim İçi Bağlantı
<html>
<body>
<p>at-at ve at-st kafalarina tiklayin</p>
<img src="3.jpg" usemap="#map">
<map id="map" name="map">
<area shape="circle" coords="63,133,13" href="http://images.wikia.com/starwars/images/e/e9/At-st_large_pic.jpg">
<area shape="circle" coords="159,109,20" href="http://www.geekalerts.com/awesome-star-wars-model-abandoned-at-at-walker/">
</map>
</html>
</body>
Resim Koordinatlarını Gösterme
<html>
<body>
<p>fareyi resim uzerinde gezdirin ve tarayicinin durum cubugu uzerinde kordinatlarin degisimine bakin</p>
<a href="ornek8.html">
<img src="3.jpg" ismap>
</a>
</html>
</body>
Sonraki ders için tıklayınız...
Copyright © 2005 Uzerine.com