Belajar membuat layout website lengkap dengan TAG DIV dan CSS

Bagi seorang pemula dalam dunia Design Website, biasanya akan banyak mengalami kendala ketika akan membuat sebuah layout website dengan menggunakan TAG DIV. Hal ini dikarekanakan TAG DIV tidak dapat berdiri sendiri dalam penggunaannya, dimana TAG DIV harus disandingkan dengan CSS supaya dapat menghasilkan bentuk design layout yang lebih menarik

 

Pada contoh kali ini, kami mencoba menyajikan salah satu contoh layout product pendidikan yang demo programnya dapat anda lihat pada alamat di sini. Untuk membuat layout seperti demo program tersebut, langkah - langkah yang bisa kita lakukan adalah sebagai berikut

1. Persiapkan design layout 11307

Persiapan design dilakukan dengan cara membuat sebuah design halaman website, kemudian kita potong - potong sesuai dengan kebutuhan seperti terlihat pada gambar disamping. Pada gambar terlihat gambar dipotong kecil - kecil tetapi beraturan sesuai dengan kebutuhan, sehingga design website yang kita buat nantinya akan menjadi lebih ringan ketika sudah publish di internet


2. Membuat halaman layout index.php

Pada langkah berikut ini, kita harus bisa menentukan bagian - bagian dalam layout tersebut seperti bagian Header , Bagian Content, Bagian footer dan bagian - bagian lain yang akan digunakan dalam layout website. Karena layout menggunakan TAG DIV, maka kita belum bisa melihat tampilan layout sebelum kita menggunakan CSS.

Berikut script html dari design layout kita

<!-- bagian ini merupakan hasil generate dari macromedia dreamweaver -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!-- bagian ini untuk menampilkan icon website kecil disebelah alamat url -->
<link rel="Shortcut icon" href="images/favicon.jpg" type="image/x-icon" />

<!-- bagian ini untuk menampilkan title halaman website -->
<title>Tutorial pembelajaran website - computer technology </title>

<!-- bagian ini digunakan untuk memanggil script css yang berada pada folder style -->
<link rel="stylesheet" href="style/style.css" type="text/css" />
<link rel="stylesheet" href="style/slider.css" type="text/css" />

<!-- bagian ini digunakan untuk memanggil script javascript yang berada pada folder js -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/slider.min.jquery.js"></script>
<script type="text/javascript" src="js/javascript.js"></script>
</head>

<body>

<!--
bagian utama halaman website dengan lebar tertentu yang akan kita posisikan pada
posisi center browser.
-->
<div id="wrapper">
	
	<!-- membuat bagian header untuk penempatan logo dan lain - lain -->
	<div id="header">
		<div id="logo">
			<img src="images/theme/logo.png" border="0" align="absmiddle" />
		</div>
		<div id="share">
			<img src="images/theme/share.png" border="0" align="absmiddle" />
		</div>
	</div>
	
	<!-- membuat bagian untuk penempatan menu dan lain - lain -->
	<div id="top-menu">
		<div id="navigasi">
			<a href="#home">Home</a>
			<a href="http://media-kreatif.com" title="Situs pendidikan dan teknology">Media kreatif</a>
			<a href="http://media-kreatif.com/creativeclass">Pendidikan online</a>
			<a href="#home">Product</a>
			<a href="http://dynamic-307.media-kreatif.com" title="Live demo pendidikan kreatif">Demo product</a>
		</div>
	</div>
	
	<!-- membuat bagian untuk penempatan banner -->
	<div id="banner_web">
		<div class="slides_container" style="width:900px; height:250px;">
			<a href="#"><img src="images/theme/banner-1.jpg" width="900" height="250" /></a>
			<a href="#"><img src="images/theme/banner-2.jpg" width="900" height="250" /></a>
		</div>
	</div>
	
	<!--mem buat bagian untuk menampilkan content website -->
	<div id="content">
	<?php
		include("script/homepage.php");
	?>
	</div>
	
