Ders 5

1-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="http://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 http://imageshack.us a kaydolabilirsiniz.

Kod	Önizlemesi
<img src="http://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="http://img851.imageshack.us/img851/5412/dth6.png" />

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="http://img851.imageshack.us/img851/5412/dth6.png" />
<img height="40" src="http://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="http://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. 2-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="http://google.com"> <img src="http://img851.imageshack.us/img851/5412/dth6.png"/> </a>

3-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ı (üyelik gerekiyor) size alıştırmalarınızda büyük kolaylık sağlayacaktır
Tekrar görüşmek üzere.

Ders 5

Merhaba

Merhaba

Merhaba

Merhaba

Merhaba

Merhaba