Rumahweb Journal
Banner - Cara Membuat Web Template Bagian 2

Cara Membuat Web Template Tanpa Table – Bagian 2

Seperti yang telah kami sampaikan pada artikel bagian 1, bahwa dengan web template tanpa table, search engine lebih mudah mengetahui isi content website Anda. Nah, pada artikel ini kita akan mencoba membuat web template tanpa table yang hasilnya sama persis dengan layout html yang kita buat di bagian 1.

Step 1. Buat file HTML

Berikut ini adalah contoh kode html untuk layout website tanpa table. Anda bisa menggunakan script dibawah ini, lalu bisa simpan dengan nama utama.htm.

<html>
<div>
<div>#JUDUL_WEBSITE#</div>
<div>HOME | FAQ | CONTACT | SITEMAP</div>
<div>
<div>#BLOCK_KIRI#</div>
<div>#CONTENT#</div>
<div>#BLOCK_KANAN#</div>
</div>
<div>©2021 Rumahweb Journal. All Rights Reserved.</div>
</div>
</html>

maka hasilnya akan menjadi seperti berikut :

#JUDUL_WEBSITE#
HOME | FAQ | CONTACT | SITEMAP
#BLOCK_KIRI#
#CONTENT#
#BLOCK_KANAN#
©2021 Rumahweb Journal. All Rights Reserved.

Tampilan diatas masih berantakan, karena kita belum membuat file css untuk mengatur layout templatenya.

Step 2. Buat file CSS

CSS adalah singkatan dari Cascading Style Sheet, digunakan untuk melengkapi file HTMl, dan tugas utamanya adalah menetapkan aturan tampilan/style yang akan digunakan pada sebuah website.

Baca selengkapnya tentang CSS pada artikel: Belajar CSS

Silahkan anda buat file dengan nama table.css yang berisi script berikut :

*{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
}
#main {
width: 800px;
margin: 0px 0px 0px 100px;
}
#header {
font-weight: bold;
padding: 10px 10px 10px 10px;
background: #FFCC00;
}
#nav {
text-align: right;
padding: 0px 20px 0px 0px;
background: #6666CC;
}
#middle {
clear: both;
}
#left {
float: left;
width: 180px;
padding: 5px 5px 5px 5px;
}
#content {
float: left;
width: 350px;
padding: 10px 10px 10px 10px;
}
#right {
float: left;
padding: 5px 5px 5px 5px;
}
#footer {
float: left;
padding: 10px 10px 10px 10px;
text-align: center;
}

Keterangan:

#main merupakan definisi style untuk tag <div id=”main”> … </div>, dan demikian juga untuk #header merupakan definisi tag <div id=”header”> … </div>.

Jadi pengaturan susunan tata letak content diatur melalui CSS. Di dalam #main di definisikan width = 600px, artinya lebar dari space yang dibentuk oleh tag <div> sebesar 600 pixel.

Selanjutnya untuk komposisi margin, berturut-turut, top = 0px, right = 0px, bottom = 0px, dan left =240px, px = pixel.

  • width: lebar
  • margin: jarak batas dengan batas terluar
  • font-weight: untuk menetukan ketebalan teks
  • padding: jarak isi dengan batas
  • text-align: mengatur rata kanan / kiri dari suatu teks
  • clear: mengatur floating block yang dapat ditampilkan dibaris yang sama
  • float: mengatur posisi floating block

Anda bisa memberikan value yang berbeda pada masing-masing definisi style CSS tersebut. Anda bisa berkreasi, sesuai dengan style website yang ingin dibuat.

Lanjut part 3 : Mengatur Web Template

Bermanfaatkah Artikel Ini?

Klik bintang 5 untuk rating!

Rating rata-rata 5 / 5. Vote count: 6

Belum ada vote hingga saat ini!

Kami mohon maaf artikel ini kurang berguna untuk Anda!

Mari kita perbaiki artikel ini!

Beri tahu kami bagaimana kami dapat meningkatkan artikel ini?

VPS Alibaba