</div>
<!-- membuat bagian footer website untuk penempatan menu bawah dan tulisan copyright -->
<div id="footer">
	<div id="footer-dom">
		<p class="copy">copyright © 2012 - Media Kreatif</p>
	</div>
</div>

</body>
</html>

3. Membuat layout untuk bagian content - homepage.php

Bagian content merupakan isi dari halaman website yang akan kita buat, dalam contoh kali ini kami mencoba menyajikan sebuah content dengan sebuah pesan pembuka dan juga beberapa contoh posting statis seperti terlihat pada contoh script dibawah ini.

<h1  class="judul">Selamat Datang</h1>
<p>
<img src="./images/theme/logo.png" title="Media kreatif" alt="media kreatif" align="left" class="tumb" />
Media kreatif  merupakan website yang telah kami buat sebagai langkah awal dalam menyediakan pembelajaran dalam bidang website. 
Pada website yang sederhana ini, telah kami lengkapi dengan menu - menu yang dinamis sehingga dapat dikelola dengan mudah oleh Administrator. </p>
<p>Dalam program ini, kami mencoba menyediakan script - script program yang dilengkapi dengan penjelasan - penjelasan dalam bentuk komentar untuk mempermudah anda sekalian dalam mempelajari program ini. 
Dengan metode ini, pembaca sekalian yang ingin belajar tentang website dapat belajar dengan lebih mudah.</p>
<p>Dalam hal ini, kami juga melengkapi proses pembelajaran dengan forum belajar online pada masing - masing script pembelajaran yang kami sediakan. 
Adapun harga yang kami tetapkan untuk script pembelajaran dan juga penyediaan forum belajar online adalah sebesar <strong>Rp. 50.000,-</strong>. 
Silahkan melakukan pemesanan produk mk11307 ini dengan mengisi form pemesanan pada alamat berikut :</p>
<p align="center"><a href="http://media-kreatif.com/home/order/mk11307/website-computer-technology" title="Pesan product ini sekarang" target="_blank"><img src="images/icons/order-now.png" border="0" alt="Pesan sekarang" /></a></p>
<p>  </p>

<!-- Untuk menampilkan daftar postingan -->
<h1  class="judul">Posting terbaru</h1>
<!-- Posting pertama -->
<div id="posting">
<div id="thumbnail"><img src="./images/post/t_video.png" title="Gambar dari Video Processing" alt="video.png" class="tumb" /></div>
<a href="?p=24" title="Baca Video Processing selengkapnya" class="judulBerita">Video Processing</a>
<div id="headline"><p>
	Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<p class="tanggal"><span class="orange">12-Desember-2012 13:14:32</span> <span class="by">Oleh Admin</span></p>
<p class="more"><a href="?p=24" title="Baca Video Processing selengkapnya">Readmore...</a></p>
</div>
<!-- Posting kedua -->
<div id="posting">
<div id="thumbnail"><img src="./images/post/t_audio.png" title="Gambar dari Software Audio" alt="audio.png" class="tumb" /></div>
<a href="?p=23" title="Baca Software Audio selengkapnya" class="judulBerita">Software Audio</a>
<div id="headline"><p>
	Lorem Ipsum is simply dummy text of the printing and typesetting</p>
</div>
<p class="tanggal"><span class="orange">12-Desember-2012 13:14:44</span> <span class="by">Oleh Admin</span></p>
<p class="more"><a href="?p=23" title="Baca Software Audio selengkapnya">Readmore...</a></p>
</div>
<!-- Posting ketiga -->
<div id="posting"><div id="thumbnail"><img src="./images/post/t_linux.png" title="Gambar dari Linux OS" alt="linux.png" class="tumb" /></div>
<a href="?p=22" title="Baca Linux OS selengkapnya" class="judulBerita">Linux OS</a>
<div id="headline">
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem </p>
</div>
<p class="tanggal"><span class="orange">12-Desember-2012 13:14:59</span> <span class="by">Oleh Admin</span></p>
<p class="more"><a href="?p=22" title="Baca Linux OS selengkapnya">Readmore...</a></p>
</div>
<!-- Posting keempat -->
<div id="posting">
<div id="thumbnail"><img src="./images/post/t_lcd-monitor.png" title="Gambar dari LCD Monitor" alt="lcd-monitor.png" class="tumb" /></div>
<a href="?p=21" title="Baca LCD Monitor selengkapnya" class="judulBerita">LCD Monitor</a>
<div id="headline"><p>
	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been</p>
