- Katılım
- 2 Ağustos 2010
- Mesajlar
- 393
- Reaction score
- 0
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ü
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.
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
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ı
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.
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ü 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
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 StyleEvet 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ı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.