HAKKOD
Filistin'e insani yardım sağlanmasına yardım edin

Görsel Eklemek

HTML Dersleri > Görsel Eklemek

Sitemize görsel eklemek içim <img> etiketini kullanırız. <img> etiketini iki farklı şekilde oluşturmak mümkündür. İsterseniz <img> şeklinde isterseniz <img/> şeklinde oluşturabilirsiniz. <img> etiketi kapatma etiketi olmayan istisnai etiketlerden birisidir.

<img> etiketimize nitelik ekleyeceğiz. Nitelikler etiketlere verilen ek özelliklerdir. Bazı etiketlerin kendilerine özel nitelikleri vardır. <img> etiketinin niteliklerinden birisi src niteliğidir. src niteliği ile görselin kaynağını belirteceğiz.

Niteliklerin mantığı çok basittir.

1. Adım: İlk önce etiket oluşturulur.

<img>

2. Adım: Niteliğin adı açılış etiketinin içerisine girilir.

<img src>

3. Adım: Nitelik adından sonra eşittir (=) işareti konulur.

<img src=>

4. Adım: Eşittir (=) işaretinden sonra iki tane çift tırnak ("") konulur.

<img src="">

5. Adım: Son olarak niteliğin değeri çift tırnaklar içerisine girilir. <img> etiketi için src niteliğinin değeri görselin kaynağıdır.

<img src="https://hakkod.com/gorseller/kabe.jpg">

<img> etiketi için src niteliği iki farklı şekilde kullanılabilir. Birinisi resmin kaynağını başka bir kaynaktan getirmektedir. Yani başka bir web sitesinde yer alan resmin kaynağını kopyalarak kendi sitenizde yayınlayabilirsiniz.

İkincisi ise resmi kendi kaynağınızdan yani kendi sunucunuzdan getirmektir. Ama bunun için resmi kendi sunucunuzda barındırmanız gerekmektedir. HTML'e yeni başladığımız için biz birinci metodu kullanacağız.

Şimdi bir örnek yapalım görseli bizim sunucumuzdan getirelim.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HAKKOD</title>
  </head>
  <body>
    <img src="https://hakkod.com/gorseller/kabe.jpg">
  </body>
</html>

Örneğin logo kendi sunucunuzda yer alıyorsa o zaman resim kaynağını girerken sadece resmin yolunu girmeniz yeterlidir.

<img src="/gorseller/hakkod.jpg">

<img> etiketimizi iki şekilde kapatabiliriz. İki farklı örnekte bunu gözlemleyelim.

<img src="resmin-kaynağı" >

<img src="resmin-kaynağı" />

Fark ettiğiniz gibi ilk kapatışımızda sadece sağ ok (>) kullandık. İkinci kapatma örneğimizde ise sağ oktan önce slaş (/) getirerek kapattık.

Bir sonraki dersimizde görselin boyutunu değiştirmeyi öğreneceğiz. İki ders birbiriyle bağlantılı olduğu için zaman kaybetmeden bir sonraki derse geçmenizi tavsiye ederiz.