</div>
<p class="tanggal"><span class="orange">12-Desember-2012 13:15:11</span> <span class="by">Oleh Admin</span></p>
<p class="more"><a href="?p=21" title="Baca LCD Monitor selengkapnya">Readmore...</a></p>
</div>
<span class="nav">1 <a href="#">2</a>
<a href="#"> >></a></span>
</div>

Jangan merasa illfeel dengan kode - kode HTML diatas, karena kode - kode tersebut sebenarnya hanya sedikit ketika kita sudah berhadapan dengan sisi pemrograman PHP. Ketika sudah kita aplikasikan dalam PHP, bagian posting ini hanya kita ketik satu bagian saja seperti <!-- Posting pertama --> , dan itupun yang kita ketik hanya bagian HTMLnya saja, sedangkan kontennya otomatis kita ambilkan dari Database

4. Membuat CSS - simpan dalam folder style/style.css

Bagaimana cara mempelajari fungsi dari CSS dibawah ini, caranya simple saja. Copy saja dulu semua contoh script HTML yang ada diatas, tapi untuk css nya kita copy sedikit demi sedikit supaya kita bisa melihat bagaimana fungsi masing-masing perintah yang terdapat dalam CSS, kemudian lanjutkan mempelajari hingga semua bagian CSS sudah terintegrasi dengan script layout diatas

/*CSS yang umum dipakai dalam halaman website */
body{
	font:normal 12px Verdana, Arial, Helvetica, sans-serif;
	margin:0 0 0 0;
	padding:0 0 0 0;
	background-image:url('../images/theme/body.png');
	background-position:top left;
	background-repeat:repeat-x;
}
a{
	font:normal 12px Verdana, Arial, Helvetica, sans-serif;
	text-decoration:none;
	color:#0066FF;
}
a.judul-halaman{
	font:bold 18px Verdana, Arial, Helvetica, sans-serif;
	color:#1284a5;
}
#wrapper{
	width:900px;
	margin-left:auto;
	margin-right:auto;
}
#header{
	height:105px;
}
#header #logo{
	width:400px;
	float:left;
}
#header #share{
	width:300px;
	text-align:right;
	float:right;
	margin:60px 0 0 0;
}
#top-menu{
	height:105px;
	background-image:url('../images/theme/slogan.png');
	background-position:550px -10px;
	background-repeat:no-repeat;
}
#top-menu #navigasi{
	height:35px;
	margin:30px 0 0 0;
}
#top-menu #navigasi a{
	font:bold 14px Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	line-height:35px;
	text-decoration:none;
	padding:0 5px 0 5px;
}
#banner_web{
	height:250px;
	margin:0 0 20px 0;
}
#content{
	color:#666666;
	text-align:justify;
	letter-spacing:0.2px;
}
#content p,#content ul li, #content ol li, #content a{
	line-height:18px;
}
#posting{
	display:block;
	width:200px;
	float:left;
	margin:0 10px 0 0;
}
#headline #thumbnail{
	display:block;
	text-align:left;
}
a.judulBerita{
	font:bold 14px Verdana, Arial, Helvetica, sans-serif;
	display:block;
	color:#1284a5;
	text-decoration:none;
}
a.judulterkait{
	font:bold 12px Verdana, Arial, Helvetica, sans-serif;
	display:block;
	color:#1284a5;
	text-decoration:none;
	background-image:url('../images/icons/bullet.png');
	background-position:center left;
	background-repeat:no-repeat;
	padding:0 0 0 20px;
}
span.by{
	font:normal 10px Verdana, Arial, Helvetica, sans-serif;
	color:#666666;
}
p.more{
	font:normal 12px Verdana, Arial, Helvetica, sans-serif;
	text-align:left;
}
p.more a{
	font-weight:bold;
	color:#1284a5;
	display:block;
	text-decoration:underline;
}
a:hover{
	color:#FF9900;
}
#footer{
	height:42px;
	background-image:url('../images/theme/footer.png');
	background-position:top left;
	background-repeat:repeat-x;
}
#footer #footer-dom{
	width:900px;
	margin-left:auto;
	margin-right:auto;
}
#footer p.copy{
	font:normal 12px Verdana, Arial, Helvetica, sans-serif;
	display:block;
	width:300px;
	float:left;
	line-height:30px;
	color:#FFFFFF;
}

