Membuat Simpel Site HTML Layout Menggunakan Tag div

Ukuran: px

Mulai penontonan dengan halaman:

Download "Membuat Simpel Site HTML Layout Menggunakan Tag div"

Yuliani Kusumo
7 tahun lalu
Tontonan:

2 Membuat Simpel Site HTML Layout Menggunakan Tag div Oleh: Yudhistira Bayu W 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... 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

3 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 = 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">

4 <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> <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 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: JagoCoding Menu Isinya nanti disini gan Home About Contact Ask Copyright Yudhistira B W

5 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. Saya juga sudah membuat milik saya sendiri, yang sudah saya setting sejauh mungkin, kalo agan mau liat bisa klik Disini 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, Tentang Penulis Yudhistira Bayu W Seorang pelajar tampan dan rupawan yang mencoba belajar coding.

dokumen-dokumen yang mirip

Membuat Layout Footer Menempel ke Bawah

Membuat Layout Footer Menempel ke Bawah Oleh: Christian Rosandhy Kali ini saya mau share lagi salah satu layout wajib buat website, yaitu layout footer menempel kebawah. Di tutorial kali ini kita akan