Temel notlar
| Bazı HTML renk kodları
|
| #a0daf8
|
| #fff0f5
|
| #66ef7a7
|
| #c5fcdc
|
| #9f9fff
|
| #efefff
|
| #ffb466
|
| #ffcf96
|
| #ff7070
|
| #ffc1c1
|
| #aaaaaa
|
| #f2f1f0
|
| #f9f9f9
|
| #ffffff (ya da "transparent" parametresi)
|
Tablo yazımı konusunda temel düzeyde bilgi edinmek için Türkçe Vikipedi'deki Yardım:Tablo sayfasına bakabilirsiniz. Vikide tablo yazmak için biraz HTML dili bilmek gerekiyor. HTML bilmeseniz de benim yaptığım gibi kendinize bir kaç küçük not çıkarıp denemeler yaparak Vikide tablolar oluşturabilirsiniz.
Tablo kodlarında kullanılan bazı parametrelerin anlamları şöyledir:
- border: kenarlık boyutunu belirtir. Örneğin border="1"
- padding, cellpadding: Tablo içindeki metinlerin tablo kenarlığından ne kadar içeride başlayacağını tanımlar.
- Örnek 1 : style="padding: 8px 0px 8px 8px;"
- Örnek 2 : style="padding: 2em 2em; text-align: left" (burada birinci sayı üstten ve alttan, ikinci sayı ise sağdan ve soldan ne kadar içeriden başlanacağını belirler)
- Örnek 3 : cellpadding="2"
- margin: Tablonun dışında altında metinlerin (ya da çevresindeki metinlerin), tablo kenarlığından ne kadar öteden başlayacağını belirler. Bir sayfanın başına metin kutusu benzeri bir şablon yerleştirirken bu koda özellikle ihtiyaç duyulmaktadır. Çünkü, sayfa üstünde kullanılacak şablonların altında 15 px kadar boşluk bırakmamız gereklidir. Aksi takdirde şablonun kullanıldığı sayfalarda konu başlıkları çerçevesi ile şablonun çerçevesi üst üste biniyor. (NOT: margin kullanmak yerine şablon kodları bittikten sonra satır boşlukları bırakarak sorunu çözmeyi denesek de işe yaramaz).
Tablo örnekleri
Örnek 1:
Alttaki tabloda metinler hücrenin sol üst köşesine hizalanmaktadır. Tabloda border="0" değerini 1 yaparak çerçeveleri görüntüleyebilirsiniz.
| İnternet
|
:
|
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
|
| Eğitim
|
:
|
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
|
| Geliştirme
|
:
|
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
|
| Çokluortam
|
:
|
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
|
Örnek 2:
Alttaki tablo, iki sütun halinde içerik oluşturmak için kullanılabilir. (Tablo kodlarında border (yani kenarlık) seçeneğini 1 olarak ayarlayarak çerçevenin görünmesini sağlayabilirsiniz.) Tablonun genişlik değeri %100'dür, gerekmesi halinde bu değer azaltılabilir.
|
Grafik uygulamaları
- Gimp
- KolourPaint
- Inkscape
- Blender
|
İnternet uygulamaları
- Mozilla Firefox
- Chromium
- Ekiga
- Empathy
- Ubuntu One
- Kontact
- Geary
|
Örnek 3:
MediaWiki'nin "galery" özelliğinde resmin boyutunun ayarlanması mümkün değildir, alttaki tabloda ise mümkündür.
Örnek 4:
Tablodaki hücre içerikleri düşeyde üste hizlanmıştır. Resim büyüklükleri ayarlanabilir.
Örnek 5:
|
|
Açıklama
|
Windows
|
Linux
|
| Grafik uygulamaları
|
Boyama ve resim düzenleme
|
MS Paint
|
KolourPaint
|
| Gelişmiş resim düzenleme
|
Adobe Photoshop
|
Gimp
|
| Vektörel grafik düzenleyici
|
CorelDraw
|
Inkscape
|
| PDF görüntüleyici
|
Adobe Reader
|
Evince, Adobe Reader
|
"font-size: smaller" kullanıldığında ise sonuç şöyle olur:
|
|
Açıklama
|
Windows
|
Linux
|
| Grafik uygulamaları
|
Boyama ve resim düzenleme
|
MS Paint
|
KolourPaint
|
| Gelişmiş resim düzenleme
|
Adobe Photoshop
|
Gimp
|
| Vektörel grafik düzenleyici
|
CorelDraw
|
Inkscape
|
| PDF görüntüleyici
|
Adobe Reader
|
Evince, Adobe Reader
|
Hizalama
Tabloyu sayfaya hizalama
| Hücre 1, satır 1
|
Hücre 2, satır 1 (ve 2)
|
Hücre 3, satır 1
|
| Hücre 1, satır 2
|
Hücre 3, satır 2
|
- Bir tabloyu sayfanın soluna yaslamak için herhangi bir kod kullanmaya gerek yoktur çünkü tablolar öntanımlı olarak sayfanın soluna yaslanır.
- Tabloyu sağa yaslamak için style="float:right" kullanılır.
- Tabloyu ortaya hizalamak için ise tablo koldarını <center> </center> arasına alabilirsin. Yani tablo kodlarının başladığı satırın bir üstündeki satıra <center>, tablo kodları bittikten sonraki satır da </center> yazılır.
Yazıların, tablonun etrafında akmasını sağlamak ya da önlemek
- Tabloyu sayfaya hizalamaya yarayan style="float:left;" ya da style="float:right;" kodlarını kullandığımızda metinler, tablonun etrafında akar.
- style="float:left;" ya da style="float:right;" kodları kullanılmadığında ise tablodan sonra gelen metinler tablonun etrafında akmaz. Eğer buna rağmen akıyorsa bu durum tabloyu kapatmamış olmamızdan kaynaklanıyor olabilir, yani tablonun |} kodu ile kapatılıp kapatılmadığını kontrol edersin.
- Tabloyu sağ tarafa yaslayıp aynı zamanda etrafında metinlerin akmasını engellemek pek ihtiyaç duyulan bir durum değildir. Ancak gerekirse şu şekilde yapılabilir: Tablonun kodları başlamadan önce ve kodlarının bittiği satıra
<br clear=all> kodunu kopyala.
- Örneğin alttaki tablonun kodları içinde (style="float:left") kullanıldığı için kendisinden sonra gelen metinler tablonun etrafından akar.
bişey bişey bişey
bişey bişey bişey
bişey bişey bişey
|
| Bir şeyler bir şeyler...
|
- text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
Hücre içinde hizalama
- Bir hücre içindeki metni yatayda; sağa, sola, ortaya hizalayabileceğimiz gibi düşeyde de; üste, ortaya, altta hizalayabiliriz.
- Düşeyde hizalamak için satır başlarında |- valign="middle" benzeri (top, middle, bottom) parametreler ile o satırdaki tüm hücreleri düşeyde aynı şekilde hizalayabiliriz.
- Yatayda hizalamak için ise right, center, left parametreleri kullanılır.
| İnternet uygulamaları:
|
Mozilla Firefox
|
| Grafik uygulamaları
|
KolurPaint
|
| Video uygulamaları
|
VLC media player
|