/* Css untuk TAG HTML Standard */
h1,h2,h3{
	font:bold 18px Verdana, Arial, Helvetica, sans-serif;
	margin:5px 0 5px 0;
}
h1.judul{
	color:#1284a5;
	display:block;
	border-bottom:#dcdcdc 1px solid;
	padding:0 0 5px 0;
	line-height:30px;
}
/*CSS untuk bagian paging */
span.nav{
	font:bold 12px Verdana, Arial, Helvetica, sans-serif;
	display:block;
	text-align:center;
	color:#666666;
}
span.nav a{
	font:bold 12px Verdana, Arial, Helvetica, sans-serif;
	color:#0099FF;
}

/*Span untuk warna */
span.hijau{
	color:#97c43d;
}
span.orange{
	color:#FF9900;
}
span.blue{
	color:#3d73b1;
}

Sangat diperlukan ketekunan dan ketelitian dalam mempelajari layout dengan menggunakan TAG DIV dan CSS, hal ini dikarenakan kita harus melakukan Coding manual dan sesekali melakukan preview pada browser untuk melihat hasilnya. Selamat mencoba contoh layout diatas, dan silahkan tuliskan komentar dan pertanyaan anda pada form komentar dibawah

Download layout website dengan tag div dan css


Komentar pembaca

