HTML - Düzenler
Web sitenize daha iyi bakmak için bir web sayfası düzeni çok önemlidir. Bir web sitesinin düzenini harika bir görünüm ve his ile tasarlamak oldukça zaman alır.
Günümüzde tüm modern web siteleri, duyarlı ve dinamik web siteleri oluşturmak için CSS ve JavaScript tabanlı çerçeve kullanıyor ancak basit HTML tabloları veya diğer biçimlendirme etiketleriyle birlikte bölme etiketleri kullanarak iyi bir düzen oluşturabilirsiniz. Bu bölüm, saf HTML ve özniteliklerini kullanarak web sayfanız için nasıl basit ama çalışan bir düzen oluşturacağınıza dair birkaç örnek verecektir.
HTML Düzeni - Tabloları Kullanma
Düzen oluşturmanın en basit ve en popüler yolu HTML <table> etiketini kullanmaktır. Bu tablolar sütunlar ve sıralar halinde düzenlenmiştir, böylece bu satırları ve sütunları istediğiniz şekilde kullanabilirsiniz.
Misal
Örneğin, aşağıdaki HTML düzeni örneği 3 satırlı ve 2 sütunlu bir tablo kullanılarak elde edilir, ancak üstbilgi ve altbilgi sütunu, colspan özelliğini kullanarak her iki sütunu da kapsar -
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width = "100%" border = "0">
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "#aaa" width = "50">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#eee" width = "100" height = "200">
Technical and Managerial Tutorials
</td>
</tr>
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</td>
</tr>
</table>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
Birden Çok Sütun Düzeni - Tabloları Kullanma
Web sayfanızı, web içeriğinizi birden çok sayfaya yerleştirecek şekilde tasarlayabilirsiniz. İçeriğinizi orta sütunda tutabilir ve menüyü kullanmak için sol sütunu, reklam veya diğer bazı şeyleri koymak için sağ sütunu kullanabilirsiniz. Bu düzen, tutorialspoint.com web sitemizdekine çok benzer olacaktır.
Misal
İşte üç sütun düzeni oluşturmak için bir örnek -
<!DOCTYPE html>
<html>
<head>
<title>Three Column HTML Layout</title>
</head>
<body>
<table width = "100%" border = "0">
<tr valign = "top">
<td bgcolor = "#aaa" width = "20%">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#b5dcb3" height = "200" width = "60%">
Technical and Managerial Tutorials
</td>
<td bgcolor = "#aaa" width = "20%">
<b>Right Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
</tr>
<table>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
HTML Düzenleri - DIV, SPAN kullanma
<div> öğesi, HTML öğelerini gruplamak için kullanılan blok düzeyinde bir öğedir. <div> etiketi blok düzeyinde bir öğe iken, HTML <span> öğesi, öğeleri satır içi düzeyde gruplamak için kullanılır.
HTML tabloları ile oldukça güzel düzenler elde edebilmemize rağmen, tablolar gerçekten bir düzen aracı olarak tasarlanmamıştır. Tablolar, tablo şeklindeki verileri sunmak için daha uygundur.
Note - Bu örnek Basamaklı Stil Sayfasını (CSS) kullanır, bu nedenle bu örneği anlamadan önce CSS'nin nasıl çalıştığını daha iyi anlamanız gerekir.
Misal
Burada, önceki örnekte <table> etiketini kullanarak elde ettiğiniz her ne olursa olsun, CSS ile birlikte <div> etiketini kullanarak aynı sonucu elde etmeye çalışacağız.
<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div style = "width:100%">
<div style = "background-color:#b5dcb3; width:100%">
<h1>This is Web Page Main title</h1>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:left;">
<div><b>Main Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#eee; height:200px; width:350px; float:left;" >
<p>Technical and Managerial Tutorials</p>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:right;">
<div><b>Right Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#b5dcb3; clear:both">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</div>
</div>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
CSS ile birlikte DIV, SPAN kullanarak daha iyi düzen oluşturabilirsiniz. CSS hakkında daha fazla bilgi için lütfen CSS Eğitimine bakın.