Çeviriler tırnak içinde gösterilir. Çevirilerin kaynağı; w3schools.com‘dur. Çeviri haricindekiler bana aittir. Temel HTML derslerine de bakabilirsiniz bu konuya yabancıysanız. 16 Bölümdür ve ilk bölüme buradan ulaşabilirsiniz. Editör olarak; Notepad++, Dreamweaver ya da w3Schools’a ait paylaşacak olduğum online editörü kullanabilirsiniz.
Sitenizin iyi görünmesi için layout çok önemlidir. Sayfanızın düzenini çok iyi ayarlamalısınız.
Website Düzeni/ Layout ‘u
Çoğu web sitesi içeriklerini gazete ve dergilerdeki gibi çoklu sütunlara ayırarak yerleştirir.
Bu sütunlar ise ya <table> etiketi ile ya da <div> etiketi ile ayrılır. Bir miktar CSS kullanımı da renkli sayfa görünümü, sayfa konumlandırma, element yerleşimi, arkaplan resimi gibi sayfaya canlılık katar.
HTML’de Layout – Table Kullanımı
En basit şablon oluşturma yolu <table> etiketleri ile mümkündür. Aşağıdaki örnekte 3 satır ve 2 sütuna sahip bir düzen göreceksiniz tablolar ile; -birinci ve son satırın yaslanması ve sütunlar colspan özelliğini kullanmıştır-
Misal;
<html>
<body><table width=”500″ border=”0″>
<tr>
<td colspan=”2″ style=”background-color:#FFA500;”>
<h1>Main Title of Web Page</h1>
</td>
</tr><tr valign=”top”>
<td style=”background-color:#FFD700;width:100px;text-align:top;”>
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style=”background-color:#EEEEEE;height:200px;width:400px;text-align:top;”>
Content goes here</td>
</tr><tr>
<td colspan=”2″ style=”background-color:#FFA500;text-align:center;”>
Copyright © 2011 W3Schools.com</td>
</tr>
</table></body>
</html>Örneğin kaynağı; Buradadır.
Not; HTML tablolarıyla güzel şablonlar oluşturabilmek mümkün olduğu halde; tablolar sunulacak veriler için dizayn edilmiştir, tasarım için değil.
HTML’de Layout – Div Elementi kullanarak yani tablosuz kullanım
Div elementi blok seviyesinden bir elementtir ve HTML elemanlarını gruplamak için kullanılır.
Aşağıda 5 div elementi göreceksiniz, çok sütunlu bir düzen oluşturulmuştur önceki gibi;
<html>
<body><div id=”container” style=”width:500px”>
<div id=”header” style=”background-color:#FFA500;”>
<h1 style=”margin-bottom:0;”>Main Title of Web Page</h1></div><div id=”menu” style=”background-color:#FFD700;height:200px;width:100px;float:left;”>
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div><div id=”content” style=”background-color:#EEEEEE;height:200px;width:400px;float:left;”>
Content goes here</div><div id=”footer” style=”background-color:#FFA500;clear:both;text-align:center;”>
Copyright © 2011 W3Schools.com</div></div>
</body>
</html>
Bu örneği de şurada görebilirsiniz, yalnız üsttekini ilk önce bilgisayarınızda denemelisiniz bence. Buraya tıklayıp görebilirsiniz…
HTML Layout – Yararlı ipuçları
İpucu; Css kullanımının en büyük avantajı, harici bir kaynaktan kullanıldığında, sitenizin kontrolü daha kolay olur. Css dosyasında bir değişiklik ile tüm sayfaları değiştirip kontrol altında tutabilirsiniz.
İpucu; gelişmiş layout oluşturmak zaman alacağından, web’ten şablon(template) bulmanız daha çabuk sonuç verecektir. Google’dan ücretsiz olanları bulup çalışabilirsiniz.