Web sayfalarında yapılan her çalışma ve düzenleme tablolar aracılığı ile yapılır. Dolayısıyla çoğu web sayfalarında tablo kullanmak zorunluluktur.

Transkript

1 Yazı Tipi Stili HTML kodları 47 <b> </b> <i> </i> <u> </u> Kalın İtalik Altı Çizili Metin yükseltme veya alçaltma 1. Sayfa görünümünde, belge penceresinin altındaki Tasarla düğmesini tıklatın. 2. Metni seçin, sağ tıklatın ve ardından kısayol menüsünde Yazı Tipi öğesini tıklatın. 3. Yazı Tipi iletişim kutusunda Karakter Aralığı sekmesini tıklatın. 4. Konum kutusunda oku tıklatın ve metni yükseltmek için yukarıda seçeneğini, alçaltmak için ise aşağıda seçeneğini seçin Karakterler arasındaki aralığı ayarlama 1. Sayfa görünümünde, belge penceresinin altındaki Tasarla düğmesini tıklatın. 2..Metni seçin, sağ tıklatın ve ardından kısayol menüsünde Yazı Tipi'ni tıklatın. 3. Karakter Aralığı sekmesini tıklatın. 4. Aralık kutusunda aşağıdakilerden birini yapın: Karakterler arasındaki boşluğu artırmak için Geniş'i tıklatın. Karakterler arasındaki boşluğu azaltmak için Dar'ı tıklatın. 5. Değer kutusuna, karakter aralığını ne kadar artırmak veya azaltmak istediğinizi belirtmek üzere piksel cinsinden bir sayı girin. 10 TABLOLAR Web sayfalarında yapılan her çalışma ve düzenleme tablolar aracılığı ile yapılır. Dolayısıyla çoğu web sayfalarında tablo kullanmak zorunluluktur. HTML tabloları, diğer programlarda kullanmış olabileceğiniz tablolara çok benzer şekilde satırlar, sütunlar ve hücrelerden oluşur. Örneğin, buradaki tablo FrontPage Tasarım görünümünde eklendi. Toplamda dört hücre olan, iki sütunu ve iki satırı vardır

2 48 Tasarım görünümüne bir tablo eklediğinizde, FrontPage'in HTML kodunu sizin yerinize otomatik olarak oluşturduğunu unutmayın (çizime bakın). Tablo etiketleri Tüm tablo <table> ve </table> etiketlerinin içine alınır. Tablo satır etiketleri Her satır <tr> ve </tr> etiketleriyle temsil edilir. Tablo veri hücresi etiketleri Satır etiketlerinin içinde hücreler bulunur. Bunlar <td> ve </td> etiketleriyle temsil edilir. Bir hücrenin verileri (metin, resimler, vb.) varsa, veriler bu iki etiketin arasına eklenir. Bu örnekte "A," "B," "C" ve "D" tablo etiketleridir. FrontPage'in sütunları temsil etmek üzere etiket oluşturmaz. Bunun nedeni, HTML tablolarında, sütunların her satırda hücrelerin yığınlanmasıyla ( <td> ve </td> etiketleri) oluşturulmasıdır. Tablodaki sütunların sayısı, en fazla hücrenin bulunduğu satırla belirlenir. Bu örnekte, diğer satırdan daha fazla hücresi olması nedeniyle, sütun sayısını üstteki satır belirler.

3 Sütun sayısı belirlendikten sonra, her satır, soldan başlayarak satırdaki pozisyonuna göre hücrelerini yığar. Satırda yeterli hücre yoksa burada alttaki satırla gösterildiği gibi, sağ tarafta boş alan görünür Tablo Ekleme: Araç çubuklarından ya da Tablo/Ekle menüsünden 1 satırlı ve 3 sütunlu bir tablo ekleyin. 49 Şekil 10-1 Standart araç çubuğu üzerinde bulunan Tablo Ekle düğmesini kullanarak veya tablo menüsünden istediğiniz gibi bir tablo ekleyebilirisiniz Tablo Özellikleri: Sayfada oluşan üç hücreli tablonun üzerinde sağ tuşa basarak tablo özellikleri penceresinden veya Tablo/Tablo Özellikleri/Tablo tabloya ait tüm özellikleri düzenleyin. Ayrıca burada gösterilen Tablolar araç çubuğunu kullanarak ayar yapabilirsiniz. Düzen hücresi çiz Tablo çiz Silgi Satır ekle Düzen tablosu çiz Hücre ekle Hücreleri birleştir Üste Hizala Dikey Ortala Sütunları Düzgün Dağıt Otomatik Tablo biçimi Hücreleri böl Alta Hizala Satırları Düzgün Dağıt Sütun ekle

