Öğretmenler Forumu

Lütfen giriş yapın veya üye olun.

Kullanıcı adınızı, şifrenizi ve aktif kalma süresini giriniz
Gelişmiş Arama  

Haberler:

Gönderen Konu: Html ve Css kullanarak sayfaya resim ekleme  (Okunma sayısı 31094 defa)

Rindâne

  • Y
  • Tam
  • *****
  • Çevrimdışı Çevrimdışı
  • İleti: 228
    • Öğretmenler Forumu
Html ve Css kullanarak sayfaya resim ekleme
« : 13 Aralık 2009, 18:35:37 »

 Bu sayfada yaptığımız html sayfalara resim dosyalarının nasıl eklendiğini görelim. Hatırlarsanız web adlı klasörümüzün içine resimler adlı başka bir klasör daha oluşturmuştuk. Resimler klasörümüzün içine genişliği 300 px, yüksekliği ise 400 px boyutlarında 11.jpg adında bir resim dosyası koyalım. Şimdi index.html sayfamızı açalım ve yazdığımız kodların altına şu kodu ekleyelim.

<img src="resimler/11.jpg" align="left" width="300" height="400">

 kodu ekledikten sonra sayfamızı yeni hali ile kaydedelim ve üzerine tıklayarak açalım, gördüğünüz gibi sayfanın sol tarafında resim yerini aldı. Bu basit html kullanımdır
align="left" (resim solda)
align="right" (resim sağda)

 Basit html kullanarak resmi ortalamak için ise

<p align="center"><img src="resimler/11.jpg" width="300" height="400"></p>

 kodunu kullanmamız gerekir, dikkat ettiyseniz <p> etiketine align="center" kodunu ekledik ve <img> etiketi içindeki align="left" veya align="right" etiketini sildik.

 Şimdi bu basit html kullanımdan sonra Css yardımıyla resimlerimizi şekillendirmeyi görelim. bukalemun.css dosyamızı açalım ve

img.sagresim {float:right;}
img.solresim {float:left;}

 kodlarını ekleyelim ve kaydedelim.

 Şimdi html sayfamızda kullandığımız resim <img> etiketini silelim ve onun yerine

<img class="solresim" src="resimler/11.jpg" width="300" height="400" />
kodlarını ekleyelim, gördüğümüz gibi resim yine solda, peki ne yaptık? Css dosyamıza solresim sınıflı resimler için verdiğimiz left değeri ile resimleri sola almasını söyledik.

 Css ile resimler ortalanabilir tabii ki ama sayfaya DOCTYPE kodlarını eklemeden bu özellik çalışmaz, kafamızı karıştırmamak için bu konuya ileride değineceğiz. Şimdilik yaptığımız sadece css ve html kullanımının mantığını anlamaya çalışmak. Mantığı anladıktan sonra asıl konulara gireceğiz ve web sayfaları yapmaya başlayacağız.

Resimlere link vermek
Kayıtlı
Öğretmenler, yeni nesil sizlerin eseri olacaktır.
Mustafa Kemal ATATÜRK