www.kadir-18.yetkin-forum.com

şiir, söz, sms, hazır sms, bedava sms, html, html kodlar
 
AnasayfaAnasayfa  ANA SAYFAANA SAYFA  SSSSSS  AramaArama  Üye ListesiÜye Listesi  Kullanıcı GruplarıKullanıcı Grupları  Kayıt OlKayıt Ol  Giriş yap  
Giriş yap
Kullanıcı Adı:
Şifre:
Beni hatırla: 
:: Şifremi unuttum
Arama
 
 

Sonuç :
 
Rechercher çıkıntı araştırma
En son konular
» GENÇLİK BÖYLEDİR İŞTE
Paz Şub. 22, 2009 2:09 pm tarafından Admin

» GECE BİR NETİCEDİR
Paz Şub. 22, 2009 2:09 pm tarafından Admin

» ESKİ SAADETİNLE
Paz Şub. 22, 2009 2:06 pm tarafından Admin

» ..ÇOCUKLUK..
Paz Şub. 22, 2009 2:05 pm tarafından Admin

» ÇÖKÜYORUM
Paz Şub. 22, 2009 2:05 pm tarafından Admin

» CAN YOLDAŞI
Paz Şub. 22, 2009 2:04 pm tarafından Admin

» BİR KAPI AÇIP GİTSEM
Paz Şub. 22, 2009 2:04 pm tarafından Admin

» BEN AŞK ADAMIYIM
Paz Şub. 22, 2009 2:03 pm tarafından Admin

» BEN ÖLECEK ADAM DEĞİLİM
Paz Şub. 22, 2009 2:03 pm tarafından Admin

Kimler hatta?
Toplam 1 kullanıcı online :: 0 Kayıtlı, 0 Gizli ve 1 Misafir

Yok

Sitede bugüne kadar en çok 28 kişi C.tesi Mart 05, 2011 5:42 pm tarihinde online oldu.

Paylaş | 
 

 html dersleri 9

Aşağa gitmek 
YazarMesaj
Admin
Admin
avatar

Mesaj Sayısı : 319
Kayıt tarihi : 27/01/09

MesajKonu: html dersleri 9   Çarş. Ocak 28, 2009 12:09 am

Tablo konusuna devam ... (HTML Table 2)
Merhaba,
Hemen derse geçebilir miyiz? Cevabınızın evet olduğunu duyar gibiyim Smile
Bir önceki dersimizde Tablo konusuna başlamıştık.

Hatırlatma (iki hücreli tek satırlı tablo kodu):
<table> <tr> <td></td> <td></td> </tr> </table>

Daha önceki derslerimizde şu özellikleri görmüştük. (HTML etiketi değil özelliklerini gördük)
align
height
width
bgcolor
border
Html etiketlerinin çeşitli özellikleri vardır bu özelliklerden bazıları yukarıdaki gibidir.

Html etiketi ayrı şeydir html etiketinin özelliği ayrı şeydir.
HTML etiketleriyle , etiketlerin özellikleri arasındaki farklar şunlardır.
html etiketleri < > bu iki işaret arasında olur html etiketinin özellikleri de aynı şekilde < > işaretleri arasında olur. Fakat < den hemen sonraki kelime html etiketidir.
< den sonraki kelimenin sonrasında birşeyler varsa onlar da etiketin özellikleridir.
özellik="değeri" şeklinde yazılır ve her özellikle html etiketi arasında MUTLAKA boşluk olmalıdır.

table - tr - td etiketleri de align (hizalama), height (yükseklik), width (genişlik), bgcolor (zemin rengi), border (çerçeve) özelliklerini alabilirler.

Tek hücreli bir tablo yapalım. HTML Kodu Oluşan Görüntüsü
<table border=4>
<tr>
<td> &nbsp; </td>
<td> &nbsp; </td>
</tr>
</table>



--------------------------------------------------------------------------------

Burada iki hücrenin içinde de &nbsp; kullanıldı bunun nedeni nedir sizce?
border=4 değerini arttırırsanız şöyle bir görüntü elde edersiniz.
border=10 yapılmış hali yukarıdaki gibidir.
Burada hangi alanın büyüdüğüne dikkat ediniz.
tabloya width (genişlik) özelliği ekleyip width=200 yapalım.

HTML Kodu Oluşan Görüntüsü
<table border=10 width=200>
<tr>
<td> &nbsp; </td>
<td> &nbsp; </td>
</tr>
</table>



