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
