Cara membuat simpel site HTML, bisa menggunakan tag <div> dan tag
<table><tr><td>. Tapi jika anda masih newbie dalam Hal
Coding, saya menyarankan menggunakan tag <div> karena codenya
lebih mudah dipahami dibandingkan tag <table>. Namun di artikel
ini saya akan memposting dengan cara tag div. Untuk tutorial selanjutnya
menggunakan tag <table>. So, let's try!
Membuat Simpel Site Layout Menggunakan Tag <div>
Tag Inti yang kita butuhkan untuk membuat Simpel site dengan div adalah:
<div id="container" style="width:1000px;">
Sebagai Tempat atau Isi dari Seluruh tag tag div yang ada pada codenya nanti, width atau heightnya bisa di atur sendiri kalo kau mau.
Tapi width disini sengaja saya pasang 1000 px agan dia seimbang dengan layarnya nanti, atau yang biasa kita sebut Fix.
Membuat Simpel Site Layout Menggunakan Tag <div>
Tag Inti yang kita butuhkan untuk membuat Simpel site dengan div adalah:
<div id="container" style="width:1000px;">
Sebagai Tempat atau Isi dari Seluruh tag tag div yang ada pada codenya nanti, width atau heightnya bisa di atur sendiri kalo kau mau.
Tapi width disini sengaja saya pasang 1000 px agan dia seimbang dengan layarnya nanti, atau yang biasa kita sebut Fix.
<div id="header" style="background-color:#000000;">
Sebagai tempatnya Header, atau yang biasa kita sebut tempat judul. background-colornya bisa anda ubah sendiri, dan jika ingin backgroundnya
menggunakan gambar, anda bisa menghapus code background-color:#000000; menjadi background:url(linkgambar.jpg); dan format gambar ga
harus JPG, bisa pake PNG, GIF, dll. Tag header tidak saya pasang width sama heightnya, karena sudah di defaultkan oleh tag container.
<div id="menu" style="background-color:#DCDCDC;height:500px;width:200px;float:left;">
Sebagai tempat Menu dari website tersebut. Dimana kita bisa menambahkan menu sendiri. Untuk lebih rinci akan di jelaskan nanti. Dan mengapa
saya memasang heightnya 500 dan widthnya 200? heightnya biar default, dan widthnya agar bisa kita bagi untuk Contentnya nanti. Dan background
color juga bisa diubah dengan gambar atau warna lain, seperti di tag header tadi.
<div id="content" style="background-color:#EEEEEE;height:500px;width:800px;float:left;">
Tag content ini berfungsi sebagai content dari seluruh bagiannya, atau bagian utama dari website tersebut. Background color bisa diubah seperti
yang sudah dibahas di atas tadi. Dan height dan widthnya kenapa saya pasang 500 dan 800? Kalo 500 karena disesuaikan dengan menu, tapi width
nya saya pasang 800 juga agar seimbang dengan menu. Jika menu widthnya 200, dan containernya 1000, maka 1000-200 = 800. Maka saya
pasang width pada contentnya 800.
<div id="footer" style="background-color:#000000;clear:both;text-align:center;">
Tag footer berfungsi sebagai Copyright, atau page page pada footer lainnya. Disini kenapa saya tidak memberikan width dan heightnya, karena
juga sudah di defaultkan oleh container seperti pada Header.
Sudah jelas tag yang dibutuhkan? sekarang kita membuat seluruh code codenya. Jangan lupa menggunakan <!DOCTYPE html><html> sebagai penanda bahwa document adalah berjenis HTML. Nah, setelah saya berikan seluruh tag inti tadi, saya akan memberikan contoh code dari saya.
Contoh Code Dari saya:
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#000000;">
<h1 style="margin-bottom:0;color:#FFFFFF"><center>JagoCoding</h1></div>
<div id="menu" style="background-color:#DCDCDC;height:200px;width:100px;float:left;">
<b>Menu</b><br><hr>
<a href="#">Home</a><br />
<a href="#">About</a><br />
<a href="#">Contact</a><br /><br><a href="#">Ask</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Isinya nanti disini gan</div>
<div id="footer" style="background-color:#000000;clear:both;text-align:center;">
<font color="white">Copyright © JagoCoding</white></div>
</div>
</body>
</html>
Mengapa saya menggunakan code © pada copyright? Karena ini merupakan Entities atau simbol simbol pada HTML. Udah saya tulis di artikel sebelumnya.
Dari kode di atas, Jika Telah di Input, maka akan menjadi:
Setelah saya berikan contoh code HTML Tadi, harusnya anda sekarang bisa membuat simpel site Layout itu sendiri. Dari code di atas tadi, harusnya kini anda telah bisa membuat website menggunakan Tag div Tadi. Saya juga sudah membuatnya.
Tidak ada komentar:
Posting Komentar