Resim Ekleme
İstediğimiz bir resmi,- ister bilgisayardan ister bir web sayfasından- kendi sayfamıza ekleyebiliriz. Bunun için <img src=”..”> etiketini kullanacağız. Önce örneğimizi görelim ardından ben açıklamayı yapayım.
Resim eklemek için <img src=”...”> etiketini kullandık. Tıpkı <br/> etiketi gibi bu da tek parçadır. Ben eklemek için bir kedi resmi belirledim. Resme sağ tıklayıp özelliklere geldim ve ordan resmin konumunu kopyaladım. Bu, C:\Users\mustafa\Desktop\Yeni klasör idi. Bunu <img src=”...”> deki noktalı kısma yapıştırdım. Resmin adı kedi.jpg ‘ydi. Yapıştırdığım kısmın yanına bir slash “\” işareti koyup kedi.jpg yazdım. <img src="C:\Users\mustafa\Desktop\Yeni klasör\kedi.jpg" > haline geldi ve artık kullanıma hazır.
Resmin konumunu ve adını uzantısıyla beraber (.jpg .png .gif vs) yazmak resmin sayfamızda görünmesi için yeterli. Bunun yanı sıra resmin boyutunu ayarlamak da bizim elimizde. Uzunluk ve genişliğini ayarlamak için width=”..” ve heigth=”..” ifadelerini kullanacağız. Hemen örneğimizi yapalım.
Gördüğünüz gibi, zor bir yanı yok.
Eğer resmin ve not defterinde oluşturduğumuz html sayfasının konumu aynıysa sadece resmin adını yazmamız yeterli olur. Mesela masaüstünde yeni klasör oluşturalım ve resmi oraya kopyalayalım. Sonra aynı klasör içerisinde bir de not defteri oluşturup kodlarımızı yazalım.
Yine aynı şekilde resmimiz web sayfasında görüntülenecektir. Bu şekilde çalışmak bizi gereksiz kodlardan kurtarır, daha sade bir yapıya kavuşturur.
Herhangi bir internet sitesinde gördüğünüz resme sağ tıklayıp URL adresisini kopyalarsanız; resmi kendi web sayfanızda görüntüleyebilirsiniz.
Arka planı değiştirme
Arka planı değiştirmeyle ilgili de iki örnek yapalım. Ama unutmayın ki sayfaya görsel açıdan zenginlik katacak olan CSS'tir. HTML bu konuda yetersiz kalıyor. Yine de bilmekte fayda var.
Bu ilk örneğimiz. Arka plan rengini değiştirmek için normal <body> etiketinin yanına bgcolor=”..” ifadesini ekledik ve noktalı yere black yazdık. Açtığınızda karşınızda siyah, boş bir web sayfası olacak. Black yerine diğer renk adlarını veya renk değerini yazabilirdik. #000000 ifadesi de siyahı belirtir. Kırmızın değeri # FF0000 , mavinin değeri #0000FF ‘dir. Bunların ezberlenmesine gerek yoktur. Küçük bir Google araştırmasıyla bütün renklerin ve tonlarının değerini bulabilirsiniz.
Şimdi ise arka plana bir resim yerleştirelim.
Kedi resmimiz arka plana yerleşmiş oldu. Resim arka planı tamamen kaplamaz. Orijinal boyutuna göre tekrar eder. Bununla ilgili detaylı bilgileri CSS’ te öğreneceğiz.
