Breaking

Wednesday, November 21, 2012

Membuat Simple Site Layout HTML Menggunakan Tag Div

Mylinekerr Fact - Ya, setelah saya memberikan Tutorial Tutorial Simpel HTML pada sebelumnya, Kali Ini saya akan memberikan Cara Membuat Simpel site dengan HTML. Dulu saya belajar di w3schools, dan sekarang setelah saya paham, dan saya sudah sukses membuatnya, akan saya posting disini.
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.


<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>Nama Web Anda</h1></div>

<div id="menu" style="background-color:#DCDCDC;height:200px;
width:100px;float:left;">
<b>Menu</b>
<hr>
<a href="#">Home</a><br />
<a href="#">About</a><br />
<a href="#">Contact</a><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 &#169; Mylinekerr</white></div>

</div>

</body>
</html> 

Mengapa saya menggunakan code &#169; 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:

Isinya nanti disini gan


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.

Sekian dari ane, kalo ada yang mau ditanyakan bisa lewat comment nanti :) Untuk artikel membuat website menggunakan tag <table> akan ane tulis di Tutorial selanjutnya. Jika ada yang ingin ditanyakan, bisa lewat komentar.

4 comments:

  1. Replies
    1. kami sekeluarga tak lupa mengucapkan puji syukur kepada ALLAH S,W,T
      dan terima kasih banyak kepada AKI atas nomor togel.nya yang AKI
      berikan 4 angka 3167 alhamdulillah ternyata itu benar2 tembus AKI.
      dan alhamdulillah sekarang saya bisa melunasi semua utan2 saya yang
      ada sama tetangga.dan juga BANK BRI dan bukan hanya itu AKI. insya
      allah saya akan coba untuk membuka usaha sendiri demi mencukupi
      kebutuhan keluarga saya sehari-hari itu semua berkat bantuan AKI..
      sekali lagi makasih banyak ya AKI… bagi saudara yang suka main togel
      yang ingin merubah nasib seperti saya silahkan hubungi AKI SOLEH,,di no (((082-313-336-747)))
      insya allah anda bisa seperti saya…menang togel 275
      juta, wassalam.


      dijamin 100% jebol saya sudah buktikan...sendiri....







      Apakah anda termasuk dalam kategori di bawah ini !!!!


      1"Dikejar-kejar hutang

      2"Selaluh kalah dalam bermain togel

      3"Barang berharga anda udah habis terjual Buat judi togel


      4"Anda udah kemana-mana tapi tidak menghasilkan solusi yg tepat


      5"Udah banyak Dukun togel yang kamu tempati minta angka jitunya
      tapi tidak ada satupun yang berhasil..







      Solusi yang tepat jangan anda putus asah....AKI SOLEH akan membantu
      anda semua dengan Angka ritwal/GHOIB:
      butuh angka togel 2D 3D 4D SGP / HKG / MALAYSIA / TOTO MAGNUM / dijamin
      100% jebol
      Apabila ada waktu
      silahkan Hub: AKI SOLEH DI NO: (((082-313-336-747)))




      atau klik langsung di KLIK DSINI BOCORAN TOGEL



      angka GHOIB: singapur 2D/3D/4D/



      angka GHOIB: hongkong 2D/3D/4D/



      angka GHOIB; malaysia



      angka GHOIB; toto magnum 4D/5D/6D/



      angka GHOIB; laos

      Delete
  2. mas,,,di menu we simplesite letak htmlnya dimana?

    ReplyDelete