7 Şubat 2014 Cuma

HTML Dersleri 14 Resim İşlemleri

Merhabalar arkadaşlar. Yeni bir dersimizle yine beraberiz. Bu anlatımımda sizlere HTML dosyasında resim işleme işlemlerini anlatacağım.

O zaman Bismillah diyelim ve başlayalım.

İlk olarak sayfa gövdesine bir resim nasıl yerleştirilir buna bakalım. Sayfa gövdesi deyince body etiketinden bahsettiğim anlaşılıyordur diye düşünüyorum. 

Body etiketinin parametrelerinden biri olan background ile sayfa arka planına resim koyabiliriz. 

Resim ekleme işi resim yolunun HTML dosyasında gerekli parametreye değer olarak girilmesi ile elde edilir.

Yani sadece resimin ismini ve uzantısını değer olarak vererek işlem yapmak istiyorsak resim ile HTML dosyası aynı dizin içinde olmalıdır. Yoksa resmin tam adresi verilmelidir.



Manzara diye isimlendirdiğim resmi Web sayfamın arka planı yapalım şimdi. Uzantısı.jpg dir.

<body background="manzara.jpg">

şeklinde olacaktır.

Görelim.




Böylelikle ilk resim ekleme işlemini tamamladık. Daha kapsamlı ve kullanışlı arka plan resim işlemlerini ise CSS derslerinde anlatmaya çalışacağım.

Şimdi gelelim sayfamıza bir resmi nasıl ekleriz buna bakalım.

  • HTML dosyasında resim ekleme etiketimiz


 <img src="adres"/> 

etiketidir. 

  • Src parametresini kullanmak zorundayız. 


  • Src (source) kaynak demektir. 


Buraya istersek HTML dosyamızla aynı klasörde bulunan resmin adını ve uzantısını yazabiliriz. Yada farklı klasörde bulunan resmin tam adresini yada bir internet sayfasında bulunan resmin tam adresini yazarak resmi gösterebiliriz.

Az önceki dosyamız için bir kaç resim daha atalım.

Dosyamıza eklediğim resimler ve isimleri.


  • Burada resimlerimize isim verirken Türkçe karakter kullanmamaya dikkat edelim.


Manzara zaten arka planımdı diğer resimleri sayfamıza ekleyelim o zaman şimdi.





  • Yukarıda gördüğümüz img etiketine ait width ve height parametreleri ile resmi boyutlandırabiliriz. 


  • Eğer bu değerleri kendimiz ayarlamaz isek resim sayfada orijinal boyutunda gözükecektir.


img etiketine ait parametrelerden bir diğeri olan alt ile devam edelim. 

Bu parametre resim üzerine mouse gelip belli bir süre beklediğinde resimle ilgili bir açıklama yazısını resmin üzerinde göstermek için kullanılır.

Kullanımı:

<img src="adres" alt="Açıklama" />

şeklinde kullanılır. 

  • Diğer bir parametremiz ise border dır. 


  • Resmimize bir çerçeve oluşturmak istiyorsak border parametresini kullanırız.


  • Bir diğer parametremiz ise align dır. Bu parametremiz ile resmi sağa sola hizalayabiliriz.


Şimdi bunları görelim.



Son olarakta bir resme link verme işlemine bakalım.

Bir sayfaya link verme işlemini 

<a href="adres">Açıklama </a> 

etiketi ile yaptığımızı biliyoruz. 

Burada normalde açıklama dediğimiz yer gidilecek sayfa ile ilgili bir bilgi yazardık ve o yazıya tıklama özelliği verilir tıklandığında da sayfaya giderdik. Burada da açıklama yazısı yerine resim koyacağız.

<a href="adres"><img src="adres" /></a> 

şeklinde yapacağız.

Şimdi iki resmimizden soldakine facebook sayfasına sağdakine ise google sayfasına link verelim.



Böylelikle resimlere tıklandığı anda bize adres gösterdiğimiz sayfaya götürecektir.

Böylelikle HTML in önemli konularından birini daha halletmiş olduk. Çalışan arkadaşlara kolaylıkar dilerim. Vesselam.


KONUNUN YAZARI NCFKR
DİĞER KONU ANLATIMLARI İÇİN TIKLA VE ÖĞREN

Hiç yorum yok:

Yorum Gönder