Cataloged Autobiography BERKENAAN SAYA  Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca.. | The Readable Journal MENEROKA ARTIKEL  Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini | Astrolab Tool KATEGORI ARTIKEL  Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini |
 5. ELEMEN UTAMA |
| December 29, 2009 Posted by: Fauzie |
Kandungan Tutorial
- 1. Tutorial Membina Layout Website-Pengenalan
- 2. Contoh Design atau Template
- 3. Default HTML Template
- 4. Set Canvas
- 5. Elemen Utama
- 6. Memberi Stail (Styling)
- 7. Memberi Style Di Bahagian Content
- 8. Memberi Stail Di Bahagian Footer
- 9. Meletakkan Menu Di Navigation
- 10. Memasang Script Jquery
- Ditulis Ulu Tiram
- Diarkib dalam kategori CSS dan HTML
- Klik Di Sini
Kita perlu memberi kod CSS baru untuk mendapatkan 4 elemen utama yang telah diterangkan pada permulaan artikel. Dengan kata lain kita perlu 4 "div" baru yang mempunyai "id" tersendiri.
Ok, cari kod ini:
<div id="page-container">
Hello world.
</div>
Hello world.
</div>
Sila padam atau delete perkataan "Hello world". Kemudian taip atau copy kod berwarna maroon dan paste di mana perkataan Hello world itu tadi terletak
<div id="page-container">
<div id="header">Header</div>
<div id="main-nav">Main Nav</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
<div id="header">Header</div>
<div id="main-nav">Main Nav</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
Kita delete perkataan Hello world kerana ia sudah tidak berfungsi lagi.
Klik Preview dan kalau tiada masaalah klik Save Template. Apa yang kelihatan sekarang ialah perkataan:Header, Main Nav, Content dan Footer yang tersusun mengikut "flow" susunan kod-kod di atas.
Semua div di atas mesti mempunyai saiz yang sama. Sekarang mari kita tambah kod-kod baru untuk tujuan ini.
Cari kod seperti di bawah ini:
#page-container {
width: 450px;
margin: auto;
background: red;
}
width: 450px;
margin: auto;
background: red;
}
Di bahagian bawah "}" sila taipkan atau copy dan paste kod berwarna maroon seperti di bawah ini:
#page-container {
width: 450px;
margin: auto;
background: red;
}
#header {
background: blue;
height: 150px;
}
width: 450px;
margin: auto;
background: red;
}
#header {
background: blue;
height: 150px;
}
Kod baru ini untuk membuat header yang berlatarbelakang dengan warna biru dan tingginya 150 pixel. Klik Preview dan Save Template.
Di bawah kod baru di atas, kita tambah kod baru (maroon) sebagai tempat untuk navigation pula, iaitu "main-nav".
#header {
background: blue;
height: 150px;
}
#main-nav {
background: lime;
height: 50px;
}
background: blue;
height: 150px;
}
#main-nav {
background: lime;
height: 50px;
}
Kod ini akan memberi bahagian navigation berwarna hijau dan dengan ketinggian 50 pixel.
Seterusnya masukkan pula kod baru untuk content di bawah kod berwarna maroon di atas.
#main-nav {
background: red;
height: 50px;
}
#content {
background: yellow;
}
background: red;
height: 50px;
}
#content {
background: yellow;
}
Akhir sekali kita masukkan kod CSS untuk footer pula. Seperti biasa copy dan paste kod warna maroon di bawah ini dan letakkan di bahagian bawah kod content.
#content {
background: yellow;
}
#footer {
background: orange;
height: 66px;
}
background: yellow;
}
#footer {
background: orange;
height: 66px;
}
