Html & CSS Resim Ekleme

Html & CSS Resim Ekleme

Html sayfalarınıza nasıl resimler eklersiniz ve bu resimleri nasıl düzenlersiniz onu anlatmaya çalışacağım.

Html Temel Etiketler ve Anlamları başlıklı konumuzdan hatırlayacaksınız, Html in resimler ile ilgili etiketi img dir. img etiketi kendi içinde birçok özellik barındırır. Bunları tek tek inceleyeceğiz.

Öncelikle en basitinden web sayfamıza resim ekleme ile başlayalım.

1
2
3
4
5
6
7
8
<html>
   <head>
      <title> Html Sayfaya Resim Ekleme Dersi </title>
   <head>
   <body>
      <img src="resim_konumu/resim_adı" />
   </body>
</html>

Yukarıdaki kodumuz en basit resim ekleme kodudur. src=”” özelliğine resmin url ya da dosya adresini belirterek resmi sayfanıza çağırabilirsiniz.

Resimlere Link verme;

Html in link etiketi olan a etiketi ile bu işlemi kolaylıkla yapabiliriz. Eğer web sayfamıza eklediğim resme bir bağlantı vermek istersek yukarıda belirttiğimiz basit resim ekleme kodumuzu a etiketleri arasına almamız yeterli olacaktır.

 

1
2
3
4
5
6
7
8
9
10
<html>
   <head>
      <title> Html Sayfaya Resim Ekleme Dersi </title>
   <head>
   <body>
      <a href="yonlendirmek_istedigimiz_adres">
         <img src="resim_adresi/resim_adı" />
      </a>
   </body>
</html>

Resimlerde Yükseklik ve Genişlik;

Web sayfamıza eklediğimiz resmi boyutlandırmak istersen width ve height özelliklerinden faydalanabiliriz.

“width” – Resmimizin genişliğini belirlemek için kullanılır ve örn; width=”50px” olarak yazılır. Bu resmimizin 50px genişliğinde olacağını belirtir.

“height” – Resmimizin yüksekliğini belirlemek için kullanılır ve örn: height=”50px” olarak yazılır. Bu resmimizin 50px yüksekliğinde olacağını belirtir.

1
2
3
4
5
6
7
8
9
10
<html>
   <head>
      <title> Html Sayfaya Resim Ekleme Dersi </title>
   <head>
   <body>
      <a href="yonlendirmek_istedigimiz_adres">
         <img src="yenibaslayan.png" width="400px"; height="200px"; />
      </a>
   </body>
</html>