4 Tabloya Satır eklemek 1. İlk olarak tabloda satır seçin. 2. Seçilen satırda sağ tuşa basın. 3. Açılan kısayol menüsünden Satır Ekle komutunu verin. 50 İsterseniz Tablolar Araç çubuğunda bulunan Satır Ekle düğmesini kullanarak Satır ekleyebilirsiniz. Bir başka yol ise 1. Ekleme noktasını eklemek istediğiniz satırın üstündeki veya altındaki satıra getirin. 2. Tablo menüsünde Ekle'nin üzerine gelin ve Satır ı tıklatın. 3. Satırlar'ı tıklattıktan sonra eklemek istediğiniz satır sayısını yazın veya seçin. 4. Konum'un altında, satırı seçili satırın üstüne veya altına yerleştirmek istediğinizi belirtin Tabloya Sütun Eklemek 4. İlk olarak tabloda sütun seçin. 5. Seçilen sütunda sağ tuşa basın. 6. Açılan kısayol menüsünden Sütun Ekle komutunu verin. Tablolar Araç çubuğunda bulunan Sütun Ekle düğmesini ya da Tablo Menüsü-Ekle komutunu kullanarak da Sütun ekleyebilirsiniz Tabloya Hücre Eklemek 1. Ekleme noktasını hücre eklemek istediğiniz yerin yanındaki hücreye getirin. 2. Tablo menüsünde Ekle'nin üzerine gelin ve Hücre'yi tıklatın.

5 10.2 Tabloya Resim Yazısı ekleme 1. Sayfa görünümünde, belge penceresinin altındaki Tasarla düğmesini tıklatın. 2. Aşağıdakilerden bir ve birden fazlasını yapın: Tablonun üstüne bir resim yazısı ekleme 1. Ekleme noktasını tablonun herhangi bir yerine getirin. 2. Tablo menüsünde Ekle'nin üzerine gelin ve Üst Başlık'ı tıklatın. 3. Resim yazınızın metnini yazın. Not Varsayılan olarak resim yazısı tablonun üst kısmında görünür Tablonun altına resim yazısı ekleme 1. Ekleme noktasını tablonun herhangi bir yerine getirin. 2. Tablo menüsünde Ekle'nin üzerine gelin ve Resim Yazısı'nı tıklatın. 3. Resim yazısı metnini yazın. 4. Resim yazısını sağ tıklatın ve kısayol menüsünde Resim Yazısı Özellikleri'ni tıklatın. 5. Tablonun en altına seçeneğini, ardından da Tamam'ı tıklatın Tablo resim yazısını hizalama Resim yazısını seçin ve sonra Biçimlendirme araç çubuğunda aşağıdakilerden birini tıklatın: Sağa Hizala Sola Hizala Ortaya Hizala Yasla 10.3 Hücrelerle Çalışmak Metin Eklemek istediğiniz Hücreyi tıkladıktan sonra metin girişinizi yapın. Yazdığınız metin artık hücrede gözükecektir Hücre içeriğini Hizalama Bir hücrenin hizalamasını belirlerken, içeriğin hücre içindeki pozisyonunu veya yaslanmasını ayarlarsınız. Bu, hücredeki tüm içeriği (metin, resimler, vb.) etkiler. Yatay hizalama Bu özellik, hücre içeriğinin yatay hizalamasını belirler. Çoğu zaman bunu sola, ortaya veya sağa hizalanmış olarak ayarlarsınız. Dikey Hizalama Bu özellik, hücre içeriğinin dikey hizasını belirler. Çoğu zaman nesneleri üste hizalarsınız, ancak orta veya alt gibi diğer seçenekleri de belirleyebilirsiniz.

