Y Giriş Yap

   Tarih:


Tekrar Merhaba! Bu dersimizde html resim elementinin özelliklerini ve başlık elementlerini inceleyeceğiz.






Resim Elementi: img

Resim elementi olan img, tek bir etiketle açılır ve kapatılır:

<img />

Resmin adresi, boyutları ve kenarlıkları gibi bilgileri ise önceki dersimizde bahsettiğimiz özellik="değer" formatında ekleriz:
<img özellik="değer" />

Elbette ki birden fazla özellik ve değere yer verebiliriz.
Şimdi img elementinde en çok kullanılan özellikleri ve değerlerinin cinslerini yazalım:

Özellik Alabileceği Değerler Örnek
src resim linki <img src="https://img851.imageshack.us/img851/5412/dth6.png"/>
alt yazı <img alt="bir çiçek resmi" />
width sayı veya oran <img width="50px"/> veya <img width="20%"/>
height sayı veya oran <img height="50px"/> veya <img height="20%"/>
border sayı <img border="3" />
style CSS kodları <img style="border-color:red;-moz-border-radius:14px;" />


Yukarıdaki özellikler arasından, src mutlaka belirtilmelidir. Border değerini de kesinlikle belirtmenizi öneriyorum. Çünkü İnternet Explorer, border değerleri belirtilmemiş resimlere kendi kafasına göre kenarlık ekler. Bu yüzden kenarlık eklemeyecekseniz bile border="0" diye belirtmenizde fayda var.

Şimdi sırasıyla bu özellik ve değerleri gözden geçirelim:
  src özelliği ve değeri kesinlikle belirtilmelidir. Zaten resmin adresi olmadan resmi gösteremeyiz değil mi? Resminizin adresini belirtmediğiniz sürece resminiz sayfada görünmez. Bu konuda dikkat etmeniz gereken şey, resmin adresini href ile değil src ile belirliyor olmamız. src aslında kaynak anlamına gelen source kelimesinden geliyor.

Eğer bir resminiz varsa ve bunu internete koyup linkini edinmek istiyorsanız en basitinden https://imageshack.us a kaydolabilirsiniz.
Kod Önizlemesi
<img src="https://img851.imageshack.us/img851/5412/dth6.png"/>


  alt özelliği resmin açıklamasını içerir. Eğer resim bir şekilde görüntülenemezse, resmin görünmesi gereken alanda alt değerinde yazanlar görünür. Bu değeri oluştururken belli bir kurala bağlı kalmanıza gerek yok. Resminizi açıklayan herhangi bir metin koyabilirsiniz. Ya da alt özelliğini eklemeye de bilirsiniz. Ancak alt değeri aynı zamanda arama motorlarının sayfanızı değerlendirirken kullandığı bir veri. Bu nedenle kullanmanızda fayda var.Alt kelimesini, "alternatif metin" anlamında düşünebilirsiniz.
Kod Önizlemesi
<img alt="iki tane kare" src="https://img851.imageshack.us/img851/5412/dth6.png" /> iki tane kare

  width özelliği, eklediğiniz resmin enini belirler. Piksel cinsinden bir değer yazmak için px kısaltmasını kullanabilirsiniz. Veya bulunduğu kısmın genişliğine göre oranlamak isterseniz sonuna % işaretini ekleyebilirsiniz. Örneğin bir hücrenin içine koyduğunuz resme width="100%" yazarsanız, resim hücrenin genişliğinde olur. Eğer hiç bir kısaltma eklemeden sayı yazarsanız, Tarayıcı bunu da piksel olarak düşünecektir. Eğer hiç bir width değeri vermezseniz, Resmin kendi genişliği kullanılır. Veya yükselik değerini belirtmişseniz, genişliği de ona göre ayarlar.
  height özelliği için de yukarıdaki şeylerden sözedebiliriz. Ancak height resmin genişliğini değil yüksekliğini belirler:

Kod Önizlemesi
<img width="50px" height="200px" src="https://img851.imageshack.us/img851/5412/dth6.png" />
<img height="40" src="https://img851.imageshack.us/img851/5412/dth6.png" />


  border değeri aslında çok basittir. 3, 5 gibi herhangi bir sayı yazarak kenarlığın, yani çerçevenin genişliğini belirlersiniz:
Kod Önizlemesi
<img border="4" src="https://img851.imageshack.us/img851/5412/dth6.png" />

  style değeri olarak css kodları kullanılır. Ancak şu an için bundan bahsetmeye gerek yok. Html dersleri bitmeden css derslerine başlamayacağız.

Resimlere link vermek

HTML dilinde bildiğiniz gibi, elementler kullanırız. İlk dersimizde bu elementleri kümelere benzetmiştik ve bazı kümelerin diğerlerini kapsayabileceğini söylemiştik. İşte şimdi o özellikten bahsetme zamanı:
Resim kümesinin href özelliği yoktur. Bu nedenle resimlere link vermek istediğimizde, href özelliği olan bir elementin içine koyarız. Ve bu element çoğunlukla, yazı kümemiz olan "a" dır:

Kod Önizlemesi
<a href="https://google.com"> <img src="https://img851.imageshack.us/img851/5412/dth6.png"/> </a>


Başlık Elementleri

Başlık elementleri, aslında son derece kısırlaştırılmış birer yazı elementidir. Başlık elementlerini şu şekilde gösterebiliriz:

Kod Önizlemesi
<h6>Merhaba</h6>
Merhaba
<h5>Merhaba</h5>
Merhaba
<h4>Merhaba</h4>

Merhaba

<h3>Merhaba</h3>

Merhaba

<h2>Merhaba</h2>

Merhaba

<h1>Merhaba</h1>

Merhaba









Bir dersin daha sonuna geldik. Önümüzdeki derse kadar alıştırma yapmayı ihmal etmeyin. Kod Önizleme Aracımız size alıştırmalarınızda büyük kolaylık sağlayacaktır :)
Tekrar görüşmek üzere.
Kod Dostu
Kod Dostu tarafından eklenmiş hazır kodlar için tıklayın.

Kod Puanı: Çok
kodNinjaları: Siyah Kuşak

Yorumlar:

Koddostu Ekip Üyeleri Arıyor! Tıkla Başvur!