|
||
| merhaba arkadaşlar işte sonunda tablo tasarımına geldik.Öncelikle şunu sölim bu işi seviyorsanız devam edin yoksa boşuna uuğraşmanın anlamı yok çünkü artık iş ciddiye bindi.bunu halleden html yi sökmüş demektir.gözünüz korkmasın işin gerçeği bu.Evet başlayalım... ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ Tablo nasıl yaratılır? <table> ve </table> etiketleri bir tablonun bütün diğer elemanlarını içlerine alırlar. Tablonun içindeki her satır ise <tr> (table row) etiketiyle başlar ve hemen sonra da <td> (table data) etiketiyle o satırın içindeki her bir hücre (data cell) adlandırılır. Alıntı <TABLE> <TR> <TD>by_infected1</TD> <TD>by_infected2</TD> </TR> <TR> <TD>forumsn1</TD> <TD>forumsn2</TD> </TR> </TABLE> Alıntı by_infected1 by_infected2 bana inanmayanlar deneyebilir forumsn1 forumsn2  şaka şaka öğrenmeniz için yazarak çalışın...<TABLE>, <TR> ve <TD> etiketlerine birçok özellik yada konut daha ilave edip, tablonun görünümünü ve içeriğin yerleştirilmesini tamamen kontrol altına alabilirsiniz. (Bunun için diğer <TABLE> ipuçlarını okumanız gerekiyor, OK?) Bu komutlar olmadan, tablonun varsayılan değerleri, içeriği çepeçevre sararlar. En basitinden bir sınır atayabilirsiniz. Eğer yukardaki tabloya BORDER (sınır) değeri atarsanız, görünüm aşağıdaki gibi olur. Alıntı <TABLE BORDER=1> <TR> <TD>by_infected1</TD> <TD>by_infected2</TD> </TR> <TR> <TD>forumsn1</TD> <TD>forumsn2</TD> </TR> </TABLE> Linklerin Görülmesine İzin Verilmiyor Linki Görebilmek İçin Üye Ol veya Giriş Yap sanırım işi biraz anladık ok! o zaman biraz daha ilerletelim... Sınırlar ve hücrelerin ayarlanması CELLPADDING ve CELLSPACING, <TABLE> etiketinin içine yazılan komutlardan en kullanışlılarıdır. CELLPADDING özelliği, data hücresinin içeriğinin sınırlara olan mesafesini (pixel) olarak ayarlamaya yarar. CELLSPACING ise hücrelerin birbirlerine olan mesafesini ayarlar (varsayılan değer 2 pixeldir.) Aralarında hiç fark yokmuş dediğinizi duyar gibiyim ama yanlış. Aralarında çok fark vardır. Aşağıdaki örnekte, her iki tabloda aynı olup birindeCELLPADDING=10 değeri verilmiştir. ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Alıntı <TABLE BORDER=2 CELLPADDING=10> <TR> <TD>by_infected1</TD> <TD>by_infected2</TD> </TR> <TR> <TD>forumsn1</TD> <TD>forumsn2</TD> </TR> </TABLE> Linklerin Görülmesine İzin Verilmiyor Linki Görebilmek İçin Üye Ol veya Giriş Yap Aşağıdakinde ise CELLSPACING=10 değeri verilmiştir. Alıntı <TABLE BORDER=2 CELLSPACING=10> <TR> <TD>by_infected1</TD> <TD>by_infected2</TD> </TR> <TR> <TD>forumsn1</TD> <TD>forumsn2</TD> </TR> </TABLE> Linki Görebilmek İçin Üye Ol veya Giriş Yap Aaa, şimdi anlar gibiyim, ama bunlar ne işe yarayacak ki dediğinizi duyar gibiyim. Gerçekten farkı anladığınıza sevindim, ama ne işe yarayacağını öğrenmeniz için vakit henüz erken; gelin siz bundan sonra tablolarınızı yaparken <TABLE> etiketinin içini aşağıdaki gibi doldurun, gün gelir sizde gerekli kullanımının farkına varıp burada gördüklerinizi değerlendirirsiniz. <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0> Bu başlangıç etiketimiz olsun, gelin bundan sonrasını üzerine devam edelim. Tabii, dilerseniz BORDER=0 değerindeki " 0 " ı herhangi bir rakamla değiştirip, gittikçe kalınlaşan bir sınır çizebilirsiniz. Alıntı <TABLE BORDER=0 CELLSPACING=1 bgcolor=#000000 width=300 height=150> <TR> <TD bgcolor=#ffffff>by_infected1</TD> <TD bgcolor=#ffffff>by_infected2</TD> </TR> <TR> <TD bgcolor=#ffffff>forumsn1</TD> <TD bgcolor=#ffffff>forumsn2</TD> </TR> </TABLE> table etiketine ne atadık? bg color=#000000 arka plan rengi width=300 height=150 tablonun genişliğini ayarladık...#ffffff beyaz rengi ifade eder örneğe bakalım bi ama kafanız yinede karışırsa verdiğim renk kodlarını değiştirin öle anlarsınız... Linklerin Görülmesine İzin Verilmiyor Linki Görebilmek İçin Üye Ol veya Giriş Yap *****colspan and rowspan***** Alıntı <TABLE BORDER="2"> <TR> <TD>by_infected1</TD> <TD>by_infected2</TD> <TD>by_infected3</TD> </TR> <TR> <TD>forumsn1</TD> <TD>forumsn2</TD> <TD>forumsn3</TD> </TR> </TABLE> Linki Görebilmek İçin Üye Ol veya Giriş Yap örneğimize bakalım daha ii anlamanız için.... ama pencereyi kapatmayın biraz bekleyin aşağıdaki verdiğim örneklerle kaşılaştıracaz.. colspan özelliği İlk hücrenin her 3 sütunu kapsaması için, <TD> etiketinin içine COLSPAN="3" yazalım ve satırdaki diğer iki <TD> etiketlerini silelim Alıntı <TABLE BORDER="2"> <TR> <TD COLSPAN="3">by_infected1</TD> </TR> <TR> <TD>forumsn1</TD> <TD>forumsn2</TD> <TD>forumsn3</TD> </TR> </TABLE> Linki Görebilmek İçin Üye Ol veya Giriş Yap rowspan özelliği Bu arada, ilk hücrenin, diğer iki satırı kapsamasını istiyorsanız, <TD> etiketine ROWSPAN="2" yazalım ve ikinci satırın (row) ilk <TD> etiketini silelim Alıntı <TABLE BORDER="2"> <TR> <TD ROWSPAN="2">by_infected1</TD> <TD>by_infected2</TD> <TD>by_infected3</TD> </TR> <TR> <TD>forumsn2</TD> <TD>forumsn3</TD> </TR> </TABLE> Linki Görebilmek İçin Üye Ol veya Giriş Yap sanırım davayı biraz çaktınız neyse devam edelim işleri ilerletme zamanı  -------------------------------------------------------------------------------------------------------------------------- Tablo hücreleri, varsayılan olarak kendilerini içeriklerine göre ölçülendirirler (boyutlandırırlar demek istedim.) Fakat, değişik bir boyut istersek ne olacak? O zaman, <TD> etiketinin WIDTH ve HEIGHT özelliklerini girmemiz gerekecek. İstediğiniz ölçüleri pixel olarak yazın! ve bitti. 100 pixel eninde, 80 pixel boyunda istediğiniz bir hücre için aşağıdaki gibi kodu yazdınız mı tamamdır. Alıntı <TABLE BORDER="2"> <TR> <TD WIDTH="100" HEIGHT="80">by_infected</TD> </TR> </TABLE> Linki Görebilmek İçin Üye Ol veya Giriş Yap Tabii bu ölçüler tavsiye edilenler oluyor. Ama bu ölçüler, diğer hücre ölçüleriyle çakışırsa, tarayıcı büyük olan ölçüyü esas alır. Önemli not:WIDTH ve HEIGHT küçük harflerle yazarken İngilizce de küçük harf ı yerine i yazılır. Bu demektir ki WIDTH ve HEIGHT width ve height olarak yazılabilirse PCniz nedemek istediğinizi anlayacaktır. Unutmayın, Web sayfanızı tasarlarken, kendinizi PCnizle konuşuyormuş gibi farzedeceksiniz. Siz ne yapması gerektiğini söylerseniz, PC yada tarayıcı programı ona göre hareket edecektir. Sakın ha tarayıcı programları kendi başına bırakmayın, ne istiyorsanız hepsini teker teker söylemelisiniz. Yoksa o sizin namınıza varsayımlara göre hareket etmeye başlar, bu da bazen hiç de hoş olmayan görüntüler verebilir. Renk meselesi( şark meselesi gibi oldu) Gelelim işin biraz da eğlenceli atrafına. Artık renksiz tablo arkaplanlarından kurtuluyorsunuz. Renkli tablolar için <TABLE> etiketinin içine BGCOLOR="renkkodu" dediniz mi işlem tamam. "renkkodu" olarak istediğiniz rengin hexadecimal renk kodunu gireceksiniz ( #660099 veya #ESD175 gibi.) Mesela açık sarı renkli bir tablo yapmak için Alıntı <TABLE BGCOLOR=#FFFFF0 BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR> <TD>by_infected1</TD> <TD>by_infected2</TD> </TR> <TR> <TD>forumsn1</TD> <TD>forumsn2</TD> </TR> </TABLE> Linki Görebilmek İçin Üye Ol veya Giriş Yap Hücre içeriğini yerine yerleştirmek... Biraz daha güzellik, yada karışıklık; nasıl isterseniz öyle tanımlayın. Ama bu kısım da çok önemli. Çünkü, artık hücrenin içine yerleştirdiğimiz içeriği (resim yada metin), sağa-sola, aşağı-yukarı, (belki günün birinde öne-arkaya) kaydırmasını göreceğiz. Hepsi <TD> etiketinin içine koyacağımız ALIGN yada align (ayarlamak anlamında) ve VALIGN yada valign (vertical align'ın kısaltması valign yapmışlar) özellikleriyle gerçekleşecek. ALIGN ve VALIGN'ı koyduktan sonra, ki her birinin anlayacağı sıfatlar ayrıdır. --------------------------------------------------------------------------------------------------------------------------------------------------------------------- aligniçin, * align=center (ortaya) * align=left (sola) * align=right (sağa) valign için * valign=top (yukarı) * valign=middle (ortaya) * valign=bottom (aşağıya) Dikkatlilerin gözünden kaçmamıştır, align=center (ortaya) ve valign=middle (ortaya) aynı şey değiller mi diye sorabilirsiniz.cevap hem evet hem hayır hemen açıklayım .... Alıntı <TABLE WIDTH=200 BORDER=1> <TR> <TD>by_infected</TD> </TR> </TABLE> Linki Görebilmek İçin Üye Ol veya Giriş Yap Şimdi bunu ortaya almak isterseniz valign=middle hiçbir işinize yaramaz. Yalnız align=center bu işi becerir. Alıntı <TABLE WIDTH=200 BORDER=1> Linklerin Görülmesine İzin Verilmiyor<TR> <TD align=center>by_infected</TD> </TR> </TABLE> Linki Görebilmek İçin Üye Ol veya Giriş Yap Oldu mu? Peki, valign ne işe yarar, onu da gösterelim: Eğer hücreniz tek satırdan fazla, yada height özelliği kullanılmışsa, valign özelliği olmadan şöyle bir şey çıkar ortaya... Alıntı <TABLE WIDTH=200 HEIGHT=100 BORDER=1> Linklerin Görülmesine İzin Verilmiyor<TR> <TD align=center>by_infected</TD> </TR> </TABLE> Linki Görebilmek İçin Üye Ol veya Giriş Yap Browser, varsayılan olarak, vertical (dik) ayarını tam ortaya (middle) yaptı. Yani valign=middle olmuş oldu. Şimdi siz bu ayarı yukarı değiştirmek için valign=top aşağısı için valign=bottom şeklinde etiketin içine ilave yapacaksınız. Ben birini yapıyorum, diğerlerini siz deneyin. Alıntı <TABLE WIDTH=200 HEIGHT=100 BORDER=1> <TR> <TD align=center valign=top>by_infected</TD> </TR> </TABLE> Linki Görebilmek İçin Üye Ol veya Giriş Yap Ben sizin yerinizde olsam, artık bol bol alıştırma yapıp, web sitemde nevar neyok ise hepsini <TABLE> </TABLE> etiketinin içine almaya uğraşırdım. Tabloları web sayfasına yerleştirme.... Evet, noktayı koyma zamanı geldi. İki tane <TABLE> özelliği, tablonuzu sayfaya yerleştirmenize olanak sağlar. ALIGN özelliği ve ALIGN=LEFT, ALIGN=RIGHT, ALIGN=CENTER diyerek tablonuzu sayfaya yerleştirebilirsiniz. ALIGN=LEFT burada varsayılan değerdir. WIDTH özelliği de, belli bir pixel genişliği belirterek tablonuza atar. <TABLE WIDTH="65"> şeklinde bir rakam ile bu işi görür. Yada tarayıcınızın penceresinin belli bir % oranı atayarak da yapılabilir. <TABLE WIDTH="90%"> örneğindeki gibi. Aşağıdaki örnek, tarayıcı programına, 150 pixel genişliğinde ve sayfanın ortasına yerleştirilmiş bir tablo tarif ediyor. <TABLE WIDTH="150" ALIGN="CENTER"> Şimdiki örnek ise, <TABLE WIDTH="75%" ALIGN="RIGHT"> Sayfanın %75ini kaplayacak ama sağa yanaşmış bir tablo tarif ediyor. Tabii bu dersleri bir başlangıç kabul edebilirsiniz. Bundan sonrası sizin gayretlerinize kalmış. Ne kadar çok deneme yaparsanız, o kadar başarılı olursunuz. Unutmayın, bu işte başarının sırrı tablolarda yatıyor. evet tablolar bitti.ama şunu sölim işi kaptıysanız tamamdır.veee çok yoruldum..bidahaki derste link vermeyi v.s göstercem tşk yeter yada kafanıza göre takılın selametle.anlamadığınız yeri mutlaka sorun... |
||
|
||
| ilgilenen arkadaşlar için iyi bir kaynak olmuş. emeği için teşekkrüler | ||
|
||
ilgilenen arkadaşlar için iyi bir kaynak olmuş. emeği için teşekkrüler bişey deil tuelza ama ilgilenen yok sanırım... 
|
||
|
||
| olmaz mı kardeşim sen yaz manyak faydası var ben not tutuyorum deli öğrendim | ||
|
||
olmaz mı kardeşim sen yaz manyak faydası var ben not tutuyorum deli öğrendim dalga mı geçiyosun gerçkten mi? 
|
||
|
||
| gerçekten manyak olum hacker oldum ABİiiiiiiiiiiiii | ||
|
||
| olm bunun hackle ne alakası var | ||
|
||
ünyeliii... heckerle alakası yokmuş bunun
|
||
|
||
eline emeğine sağlık, çok güzel, 2006 yılında yazılmış olsa da güncelliğini koruyor  ama bi de şu resimleri sitemynete koymasaydın keşkem.
|
||