6 52 Bir tablodaki hücre içeriğini dikey hizalamak için Tablo Araç Çubuğunda bulunan hizalama düğmelerini kullanabilirsiniz. Hücre içeriğini yatay veya dikey hizalamak için Hücre Özellikleri iletişim kutusu kullanılabilir. Hücre iletişim kutusunu açmak için Tablo menüsü Tablo Özellikleri/Hücre komutunu verebilir Hücreye sağ tıklandığında açılan kısayol menüsünde Hücre Özellikleri komutunu seçebilirsiniz. Hücreye sağ tıklandığında açılan kısayol menüsü Hücre Özellikeri iletişim kutusu Tablo Menüsü/Tablo Özellikleri/Hücre Açılan Hücre Özellikleri iletişim kutusunda Yerleşim Altında Yatay ve Dikey Hizalamayı istediğiniz gibi değiştirip Tamam diyin Hücreye Resim Eklemek 1. Resim eklemek istediğiniz hücreye tıklayın. 2. Ekle menüsünden Resim komutunu verin. 3. Küçük Resim, Dosyadan, Tarayıcıdan veya Kameradan seçeneklerinden birini seçerek resmi hücreye ekleyin. 4. Kaydedin.

7 Tablodaki hücreleri bölme veya birleştirme 1. Sayfa görünümünde, belge penceresinin altındaki Tasarla düğmesini tıklatın. 2..Aşağıdakilerden birini veya birkaçını yapın: 53 Hücreyi sütun ve satırlara bölme 1. Bölmek istediğiniz hücreyi sağ tıklatın, sonra kısayol menüsünde Hücre Böl'ü tıklatın. 2. Sütunlara böl veya Satırlara böl seçeneğini tıklatın. 3. Sütun sayısı veya Satır sayısı alanına hücreleri bölmek istediğiniz sütun veya satır sayısını yazın. Şekil 10-2 Hücre Böl iletişim kutusu Hücreyi sütun veya satırlara bölmek için Tablolar araç çubuğunda yer alan Hücre Böl ya da Tablo menüsünde yer alan Hücre Böl komutunu da kullanabilirsiniz. düğmesini Şekil 10-3 Tablo menüsü Hücre Böl komutu İki veya daha fazla bitişik hücreyi birleştirme 1. Bir satırı, sütunu veya bitişik bir hücre grubunu seçin. 2. Sağ tıklatın ve kısayol menüsünde Hücreleri Birleştir'i tıklatın. Seçili hücreleri birleştirmek için Tablolar araç çubuğunda bulunan, hücreleri birleştir düğmesi Tablo menüsünde yer alan Hücreleri birleştir komutu verilebilir. ve Not: Bu komut yalnızca iki veya daha fazla bitişik hücre seçildiği ve seçili hücreler bir dörtgen oluşturduğu zaman kullanılabilir Hücre arka planı ve kenarlığı Hücre arka planı ve kenarlığı, hücre düzeyinde tanımlayabileceğiniz iki ek özelliktir. Bu özellikleri hücre düzeyinde ayarlarsanız, bunların, tablo düzeyinde belirlenmiş özellikleri geçersiz kılacağına dikkat edin.