--------------------------------------------------------------------------------

Tablonun boyu 200 piksel oldu (pikselin ne olduğunu ileriki zamanlarda açıklayalım inşaAllah)
fakat siz pikselin bir uzunluk ölçüsü birimi olduğunu bilmeniz gerekir.
yukarıdaki iki hücresi olan (<td> </td> <td> </td>) tabloya genişlik değeri olarak 200 piksel verdik.
Fakat dikkat ederseniz yüksekliğini belirtmediğimiz halde hücrelerin yaklaşık 30 piksel kadar yüksekliği var.
Yukarıda size hücrelerin içine neden &nbsp; yazdığımızı sormuştum.

Herhangi bir yazı yazdığımızda hücreye geçerli olan yazı puntosu (büyüklüğü) kadar yükseklik verilir.
Hücrelerin içi boş olduğu için yükseklik verilemeyeceği için &nbsp; değerini yazmıştık.
Bizim gözümüz orayı boş görse bile &nbsp; olduğu için tarayıcı orayı dolu kabul eder ve oraya geçerli yazı büyüklüğü kadar yükseklik verir.

Tabloya şimdi de 200 genişlikle birlikte 100 piksel de yükseklik verelim. HTML Kodu Oluşan Görüntüsü
<table border=10 height=100 width=200>
<tr>
<td> &nbsp; </td>
<td> &nbsp; </td>
</tr>
</table>



--------------------------------------------------------------------------------

Şimdi hücrelerin içine birşeyler yazalım ve zemin rengi verelim.
İstersek tabloya zemin rengi verebileceğimiz gibi hücrelere ayrı ayrı da zemin rengi verebiliriz.
Tabloya zemin rengi verirsek bütün hücrelerin zemin rengini bir seferde vermiş oluruz.

Birinci hücrenin içine web dersleri yazıyoruz. HTML Kodu Oluşan Görüntüsü
<table border=1 height=100 width=200>
<tr>
<td> Web dersleri </td>
<td> &nbsp; </td>
</tr>
</table>
Web dersleri


--------------------------------------------------------------------------------
Dikkat ederseniz tablonun genişlik değeri olan 200 piksel iki hücre arasında dağıtılırken eşit dağıtılmadı ama adaletli dağıtım oldu.
Adaletli dağıtım diyorum çünkü 1. hücremizin ihtiyacı fazla ama ikinci hücrenin ihtiyacı az.

Şimdi align özelliğini kullanalım.
align özelliğinin alabildiği değerleri hatırlayalım : right (sağ) - left (sol) - center (ortalı)

<td align=center> web dersleri </td> şeklinde olduğunda (ORTALI) Web dersleri

<td align=right> web dersleri </td> şeklinde olduğunda (SAĞA HİZALI) Web dersleri

Dikkat ederseniz web dersleri ifadesini ilk yazdığımızda sola hizalı gösterildi (web tarayıcısı tarafından).
Biz align=left demediğimiz halde (align konusunda hiçbirşey belirtmediğimiz halde sola hizalı yazıldı).
Eğer buna rağmen align=left diye hizalama belirtirsek nedenimiz şu olabilir;
Bazı web sayfası tarayıcılarının geçerli değeri (hiçbir hizalama belirtilmediği durumunda) hizalamaları değişik olabilir.

Biz webmasterlar web sitesi yaptığımızda bir tek tarayıcı için yapmamalıyız.
Birçok tarayıcıyı dikkate alarak web sayfası yaparsak daha başarılı bir sonuç elde etmiş oluruz.

bgcolor özelliğine de değindikten sonra bu dersimizi bitirelim inşaAllah. HTML Kodu Oluşan Görüntüsü
<table width=300 border=1>
<tr>
<td bgcolor="yellow"> Web dersleri </td>
<td> &nbsp; </td>
</tr>
</table>
Sayfa başına dön Aşağa gitmek
Kullanıcı profilini gör http://kadir-18.yetkinforum.com
 
html dersleri 9
Sayfa başına dön 
1 sayfadaki 1 sayfası

Bu forumun müsaadesi var:Bu forumdaki mesajlara cevap veremezsiniz
www.kadir-18.yetkin-forum.com :: YAZILIM :: WEB TASARIM :: HTML DERSLERİ-
Buraya geçin: