ALLAH (cc)'IN EN GÜZEL İSİMLERİ (ESMA-ÜL HÜSNA)
el - HALÎM

Cezada, acele etmeyen, yumuşak davranan.

     ANASAYFA    |   Ben Kimim?      De ki: "Rabbim! Bağışla, merhamet et. Çünkü sen merhamet edenlerin en hayırlısısın!" - Mü'minûn, 23/118

Web Sayfasına Resim Ekleme

Web Sayfasına Resim Ekleme
 + Yazıyı Büyüt    - Yazıyı Küçült           

Hayırlı günler bugün web sayfasına dreamweaver ile ve kodla resim eklemeyi anlatacağım.

Resim eklemeye başlamadan önce resimleri web sayfanıza ekleyeceğiniz klasöre atmanız gerekmektedir. Resimlerinde boyutlarını küçültmenizi tavsiye ederim. Çünkü büyük boyutlu resimler site belleğinizi ve site trafiğinizi dolduracaktır. Bu da sitenizi yoracak ve geç açılmalara neden olacaktır.

Dreamweaver ile Resim Ekleme:  Kaynak: www.mustafakarsli.com

Benim bilgisayarda cs5 Türkçe kurulu olduğu için ona göre anlatacağım. İlk olarak dreamweaverı açalım ve menülerden Ekle -> Görüntü (İnsert -> İmage) alt menüsüne tıklıyoruz. Karşımıza resim ekleme penceresi gelecek bu pencereden eklemek istediğimiz resmi seçiyoruz ve tamama basıyoruz. Aşağıda resmi inceleyebilirsiniz.

Dreamweaver Resim Ekleme Penceresi

Yukarıdaki pencerede tamama bastıktan sonra karşımıza görüntü etiket tanımlama penceresi gelecek bu pencereden Alternatif metin yazan yere resim açıklamasını yazıyoruz. Bu açıklama fare resmin üzerine gelince görünecek. Uzun açıklama yazan yere ise resme link vermek istiyorsak oraya bağlantı adresini yazıyoruz. Aşağıda resmi inceleyebilirsiniz.

Dreamweaver Resim Etiketi Belirleme Penceresi

Yukarıdaki pencerede tamama bastıktan sonra resmimiz sayfamıza eklenecektir.  Resmin üzerine bir kere tıklayarak seçili konuma getirdiğimizde dreamweaverın alt kısmındaki özelikleri kullanarak resmi biçimlendirebiliriz. Aşağıda resim özelliklerini görebilirsiniz.

Dreamweaver Resim Özellikleri Penceresi

Yukarıdaki resme göre kısaca açıklayacak olursak;

  • Gen: Resim genişliği  Kaynak: www.mustafakarsli.com
  • Yük: Resim Yüksekliği
  • D Boşluk: Resmin diğer nesnelerle dikeydeki boşluğu piksel olarak.
  • Y Boşluk: Resmin diğer nesnelerle yataydaki boşluğu piksel olarak.
  • Kaynak: Resmin adresi
  • Bağ: Resme bağlantı (link) vermek için kullanılır.
  • Hedef: Resme bağlantı verildiğinde aktif olur. Bağlantı verildiğinde tıklanınca sayfanın nerede açılacağı seçilir. _blank:yeni sayfada, _self:aynı sayfada, …
  • Orijinal: Eklenen resim yüksek çözünürlüklü ise sayfa yüklenirken resim açılmada sorun olmaması için düşük çözünürlüklü aynı resim seçilir ve sayfaya yüksek çözünürlüklü resim yüklenene kadar düşük çözünürlüklü resim görüntülenir.
  • Alt: Resme açıklayıcı yazı yazılır. Fare resmin üzerine gelince resmin üzerinde burada yazan yazı görünür.
  • Düzenle: Resmi resim editörleriyle düzenlemek için kullanılır.
  • Kenarlık: Resme kenarlık vermek için kullanılır. Boş yada 0 kenarlık yok anlamındadır. 1,2,3,.. şeklinde değer verilir. Sayı büyüdükçe kenarlık kalınlığı artar.
  • Hizala: Resmi sayfadaki yazılar ve nesnelerle hizalamak için kullanılır. Orta, sol, üst, …
  • Sınıf: Resme belirli sitiller vermek için kullanılır.