8 Arka plan rengi Belirli hücrelerin göze çarpmasını istediğinizde, hücrelerin arka plan rengini değiştirebilirsiniz. 54 Kenarlık rengi Bu özelliği kullanarak, belirli hücreler için hücre kenarlığı rengi belirleyebilirsiniz. Bu, diğerleri arasında bir hücreyi vurgulamak istediğinizde yararlı olabilir. (bkz. Şekil 10-4) Şekil 10-4 Hücre Özellikleri iletişim kutusunu kullanarak hücrenin arka plan rengini değiştirebilir veya kenarlık rengi ayarlayabilirsiniz Hücrenin tablo başlığı olacağını belirtme Hücre özellikleri iletişim kutusunda Yerleşim altındaki Üstbilgi hücresi onay kutusunu seçin. Başlık hücresine girilen metin varsayılan olarak kalındır ve ortaya hizalanmıştır. Başlığın hizalamasını değiştirmek için, aşağıda Seçilen hücredeki metnin yatay ve dikey hizalamasını ayarlama konusuna bakın Tabloları Düzenlemek Tablo Boyutunu Ayarlamak Tablo Boyutunu ayarlamak için Tablo Özellikleri iletişim kutusundan yararlanacağız. Tabloda sağ tuşa basılarak açılan kısayol menüsünde Tablo Özellikleri veya Tablo Menüsünde Tablo Özellikleri/Tablo komutlarıyla Tablo Özellikleri iletişim kutusunu açın Karşımıza gelen iletişim kutusunda

9 55 Genişliği belirtmek için Genişlik belirt onay kutusunu, Piksel cinsinden veya Yüzde cinsinden seçeneğini belirleyin ve tablo genişliği için bir değer yazın. Yüksekliği belirtmek için Yükseklik belirt onay kutusunu seçin, Piksel cinsinden veya Yüzde cinsinden seçeneğini belirleyin ve tablonun yüksekliği için bir değer yazın. Notlar: Tablo piksel cinsinden boyutlandırıldıysa, boyutu görüntülendiği sayfanın boyutundan bağımsız olarak sabit kalır. Tablo tarayıcı penceresinin yüzdesi olarak boyutlandırıldıysa, boyutu pencerenin boyutuna bağlı olarak değişir. Yükseklik veya genişlik belirtilmediyse, tablo içeriğine göre boyutlandırılır Hücreyi yeniden boyutlandırma 1. Ekleme noktasını hücrenin içine yerleştirin. 2. Sağ tıklatın ve kısayol menüsündeki Hücre Özellikleri'ni tıklatın. 3. Genişliği belirtmek için, Genişlik belirt onay kutusunu, Piksel cinsinden veya Yüzde cinsinden seçeneğini belirleyin ve seçili hücrenin genişliği için bir değer yazın. 4. Yüksekliği belirtmek için, Yükseklik belirt onay kutusunu seçin, Piksel cinsinden veya Yüzde cinsinden seçeneğini belirleyin ve seçili hücrenin yüksekliği için bir değer yazın Satırı yeniden boyutlandırma 1. Ekleme noktasını, yeniden boyutlandırmak istediğiniz satırda yer alan bir hücreye getirin. 2. Tablo menüsünde, Seç'in üzerine gelin ve Satır'ı tıklatın. 3. Satırı sağ tıklatın ve kısayol menüsünde Hücre Özellikleri'ni tıklatın. 4. Genişliği belirtmek için, Genişlik belirt onay kutusunu, Piksel cinsinden veya Yüzde cinsinden seçeneğini belirleyin ve satırın genişliği için bir değer yazın. 5. Yüksekliği belirtmek için, Yükseklik belirt onay kutusunu seçin, Piksel cinsinden veya Yüzde cinsinden seçeneğini belirleyin ve satırın yüksekliği için bir değer yazın Sütunu yeniden boyutlandırma 1. Ekleme noktasını, yeniden boyutlandırmak istediğiniz sütunda yer alan bir hücreye getirin. 2. Tablo menüsünde, Seç'in üzerine gelin ve Sütun'u tıklatın. 3. Sütunu sağ tıklatın ve kısayol menüsünde Hücre Özellikleri'ni tıklatın.