lendoterima kasih artikelnya sangat membantu salam sejahtera mastah posting pada :2013-07-09 22:21:56
Nepriantoterima kasih mas,,,izin downloadposting pada :2013-07-17 12:37:33
supriTerima kasih petunjuknyaposting pada :2013-08-30 10:13:50
Bisnis OnlineTerima kasih atas, Izin donload gan...posting pada :2013-10-08 08:57:29
andreMakasih atas tutorialnya sangat membantu iya walaupun masih bingung tapi baguslah tutorialnya >> he,he,posting pada :2013-10-28 16:52:53
AdminAndre, Coba kunjungi juga tutorial berikut, mungkin bisa menambah refrensi pembelajaran design dengan TAG DIV dan CSS. http://media-kreatif.com/home/post/76/membuat-layout-halaman-login-facebook-dengan-tag-div-dan-css.prmposting pada :2013-10-28 20:28:09
babangterima kasih atas tutorialnya yang sangat membantu sekali. :)posting pada :2013-11-11 16:24:58
Ayubterima kasih tutorialnya...sangat bagus.posting pada :2013-11-12 13:17:52
jufrioioisangaat bagus tutorialnya , saya mau coba pelajarin tutorial ini , dan kalo ada ngga bisa saya minta bantuannya ya agan master , hehehheeposting pada :2013-11-22 06:34:41
davitAnda Ingin Bebas Finansial..?? Ingin Uang Mengalir Terus ke Rekening Anda..?? Apakah Anda Ingin Memiliki Penghasilan Tanpa Batas..?? Ingin Merubah Hidup Anda Saat ini Juga..?? INILAH SOLUSI TEPAT UNTUK ANDA, Memperkenalkan SOFTWARE PENAMBAH SALDO REKENING Temukan Info Selengkapnya Disini : http://goo.gl/nh8Y47 081273339299 Terimakasih posting pada :2013-12-11 23:49:20
davitAnda Ingin Bebas Finansial..?? Ingin Uang Mengalir Terus ke Rekening Anda..?? Apakah Anda Ingin Memiliki Penghasilan Tanpa Batas..?? Ingin Merubah Hidup Anda Saat ini Juga..?? INILAH SOLUSI TEPAT UNTUK ANDA, Memperkenalkan SOFTWARE PENAMBAH SALDO REKENING Temukan Info Selengkapnya Disini : http://goo.gl/nh8Y47 posting pada :2013-12-16 16:49:01
Susi ratnasariTerima kasih tutorialnya:)posting pada :2014-01-09 10:02:12
adiijin uprek bosposting pada :2014-03-14 20:39:24
rojhiebnumpang tanya mas itu untuk cssnya kira-kira bisa dipakai untuk membuat menu sekalian sama submenunya apa tidak? trima kasihposting pada :2014-04-04 20:27:54
Syahdan HidayatThanks kang izin download.. salam http://www.syahdanshare.netposting pada :2014-05-15 07:30:26
Awal Lowmntap gan...mampir di blogs ane jgk ya (y) awaltekhnology.blogspot.com posting pada :2014-06-02 14:04:54
wahyuterima kasih mas atas ilmunyaposting pada :2014-06-05 14:52:42
LutfiThanks gan , sangat membantu ane , mampir yah di blogger ane gan :D http://aniyosuke.blogspot.com/posting pada :2014-06-18 06:17:02
mahbubmantap gan posting pada :2014-08-30 21:19:40
GinanjarNgadepin lomba web bikin puyeng ,,,, :( Terimakasih banyak sangat membantu ,, :) posting pada :2014-09-04 18:04:28
Rosi AmanahKeren keren :)posting pada :2014-10-09 09:25:15
Afi MasytaMksh gan sangat membantuposting pada :2014-10-10 13:37:49
wowonkren gan,,, ijin copas ya...? posting pada :2014-10-17 15:05:35
theodorusmantap.... gan.... http://theodorus-tkjcomunity.blogspot.com/ di kunjungi yah.. posting pada :2014-10-25 08:05:31
Syarifmakasih tutorialnya gan...izin download.. :)posting pada :2015-03-14 11:26:59
sumantoterima kasih tutorialnya...sangat bagus dan sangat membantu untuk belajar web designposting pada :2015-04-27 08:52:45
sutaryaTerimakasih tutorialnya, sangat membantu. Dan ijin download ya.posting pada :2015-05-09 23:07:24
yaqnabagus bgt gan tutorialnya, mudah di serap pemahamannya.. ijin download gan :)posting pada :2015-05-28 16:42:48
AntariTerima kasih telah sharing ilmu, saya yakin anda akan mudah rejekiposting pada :2015-06-05 13:33:09
Penyebab Jerawatmantap mas, kebetulan lagi pelajarin div html, thanks sharingnya sangat membantuposting pada :2015-06-09 12:28:14
rofiqofkompor gas gan, keren (y) gua izin belajar sam posting pada :2015-11-07 11:25:35
sewa mobil palembangmakasih bosss, klo bisa ada video tutorialnya :Dposting pada :2015-12-24 15:15:13
antonkalau semuanya .php jalainya gimnh??posting pada :2016-01-21 23:54:35
anditerima kasih pencerahannya boss..posting pada :2016-04-18 11:26:22
IslamkuberagiKeren tutornya ganposting pada :2016-07-26 11:36:35
IhsanBer arti ini bisa juga di gunakan untuk wap xtgem kan gan..?posting pada :2016-07-28 06:38:44
Wapmild Situs Media CyberseoSaya berharap semua blogger dapat membuat artikel yang kreatif dan rell.. Seperti artikel ini misalnya, karna jujur sangat disayangkan banyak blogger ngepost hanya untuk menyampahi citra blogger, dgn membuat post tanpa kejelasan tema post serta isi post, buat admin blog ini salam santun tetaplah berkreasi wahay sobat, post anda sangat bagus by owner <a href="http://cari-apa.hexat.com">Situs Wapmild Multy fungsi</a>.posting pada :2016-09-12 21:47:00
yuanterimakasih gan...ijin download..ini sangat membantuposting pada :2017-02-15 22:07:07
         
     
         
 
         
   
         
   
 

Tulis komentar