25
Ekim

Yazan: WEBMASTERYOLCU  |  Kategori: Uygulamalı Html Dersleri  |  Okunma: 31.395 Defa

Selamun aleyküm değerli arkadaşlar bu dersimizde sizlere resimlere çerçeve (border) eklemeyi ve sayfamızda resimlerden arkaplan görüntüsü oluşturmayı anlatacağım değerli arkadaşlar. Öncelikle bir önceki dersimizde resim ekleyi öğrenmiştik inceleme imkanı bulamayanlar için aşağıdaki linkten bakabilirler.

Bir Önceki Dersimiz: Web Tasarım Dersleri Resimlerde Klasör Yapısı ve Hizalama Ders 9

Resimlere Çerçeve Border Ekleme

Sayfanıa eklediğiniz resimlere kenarlık uygulayabilirsiniz arkadaşlar. Kenarlık (border) ekleyebilmek için <img etiketi içinde border parametresi kullanılarak yapılır. Border parametresinde değer sayısal olarak belirtilmelidir sayısal değer yükseldikçe resim borderimizinde kalınlığı artar sanki resim çerçevesinin kenarlarına benzer arttıkça

Border Uygulaması

Şimdi açıyoruz not defterimizi ve aşağıdaki kodları yazıyoruz daha önceki derslerde 2 ders resim eklemeyi anlattığım için burada değinmeyeceğim sizde kendi bilgisayarınızdan bir resim ekleyin farklı kaydet diyerek dosya adı border1.html olarak masaüstüne kaydedin.

<html>
<head>
<title>Web Tasarım Dersleri Resimlere Border Ekleme Ders 10</title>
</head>

<body>
<img src=”gul.jpg” border=”3″>
</body>
</html>

Aşağıdaki görüntü resin bordersiz hali ve onun altında border değeri 3 olarak verilmiş bir örnek göreceksiniz.

Resimin Bordersiz Görünümü

Resimin Bordersiz Görünümü

Border Değeri 3 Olarak Atanmış Resim Görüntüsü

Border Değeri 3 Olarak Atanmış Resim Görüntüsü

Evet arkadaşlar yukarda standart olarak border eklemeyi gördük birde bunlara şekil ve renk olayı var arkadaşlar bunu yapabilmek içinse style prametresini kullanacağız bunun için hazır örnekler mevcut onları kullanabiliriz nedir bu örnekler aşağıda görelim.

  • Dashed: Kesik Çizgili Border Oluşturmak İçin Kullanılır.
  • Dotted: Noktalı Border Oluşturmak İçin Kullanılır
  • Solid: Sürekli Çizili Kenarlık Oluşturmak İçin Kullanılır
  • Double: Çift Çizgili Border Oluşturmak İçin Kullanılır
  • Groove: Kabarık Border Oluşturmak İçin Kullanılır
  • Ridge: bir üstte yer alan Groovenin tam tersi işlem yapar

Border Style Uygulaması

Ben yukardaki stylelerden sadece ikitanesini uygulayacam arkadaşlar siz hepsini deneyin görün uygulamamda solid ve dashed stiline yer vereceğim aşağıdaki kodları uygulayıp dosya adı border2.html olarak masaüstüne kaydedin arkadaşlar.

<html>
<head>
<title>Web Tasarım Dersleri Resimlere Border Ekleme Ders 10</title>
</head>

<body>
<img src=”gul.jpg” style=”border:solid 3 red”>   <br><br>

<img src=”gul.jpg” style=”border:dashed 5 green”>
</body>
</html>

Html Border Style

Html Border Style

Evet arkadaşlar yukardaki iki örnek solid ve dashed stylelerini kulanılmış resimlerdir şimdide sayfamızda resimlerden arkaplan yapmayı görelim Allahın izniyle.

Arka Plan Resmi  <background>

Daha önce sayfamızın arkaplanına renk uygulamasını görmüştük bu seferde renk yerine arka plan resmi yani resimden sayfamıza arka plan oluşturmayı göreceğiz arkadaşlar.

Dikkat etmeni gereken resim seçimidir resim küçük ise ekranı kaplaması gerektiği için o resmi çoğaltacaktır ama resim büyükse çoğaltma gereği duymaz hemen bir uygulama yapalım Aşağıdaki uygulamayı yapıp dosya adı arkaplanresmi.html olarak kaydedin arkadaşlar.

<html>
<head>
<title>Web Tasarım Dersleri Sayfada Arka plan Resmi Ders 10</title>
</head>

<body background=”gul.jpg”>

</body>
</html>

Html Arka Plan Resmi Uygulaması

Html Arka Plan Resmi Uygulaması

Bugünkü Dersimizde Bu kadar arkadaşlar resimleri tamamen geçmiş bulunmaktayız yapamadığınız kafanıza takılanı yorum şeklinde sorabilirsiniz unutmayın öğrenmeden geçmeyin sıkılırsınız mutlaka öğrenerek başararak geçin bir sonraki dersimiz bağlantılar (linkler olacak)

Yazı ve derslerimizi gönlünüzce kullanabilirsiniz www.webmasteryolcu.com ibaresini unutmayarak.



   Paylaş

6 Yorum yapılmış

  • niyazi ateş
    28 Ekim 2010 | Cevapla

    ben yeniyim arkadaşım. arkaplan eklerken “gul.jpg” demişsin burada bu resim dosyasını nereye koyacağız. bu c belgelerimde bir dosya ise bunun yolunu vermemiz gerekmez mi. teşekkürler.

    • 30 Ekim 2010 | Cevapla

      Tabiki yolunu belirtmen gerekir ona değinmedim çünkü onunla ilgili resim klasörleri dersinde anlatım yaptım.

  • serap
    22 Nisan 2011 | Cevapla

    arka plan resmini ekranda sadece bir tane görebilmemiz mümkün mü acaba

  • esra
    25 Kasım 2011 | Cevapla

    bende arka plan resmi yüklemeye çalıştım fakat yüklenmedi
    örnegin:gul.rar gibi

  • 06 Ocak 2012 | Cevapla

    hocam öncelikle yazılan yorumlara cevap attığınız için teşekkür ederim benim sorum gul.jpg yi ekrana yayacaz bozulmadan bendeki resim büyük derse büyük koyarsanız sığar ekranı kaplar demişsiniz ama benim resim büyük olmasına rağmen ekrana dolmuyor verdiğiniz örnekteki gibi birden çok resim cıkıyor kodum bu
    yorumunuzu bekliyorum

Yorum yapın