10 4. Genişliği belirtmek için, Genişlik belirt onay kutusunu, Piksel cinsinden veya Yüzde cinsinden seçeneğini belirleyin ve sütunun genişliği için bir değer yazın. 5. Yüksekliği belirtmek için, Yükseklik belirt onay kutusunu seçin, Piksel cinsinden veya Yüzde cinsinden seçeneğini belirleyin ve sütunun yüksekliği için bir değer yazın. Not: Tablonun içeriği (metin, görüntüler, vs.) veya tablonun öğelerinden biri belirtilen değerden daha büyükse (daha büyük, uzun, geniş. vs.), tablo veya öğeleri bu içeriğin yerleştirilmesi için büyüyecektir Hücre aralığı ve Doldurma 56 Hücre aralığı Hücre doldurma İlk bakışta, hücre aralığı ve doldurmanın ayrı ayrı hücreler için atanan özellikler olduğunu düşünebilirsiniz. Ancak, bunlar tüm tabloyu etkileyen özelliklerdir. Hücre aralığı Bu, tablonun hücreleri arasındaki boşluk miktarıdır. Hücre aralığını, odalar arasındaki duvar kalınlığına benzer olarak düşünebilirsiniz. Bu örnekte hücre aralığı 10 pikseldir. Hücre doldurma Bu, hücre içeriğini çevreleyen boşluk miktarıdır. Bunu, hücre ile içindeki metin arasındaki tampon olarak düşünebiliriz. Bu örnekte hücre doldurma 5 pikseldir 1. Tabloyu sağ tıklattıktan sonra Tablo Özellikleri'ni açın 2. Tablo Özellikleri iletişim kutusunda Hücre aralığı ve ya Hücre Doldurma kutusuna istediğiniz değeri yazın Tablonun kenarlık (kılavuz) özelliklerini ayarlama 1. Sayfa görünümünde, belge penceresinin altındaki Tasarla düğmesini tıklatın. 2. Tabloyu sağ tıklatın ve kısayol menüsünde Tablo Özellikleri'ni tıklatın. 3. Aşağıdakiler de dâhil olmak üzere, istediğiniz kenarlık özelliklerini ayarlayın: Kenarlıkların kalınlığını değiştirme veya kenarlıkları kaldırma Boyut kutusuna istediğiniz değeri yazın veya seçin. Not: Kenarlığın kalınlığı piksel cinsinden ölçülür ve bu değer varsayılan olarak bir piksele ayarlıdır. Kenarlığı kaldırmak için bu değeri sıfıra ayarlayın. Böylece, hem tablo kenarlığı hem de hücre kenarlıkları kaldırılır. Bir birimden büyük her değer, tablo içindeki hücrelerin etrafındaki kenarlığı değil de, yalnızca tablo kenarlığının kalınlığını etkiler.

11 Kenarlığa renk ekleme veya rengini değiştirme Tablo kenarlığına renk eklemek veya kenarlığın rengini değiştirmek için, Renk kutusundan bir renk seçin. 57 Not: Kenarlıklarınızın bir yerine iki renkli olmasını isterseniz, Açık kenarlık ve Koyu kenarlık seçeneklerini kullanın. Hücre kenarlıklarının rengini değiştirmek için, hücreyi sağ tıklatın ve Hücre Özellikleri'ni seçin Kenarlığı bir yerine iki renkli yapma Tablonun üst ve sol kenarlıklarının rengini değiştirmek için, Açık kenarlık kutusundan bir renk seçin. Koyu kenarlık seçeneği ile birlikte kullanarak tablonuzda gölge etkisi oluşturabilirsiniz. Tablonun alt ve sağ kenarlıklarının rengini değiştirmek için, Koyu kenarlık kutusundan bir renk seçin. Açık kenarlık seçeneği ile birlikte kullanarak tablonuzda gölge etkisi oluşturabilirsiniz. Not: Hücre kenarlıklarının rengini değiştirmek için, hücreyi sağ tıklatın ve Hücre Özellikleri'ni seçin İç hücre kenarlıklarını kaldırma İç hücre kenarlıklarını kaldırmak için Tablo kenarlıklarını daralt onay kutusunu seçin Metni Tabloya Dönüştürme Tabloya dönüştürmek istediğiniz metni seçtikten sonra Tablo/Dönüştür/Metni tabloya komutunu verin. Açılan iletişim kutusunda Metin Ayırma Yerinde istediğiniz seçeneği seçtikten sonra Tamam düğmesine basın. Metniniz tabloya dönüştürülecektir.