Yukarıda anlatılanlara göre kendi web sayfalarınızı zenginleştirebilirsiniz.

Kod ile Resim Ekleme:  Kaynak: www.mustafakarsli.com

Bir web sayfasına kod ile aşağıdaki gibi resim eklenir:

<img src="resimadresi/resim.jpg" width="300" height="200" align="middle">

Yukarıda kod ile resim eklenir. Resim eklemek için img etiketi kullanılır. Src parametresi resmin adresini yani konumu belirtir. Width resim genişliğini, height resim yüksekliğini belirtir. Align ise resmin hizalanması belirtir. Align parametresindeki middle ise dikeyde ortalı olduğunu gösterir.

Başka sitelerdeki resimleri de web sayfanıza ekleyebilirisiniz. Eklemek istediğiniz resmin tam adresini img etiketindeki src parametresine vermeniz gerekir.

Bu şekilde web sayfalarınıza resimler ekleyebilirsiniz. Evet hadi bakalım web sayfalarımızı biraz görsel yönden zenginleştirelim. Gerisi sizin çalışmanıza kalmış.

İlerleyen günlerde başka derslerde görüşmek üzere sağlıcakla kalınız.

Mustafa KARSLI   Kaynak: www.mustafakarsli.com

( 21088 ) kez okundu     -     16.03.2013    Tweetle     
Dreamweaver ile Resim Ekleme, Web Sayfasına Resim Ekleme, Kod ile Resim Ekleme, siteye resim ekleme, resim nasıl eklenir, sayfaya resim ekleme, insert image, html resim ekleme, resim yükleme, html, html görüntü ekleme, görüntü ekleme, ekle görüntü
Ziyaretçi Yorumları
( 2 ) Yorum
Tümünü Göster
Ömer Kaya - İstanbu - 15.11.2014 15.30
     Ben internet sayfasına resim koymak istiyorum.

ayçe - ordu - 22.07.2014 14.36
     merhabalar ; ben web sitesine resim yüklemek istiyorum yardımcı olur musunuz.

----- Mustafa KARSLI ---->
Daha detaylı bilgi verir misiniz? Nasıl bir site ve dinamik mi statik mi yüklemek?

Yorum Ekle
Güvenliğiniz için iP adresiniz kaydedilmektedir. Herhangi bir Hukuki Dava ile karşılaşmamak için hakaret içeren sözler ve argo kelimeler kullanmayınız.
İsim
:
Yorum
:
En fazla 400 karakter
Şehir
:
E-Posta
:
E-Posta adresi Yayınlanmaz
(Güvenliğiniz için ip adresiniz (18.97.9.168) kaydedilecektir)
  Yeni Dersleri Takip etmek istiyorum. Adresime E-Posta Gelmesini Onaylıyorum.
BENZER YAZILAR
Android
Arduino
Bilgisayar Ağları
biliMKurdu
Bilişim Teknolojileri
C Sharp
Çalışmalar
Donanım
Evde Deney
Fireworks
Flash - Action Script 3
Gezdik ve Gördük
HTML
JavaScript
Kişisel Gelişim
Okul Öncesi Etkinlik
PHP
Projeler
Raspberry Pi
Scratch
Silverlight
Şanlı Tarihimiz
Yarışmalar
Yazılarım
  Zamanlanmış Duyuru/Ödev Bulunmamaktadır...  
Ebu Hureyre'nin (r.a.) anlattığına göre: Hz. Peygamber (a.s.) "Müslüman, kardeşinin pazarlığı üzerine pazarlık yapmasın" buyurmuştur.

Müslim, Büyu' 9 (l, 1154)
Sosyal Medya Hesabım Bulunmamaktadır. Bu nedenle başka platformlarda paylaşımım bulunmamaktadır.
Kişisel resim ve yazıları kullanmak yasaktır. Bunun dışındaki dersleri İsim ve Kaynak göstermek şartıyla kullanmak serbesttir.
 Aktif ziyaretçi : 3
 Bugün : 145
 Toplam : 2729355
Mustafa KARSLI - Bilişim Teknolojileri Öğretmeni © 2008 - 2024  
Site Haritası

 

3