İPUCU

Sosyal medya ve Sosyal Platformlar Sosyal Medya Ve Sosyal Platformlar Hakkında Her şey.

Seçenekler

HTML KodlarıylA Sıte Tasarlama [Alınıtıdır]

31-08-2011 21:13
#1
N0ChanceNooB - ait Kullanıcı Resmi (Avatar)
Forumdan Uzaklaştırıldı
Üyelik tarihi:
08/2011
Nereden:
Zonguldak
Mesajlar:
24
Teşekkür (Etti):
0
Teşekkür (Aldı):
11
Konular:
10
Ticaret:
(0) %
kod:<html><head><title>Tablo</title></head><body><table border="1"> <tr> <td>Elma</td> <td>Muz</td> </tr> <tr> <td>Mavi</td> <td>Yeşil</td> <tr></table></body></html>

Burada basit bir tablo yaptık örnek site için:
Tıkla

Şimdi ise tek satırlı ve 4 hücreli bir tablo yapalım ama bu sefer yazının fonları tablonun boyunu ve tablonun backgroundları ile oynayalım.

Tablonun hangi hücrenin boyutu ile oynucaksak, onun içine yazıcaz kodumuzu, yani:

<td width="250px">Sarı<td>

Bu şekilde olucak. Fon ile oynamak için yine hücreye gidiyoruz;


<td><font color="red" font size"20px" font size="35px">kırmızı</font></td>

Buradaki hücremizin kırmızı yazısının boyutunu 35 px yaptık ve boyutunu ise 20 px yaptık, şimdi 3. hücremize background ekleyelim. Bunun için ise hücremizin içine gidiyoruz ve

background="resimadi.jpg"

kodumuzu ekliyoruz, yani:


<td background="1.jpg">Siyah</td>

Bu şekilde diğer 4.hücreyi kırmızı yapalım; bunun içinse bgcolor="red" kodumuzu kullanıcaz. <td bgcolor="red">Yeşil</td>
Bu şekilde tablamuzu görelim.

kod:

<html><head><title>Tablo</title></head><body><table border="1"> <tr> <td width="250px">Sarı</td> <td><font color="red" font size"20px" font size="35px">kırmızı</font></td> <td background="1.jpg">Siyah</td> <td bgcolor="red">Yeşil</td> </tr></table></body></html>
Örnek site:Tıkla

Peki, şimdi ise yine tek satırlı, 3 hücreli bir tablo yapalım. Bu sefer tabloların ikisinde resim olsun, ortadakinde ise Sanalkurs yazsın. Resim px'leri ise 150x150 olsun. İki td arasına resmimizi cağırıyoruz:


<td><img src="1.jpg" width="150px" heigth="150px"></td>

İki hücreye de:

kod:

<html><head><title>Tablo</title></head><body><table border="1" width="800" align="center"> <tr> <td><img src="1.jpg" width="150px" heigth="150px"></td> <td>Sanalkurs</td> <td><img src="1.jpg" width="150px" heigth="150px"></td> </tr></table></body></html>
Örnek Site : Tıkla

Bazı şeyler dikkatinizi çekti mi? İki resim de sola yatık. İşte gelelim asıl konuya. Bunları ayarlamak için hücrenin boyutunu ayarlamamız gerekiyor. Çağırdığımız resimin boyutu kaç px'di? 150px idi değil mi? İşte tablomuzu da 150px yapıcaz. (width="150px") Bir de Sanalkurs yazımızı ortalayalım, bunun için ise;


<td><p align="center">Sanalkurs</p></td>
kodunu kullanıcaz.

kod:

<html><head><title>Tablo</title></head><body><table border="1" width="800" align="center"> <tr> <td width="150px"><img src="1.jpg" width="150px" heigth="150px"></td> <td><p align="center">Sanalkurs</p></td> <td width="150px"><img src="1.jpg" width="150px" heigth="150px"></td> </tr></table></body></html>
örnek site :Tıkla
Şimdi ise 2 satırlı, ilk satır 2 hücreli, ikinci satır ise 3 hücreli bir tablo yapalım. Bunu colspan="" kodu ile yaparız. Ben colspan'a bu tablo için 2 değerini vericem. Bu değer tablodan tabloya değişir.

kod:

<html><head><title>Tablo</title></head><body><table border="1" width="400" align="center"> <tr> <td colspan="2">Elma</td> <td>Muz</td> </tr> <tr> <td>Mavi</td> <td>Yeşil</td> <td>Siyah</td> <tr></table>
</body>
</html>


Bookmarks


« Önceki Konu | Sonraki Konu »
Seçenekler

Yetkileriniz
Sizin Yeni Konu Acma Yetkiniz var yok
You may not post replies
Sizin eklenti yükleme yetkiniz yok
You may not edit your posts

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodları Kapalı
Trackbacks are Kapalı
Pingbacks are Kapalı
Refbacks are Kapalı