1.642 kez okundu

Web Tasarım Dersleri Border ve Sayfaya Arkaplan Resmi

10 10 1.642 kez okundu incelendi

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.

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 StyleHtml 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)

Gelen aramalar :

Paylaş !

Yorum yap

Önceki yazıyı okuyun:
Web Tasarım Dersleri Resimlerde Klasör Yapısı ve Hizalama

Html Resim Eklerken Klasör Yapısı Biz şuana kadar nasıl çalıştık arkadaşlar kullandığımız resim masaüstünde tasarladığımız sayfa masaüstünde yani her ikiside...

Kapat
Barış Ozcan Facebook Sayfasi
Barış Ozcan Twitter