15 – HTML Layouts / Sayfa Düzeni | ApocalyptRA

Trang chủ » Html Layout Kullanımı » 15 – HTML Layouts / Sayfa Düzeni | ApocalyptRA

Có thể bạn quan tâm

HTML Layouts / Sayfa Düzeni

Web sayfası düzeni web sitenizin güzel görünmesi için çok önemlidir. Bu nedenle sayfa düzeni özenle ve dikkatle tasarlanmalıdır.

Website Layouts / Web Sitesi Düzenlemeleri

Bir çok web sitesi içeriklerini bir çok bölüme(sütünlara) ayrılmış alanlara ayırırlar (gazete ve ya dergilerdeki mantıkla benzer görsellikte).

Çoklu sütunlar <div> veya <table> elemanları kullanılarak oluşturulur. CSS elemanların konumlandırmak, arkaplanlar oluşturmak ya da renkli sayfa gösterimleri için kullanılır.

NOT: Her ne kadar HTML tablolarıyla güzel sayfa düzenleri yaratılabilse de, <table> etiketi sekmeli verileri sunmak için kullanılır, sayfa düzeni oluşturmak için değil.

HTML Layouts – Using <div> Elements / Düzenleme – <div> Elemanı Kullanımı

<div > elemanı HTML elemanlarını gruplandırmak için kullanılan bir block level elemanıdır.

Aşağıdaki örnek, sonraki örnekte olduğu gibi aynı sonucu oluşturarak, birden çok sütun düzeni oluşturmak için beş div elemanı kullanır:

Örneğin;

<!DOCTYPE html> <html> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#C71585;"> <h1 style="margin-bottom:0;">Sayfanın Ana Baslıgı</h1></div> <div id="menu" style="background-color:#DDA0DD;height:200px;width:100px;float:left;"> <b>Menu</b><br> HTML<br> XML<br> CSS</div> <div id="content" style="background-color:#F0E68C;height:200px;width:400px;float:left;"> Buraya Icerik Gelir</div> <div id="footer" style="background-color:#C71585;clear:both;text-align:center;"> Copyright © apocalyptra</div> </div> </body> </html>

HTMLdiv

HTML Layouts – Using Tables /  Düzenleme – Tablo Kullanımı

Sayfa düzeni oluşturmanın basit bir yolu HTML <tablo> etiketi kullanmaktır.

Çoklu sütunlar <div> veya <table> elemanları kullanılarak oluşturulur.

Çoklu sütunlar <div> veya <table> elemanları kullanılarak oluşturulur. CSS elemanların konumlandırmak, arkaplanlar oluşturmak ya da renkli sayfa gösterimleri için kullanılır.

Aşağıdaki örnek, 3 satır ve 2 sütun içeren bir tablo kullanır – İlk ve son satır colspan özelliği ile iki sütuna yayılır:

Örneğin;

<!DOCTYPE html> <html> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#C71585;"> <h1>Sayfanın Ana Baslıgı</h1> </td> </tr> <tr> <td style="background-color:#DDA0DD;width:100px;text-align:top;"> <b>Menu</b><br> HTML<br> XML<br> CSS </td> <td style="background-color:#F0E68C;height:200px;width:400px;text-align:top;"> Buraya Icerik Gelir</td> </tr> <tr> <td colspan="2" style="background-color:#C71585;text-align:center;"> Copyright © apocalyptra</td> </tr> </table> </body> </html>

Yukarıdaki HTML kodu aşağıdaki sonucu üretecektir:

HTMLdivTbl2

HTML Layout – Useful Tips / Düzen – Yararlı İpuçları

1: CSS kullanmanın en büyük avantajı, harici bir stil sayfasında CSS kodu koyarsanız, sitenizi korumak çok daha kolay bir hale gelir. Bir dosyayı düzenleyerek tüm sayfalarınızın düzenini değiştirebilirsiniz.

2: İleri düzeyde bir sayfa düzeni tasarımı uzun zamanınızı alıyorsa, hızlı bir çözüm olarak bedava ve ya paralı satılan hazır template(şablon) kullanılabilir.

Bunu paylaş:

  • X
  • Facebook
Beğen Yükleniyor...

Từ khóa » Html Layout Kullanımı