HTML TEMELLERİ
HTML NEDİR ? HTML Başlık(Heading) HTML Paragraf(Paragraphs) HTML Yazı Stili(Font Style) HTML Yazı Formatları(Format Text) HTML Renk Kodları(Color Codes) HTML Link Verme-Ekleme HTML Resim Ekleme(Add a Image) HTML Tablo Ekleme(Add a Table) HTML Liste Ekleme(Add a List) HTML Web Site Penceresi Ekleme(Iframe) HTML Head ve Meta Etiketleri HTML Semboller(Symbols) HTML Form HTML Form Elemanları(Form Elements) HTML Form Giriş Özellikleri (Form Input Properties)
HTML5
İLERİ SEVİYE
HTML 5 NEDİR? HTML Sayfa Bölümleri HTML Form Giriş(Input) Özellikleri HTML Form Elementleri HTML Form Özellikleri(Form Properties) HTML Canvas Kullanımı HTML SVG Kullanımı HTML Video Ekleme-Oynatma(Video Player) HTML Ses Ekleme-Oynatma(Audio Player)
CSS TEMELİ
CSS NEDİR ? CSS CSS-HTML İlişkisi CSS Backgrounds(Arkaplan) CSS Border(Kenarlık) CSS Margins(Dış Boşluk) CSS Padding(İç Boşluk) CSS Height and Width(Yükseklik ve Genişlik) CSS Box Model(Kutu Modeli) CSS Outline(Dış Çizgi) CSS Text(Metin) CSS Fonts(Yazı) CSS Icons(Ikon) CSS Links CSS List(Liste) CSS Tables(Tablolar) CSS Display(Görüntü-Ekran) CSS Layout - Width and Max-width(Yerleşim - Genişlik ve Max Genişlik) CSS Positon(Durum) CSS Overflow(Taşma) CSS Layout-Float and Clear(Yerleşim - Yön ve Temizliği) CSS Image Opacity / Transparency(Opaklık/Saydamlık) CSS Navigation Bar(Gezinme Menüsü)
html image ekleme
html image ekleme kodu
html image insertion code
html image code
html image tag
html src nedir
html src kullanımı
html src code
html src example
html src kodu
html src ne demek
html a image link
html image as link
html image link
html image add

HTML Resim Ekleme(Add a Image)

HTML Resim Ekleme(Add a Image)

Web Sayfalarımıza illaki resim eklemek istiyeceğiz. Resimsiz düz yazıdan oluşan bir site pek de ilgi çekmeyebilir o yüzden web sayfalarınıza çok abartmadan sayfanın konusuna uygun olucak şekilde resimler eklerseniz ziyaretçilerinizin dikkatini çekmesi daha kolay olucaktır.

Kullanımı:

<img src="kus.jpg" alt="Kuş resmi" width="140" height="135"><br>


<img src="resimler/kus.jpg" alt="Kuş resmi" width="140" height="135"><br>


<img src="../../resimler/kus.jpg" alt="Kuş resmi" width="140" height="135">

Kullanımı yukarıdaki gibi gelin şimdide teker teker parametrelerini inceleyelim...

Parametreler

 Resmin bulunduğu yeri yani kaynağını ifade eder.Resminiz nerede bulunuyor ilk önce ona bir bakın. Resminizin yerine göre yazacağınız kod da ona göre değişecektir.Bunu en iyi örneklerle açıklayabilirim..

1.Örnek: Resminiz eğer .html dosyanız ile aynı yerdeyse (aynı dizindeyse) yapmanız gereken sadece resminizin_ismi.dosya_uzantısı olarak src parametresine değer vermek.

Kullanımı:

<img src="kus.jpg">

Dosya Uzantısını Nereden Bileceğim?

Resminizin üzerine sağ tıklayıp özellikler deyin ve dosya türüne bakın ortak yazacaktır.

Büyük-Küçük Harf fark eder mi ?

Güzel soru gulucuk. Eğer böyle sorular sorabiliyorsanız ve cevabını araştırıyorsanız gerçekten bu işi merak ediyor ve öğrenmek istiyorsunuz demektir. Yok fark etmez canınız nasıl istiyorsa öyle yazın fakat unutmayın yanlış herhangi bir harf resminizi göstermemeye yetecektir bu yüzden de gereksiz zaman kaybı yaşarsınız ama tavsiyem resminizin ismini de dosya uzantısını da hepsini küçük harf yapın ve türkçe harf kullanmadan resminizi düzenleyin ve kod olarak da öyle yazın.

2.Örnek: Resminiz, .html dosyanız ile aynı dizinde bulunan bir klasörde ise bu seferde klasorun_ismi/resim_ismi.dosya_uzantısı şeklinde olsun.

Kullanımı:

<img src="kuslar/kus.jpg">

3.Örnek: Resminiz, .html dosyanızın bir alt klasoru içindeyse o zamanda yine aynı ama bu sefer bir alt dizine in diyeceğiz. Nasıl mı?

Kullanımı:

<img src="../kuslar/kus.jpg">

Not: .html dosyanız ile resiminizin bulunduğu yeri bulurken .html dosyanızdan başlayın arama yapmaya ona göre bir yol çizin.

alt: Resminizin ismini yazacağınız parametredir. Burada istediğiniz şekilde değer verebilirsiniz Türkçe karakter kullanabilirsiniz.Tarayıcıların ziyaretçilerin yapacağı resim aramalarında aranan resmi bu değer ile bulacaklardır buda size ziyaretçi kazandırır, mutlaka bu parametreyi kullananın.

Resminize bir de yükseklik ve genişlik değerleri vermelisiniz.Eğer vermek istemezseniz resminizin var olan boyutu geçerli olacaktır ama buda pek tercih edilmez çünkü resimler genelde büyük ve kaliteli olur.

width: Resminizin genişliğini px cinsinden ayarlamanızı sağlar.

height: Resminizin yüksekliğini px cinsinden ayarlamanızı sağlar.

Son olarak..

Kod editörümde sitem php ile kodlandığı için gösterilmiyor fakat dosyayı indirip kendi bilgisayarınızda çalıştırdığınızda resminiz ile dosya arasında yollar aynı ise kuş resmini göreceksiniz.



Paylaş:

Enes KILIÇ
Webmaster