Türküm, doğruyum, yapışkanım! |
|
HTML Tags - 7 (Images)7. bölüm resimler (imajlar) - Html sayfamızı oluşturmayı öğrendik, tabloları öğrendik, form yapmayı öğrendik, liste oluşturmayı öğrendik, şimdi ise sayfa içeriğimizi oluştururken veya sitemizin arka planı için kullanabileceğimiz resimleri (imajları) nasıl ekleyebileceğimizi öğrenelim...
Html sayfamıza resim eklediğimizi <img> etiketi ile belirtiriz. Image etiketlerinin içi boştur. Yani paragraflarda (<p>) veya tablo hücrelerinde (<td>) olduğu gibi içine metin veya başka birşey koyamayız. Image etiketi diğer etiketler gibi bir kapama etiketine ihtiyaç duymaz. Bu etiket sadece çeşitli özellikler içerir; bunları aşağıda açıklayacağım. Eğer sayfamızda bir resim göstermek istiyorsak image etiketinin "src" özelliğini kullanmalıyız. Src, "source (kaynak)" özelliğinin kısaltması olarak kullanılır. Bu özellikte resmi hangi klasör içinden sayfaya bağladığımızı gösteriyoruz. |
|
Yukarıdaki basit kod ile sayfamıza belirttiğimiz adresten resmi yükleterek göstermiş olduk. Canlı bir örnek verecek olursak: Örnek kodlarda görüldüğü gibi adresi iki şekilde verebiliyoruz. Direkt imaj klasöründen veya tüm alan adıyla birlikte. Sonuç olarak her iki şekilde de resmimiz aşağıdaki gibi sayfamızda beliriyor. Klasör isimleri isteye bağlıdır, isterseniz hiç bir klasör olmadan da sayfanızın bulunduğu yere resimleri atabilirsiniz ve resmi buradan sayfanıza bağlayabilirsiniz (<img src="filcik.gif"> gibi); bu sizin çalışma şeklinize kalmıştır. 
Image etiketini paragrafların veya diğer taşıyıcı elementlerin (div, td, li vs) içine koyabileceğiniz gibi bunların aralarına da koyabilirsiniz. Bu durumda tarayıcınız ilk olarak 1. paragrafı sonra resminizi ve daha sonra 2. paragrafı gösterecektir. Alt özelliği imajlara alternatif bir isim vermek istediğimizde kullandığımız bir özelliktir. Resimlerimizin dosya adları kimi zaman resmin içeriği ile alakalı olmayabilir, (ör: 0001.jpg) Böyle durumlarda site ziyaretçisini resim hakkında bilgilendirme amacı ile bu alternatif yazılar kullanılır. Ayrıca diğer önemli bir özelliği de tarayıcısının resim gösterme özelliğini kapatarak siteleri ziyaret eden kullanıcılar için bilgilendirme niteliğindedir. (Ayrıca xhtml ile birlikte alt özelliği kullanmak zorunlu olmuştur, geçerlilik testinde (validation) karşınıza alt özelliği kullanmadığınızda bir çok uyarı gösterilecektir.) Yukarıda da görüldüğü gibi dosya isminden farklı olarak resmimize alternatif bir yazı ekledik. Soldaki resim üzerine mouse ile geldiğinizde "Katrasa'nın fili" yazısının çıktığını göreceksiniz. (Sağ taraftaki resim bu işlem gerçekleştiğindeki görüntüdür.) 
Firefox Alt özelliğini kavrayamamaktadır ve mouse ile resmin üzerine gelindiğinde herhangi birşey göstermemektedir. Bunun yerine Firefox için Alt özelliğinin yanına title="" özelliğini de yazmalısınız. (Ör: <img src="/imaj/filcik.gif" alt="Katrasa'nın fili" title="Katrasa'nın fili"> ) Ufak bir ipucu Sayfanıza çok fazla ve büyük boyutlarda resim eklemek uzun yüklenme sürelerine neden olarak ziyaretçilerinizi sıkabilir. Bunun önüne geçmek için öncelikle, "bu resmi sayfama kesin eklemeli miyim?" sorusunu yöneltin eğer cevap olumluysa boyutunu ayarlamaya geçin. Resimlerinizi web için kaydederken tek bir dosya formatına takılı kalmayın. En kaliteli resmi en az boyutta hangi format veriyorsa o formatta kayıt yapın; .jpg, .gif, .png-8, .png-24, WBMP. Resimler html sayfamızda arkaplan resmi olarak da kullanılabilmektedir. Resimleri tüm sayfanın arkaplanı için kullanabilmenin yanı sıra paragrafların, oluşturduğumuz kutuların, tabloların, formların, butonların, kısacası tüm kapsayıcı elementlerin arkaplanları için kullanabilmekteyiz. Ben aşağıda tüm sayfa için nasıl arkaplan kullanabileceğinizi göstereceğim, diğerleri için kendiniz deneme yapabilirsiniz. Yukarıdaki kod tüm sitenin arkaplanını belirttiğimiz resim ile kaplayacaktır. Aksi belirtilmedikçe varsayılan olarak resim x ve y doğrultusunda tüm sayfaya döşenecektir. 
Resmin döşendiği sayfaya buradan ulaşabilirsiniz. Bu özellik eklediğiniz resimleri nasıl konumlandıracağınızı belirlemenizde yardımcı olmaktadır. Örnekler: 1- align="bottom" (Resim yazıya alttan blok). Kodun içinde herhangi bir align özelliği belirtilmezse varsayılan olarak bottom parametresi atanır. Benim filim 2- align="top" (Resim yazıya üstten blok) Benim filim 3- align="middle" (Resim yazının ortasına blok) Benim filim 4- align="left" (Resim sola dayalı)
5- align="right" (Resim sağa dayalı)
Son olarak resimlere link nasıl verilir açıklayarak bu konuyu kapatıyorum.
Yukarıda görüldüğü gibi resimlere link, metinlere verilme şekli ile aynıdır. Burada varsayılan olarak link verilen resmin etrafında mavi bir border çıkar. Bunu yok etmek için border parametresini "0" olarak ayarlamamız gerekir. Kodumuzun son şekli aşaıdaki gibi olacaktır. Image larda bir de map özelliği vardır. Mapler bir resmin sadece belirli bir alanına link vermemizi sağlar. Artık pek kullanılmadığından anlatmaya gerek duymadım. Öğrenmek isteyenler google amcadan yeterli bilgiye ulaşacaklardır. Bitti bu kadar, gelsin ders 8.
|
|
'04-'09, © Serkan AVCI katrasa.com - birine mi bakmıştın canım? en üstteyim... Katrasa.com üzerinde bulunan tüm yazılı ve görsel malzemenin telif hakları belirtilen isimlere aittir. İzinsiz kopyalamak, kullanmak, yayınlamak tehlikeli ve yasaktır. Hırsızların kalbi itinayla kırılır, eline verilir. |
|
|
|
|
|
Blogbox MAKALELER HTML Dersleri |
|
BAĞLANTILAR TAKİP EDİLENLER |
|
KATRASA on ... |
Gözlerine inanamazsın