1
Kasım

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

Merhaba değerli arkadaşalr bir önceki dersimizde tablolara girmiştik ve basitçe tablo eklemyi görmüştük bu dersimizdede tablo hücrelerine arkaplan rengi ve arkaplan resmi kullanmayı göreceğiz.

Öncelikle bir önceki derse inceleme imkanı olmayan arkadaşlar mutlaka onu inceleyerek bu derse geçsin tablo yapmayı o derste anlattım burada değinmeyeceğim bir önceki dersimiz aşağıda.

Bir Önceki Dersimiz: Web Tasarım Dersleri Tablolara Giriş Ders 12

Tablolara Arkaplan Renk Vermek

Daha öncede değinmiştim arkaplan renk konusuna işte orda öğrendiğiniz hemen buarada karşınıza çıkacak ve hıır gibi yetişecek arkadaşlar.

Bgcolor

Bgcolor ile arkaplan rengi vereceğimizi belirtiyorduk arkadaşlar daha önce sayfamızın arkaplan rengi için kullandık şimdi ise tablomuzun hücre veya hücrelerine arkaplan rengi vermek için kullanacağız.

Dikkat etmeniz gereken bgcolor parametresi table etiketi ile kullanılırsa tüm tabloya renk verir<tr> parametresi ile kullanılırsa tüm satırın arkaplan rengini düzenler etki eder değerli arkadaşalr.

<td> etiketi ile kullanıldığında ise yalnıca istediğiniz belirttiğiniz hücrenin arkaplan rengini ayarlar.

Tablolara Arkaplan Rengi Uygulaması

Evet değerli arkadaşlar açıyoruz not defterimizi ve başlıyoruz aşağıdaki kodları yazmaya aşağıdaki örnek 2 satır 2 sütunluk bir tablonun ilk satırına tüm satır olmak üzere arkaplan rengi kırmızı olacak 2. satır ise sadece bir hücreye yeşil rengi vereceğim kodları yazıp farklı kaydetten tablorenk.html olarak masaüstüne kaydedin.

<html>
<head>
<title>Web Tasarım Dersleri Tablolara Arkaplan rengi Ders 13</title>
</head>
<body>

<table border=”1″>
<tr bgcolor=”red”>
<td>1. Satır 1. Sütun</td>
<td>1. Satır 2. Sütun</td>
</tr>

<tr>
<td bgcolor=”green”> 2. Satır 1. Sütun</td>
<td>2. Satır 2. Sütun</td>
</tr>
</table>

</body>
</html>

Evet arkadaşlar yukardaki örneği özetliyim hemen 2 uygulama yaptık <tr bgcolor=”red”> burda ilk satır olarak ne dedim satıra renk vereceğim dedim satır kodumuz neydi <tr> o nedenle tr içine arkaplan kodunu ekledim.

2. satır ise sadece bir hücreye (Sütun) renk vereceğim dedim bunun içinse tüm satırı kaplamak yerine renk vereceğim hücrenin koduna eklemek gerekti <td bgcolor=”green”> ve 2. satırda 2 hücre vardı bense ilk hücreye ekledim.

Tablo Arkaplan Renk

Tablo Arkaplan Renk

Evet arkadaşlar tabloya arkaplan rengini vermeyi öğrendik ve şimdi geçiyoruz tablomuzda arkaplan resmi kullanmaya yani istediğimiz bir resmi tablomuzda arkaplan resmi yapacaz yani şunuda unutmayın o resim sizin içerik eklemenizi eklemez yazıda ekleyebilir tabloya şık görünüm sağlar.

Tablolara Arkaplan Resmi Ekleme

Background Daha öncede bu konuyu görmüştük arkadaşlar arkaplan resmi ekleme dersinde şimdi bunu tabloda uygulama yapacağız istediğimiz bir resmi arkaplan resmi yapma öncelikle yukarda tüm tabloyamı yada satıramı yada istediğimiz bir sütunamı renk verecez şeklinde anlattım yine aynı durum geçerli resmi tüm tabloyamı tüm satıramı yada istediğiniz hücreye eklemek için yukardaki teknik geçerli yine.

Dikkat etmeniz gereken tablo boyutunuz ile resim boyutu aynı olsun yoksa resim büyük olursa resmin bir kısmı görünmez bu uygulamamızda hepimiz aynı resmi kullanalım aşağıda vereceğim resmi masaüstüne arkaplanresmi.jpg olarak kaydedin arkadaşlar.

ve aşağıdaki kodları not defterinizle yazın ve tabloda bir fark olacak tabloya boyut vereceğim onu siz görmediniz onu bir sonraki derste detaylı göreceğiz ve kodları yazınca tabloresim.html şeklinde masaüstüne kaydedin resim ve sayfamı aynı yerde olmalı yoksa resim yolu belirtmediğimiz için resim görüntülenmez.

Uygulamada ben tüm tabloya arkaplan resmi uygulayacağım.

Bu Resmi Masaüstünüze arkaplanresmi.jpg adı ile kaydedin

Bu Resmi Masaüstünüze arkaplanresmi.jpg adı ile kaydedin

<html>
<head>
<title>Web Tasarım Dersleri Tablolara Arkaplan Resmi Ders 13</title>
</head>
<body>

<table width=”400″ height=”250″ border=”1″ background=”arkaplanresmi.jpg”>
<tr>
<td>1. Satır 1. Sütun</td>
<td>1. Satır 2. Sütun</td>
</tr>

<tr>
<td>2. Satır 1. Sütun</td>
<td>2. Satır 2. Sütun</td>
</tr>
</table>

</body>
</html>

Tablolara Arkaplan Resmi

Tablolara Arkaplan Resmi

Evet arkadaşlar bu örnekte tüm tabloya uygulanması için tablo koduma müdahale ettim satıra yada sütuna eklemek isteseydim ilk örneğimizdeki kurallar geçerli olacaktı.

Bugünkü dersimiz bu kadar arkadaşlar bir sonraki dersimizde tablo boyutlandırmaları göreceğiz tablomuz bizim istediğimiz gibi olacak sayfamızın istediğimiz kısmına gerekirse tüm sayfayı kaplarız.

Arkadaşlar ben bunları size html site yapın diye anlatmıyorum tasarımın temelini bilin diye öğretiyorum bunları bitirip veritabanlı sitelere geçecez bu mantığı öğrenince onlarda kral gibi eserler ortaya koyacaksınız az daha sabredin Allaha emanet olun.

Derslerimi sitenizde yada farklı alanlarda yayınlamak için izne gerek yok www.webmasteryolcu.com kaynak belirtmeniz dahilinde.

Blogger PostDeliciousDiigoStumbleUponFriendFeedTumblrMultiplyLiveJournalShare

6 Yorum yapılmış

  • Bahadırhan
    19 Aralık 2010 | Cevapla

    Hocam ALLAH razı oLsun..

  • suna gür
    22 Ekim 2011 | Cevapla

    lütfen yardım edin..bir tabloya resim eklemeye çalışıyorum ama iki resim yanyana olacak nasıl yapıcam ben bunu

  • yusuf
    06 Ekim 2013 | Cevapla

    farklı hücrelere farklı resim nasıl eklicez yardım edin

    • 12 Nisan 2014 | Cevapla

      Yusuf: Her hücrenin içerisine resim kodlarını tek tek uygulayarak

Yorum yapın