Tutorial Pemula - NewBie

Membuat Tampilan Layout Website Sederhana Dengan HTML dan CSS

Membuat Tampilan Layout Website Sederhana Dengan HTML dan CSS – Layout atau susunan kerangka website adalah salah satu unsur pembuatan web yang harus paling di perhatikan. terutama untuk teman-teman yang ingin mengkhususkan diri di bagian web designer. karena tampilan website akan menggambarkan tingkat profesional seseorang web designer. di tutorial ini saya akan mencoba untuk menjelaskann tentang cara Membuat Tampilan Layout Website Sederhana Dengan HTML dan CSS. jadi di tutorial ini akan di jelaskan tentang teknik pembuatan layout website paling sederhana. untuk teman-teman yang beru menyelesaikan pelajaran tentang HTML Dasar dan CSS Dasar, teman-teman bisa melanjutkan pembelajaran teman-teman di artikel ini untuk mulai membuat tampilan website sederhana.

Tampilan website yang akan kita buat di sini adalah tampilan website yang paling sederhana saja. karena artikel ini di tujukan untuk teman-teman yang baru belajar. oleh sebab itu teknik membuat tampilan website nya akan di bahas yang sangat dasar dulu. dari penyusunan element-element HTML untuk membuat kerangka website.
Membuat Tampilan Layout Website Sederhana Dengan HTML dan CSS

Jadi di sini akan saya jelaskan tentang layout yang paling standart dan paling umum. bisa teman-teman perhatikan susuan kerangka website sederhana seperti di gambar berikut.

contoh layout

Membuat tampilan layout website sederhana dengan html dan css

coba teman-teman perhatikan pada contoh layout web pada gambar di atas. gambar di atas adalah susunan biasa dan sangat umum untuk tampilan sebuah website. di mana terdapat sebuah header pada bagian atas. sidebar di bagian kiri atau kanan. konten yang bersebelahan dengan sidebar. dan footer terdapat pada bagian paling bawah.

Pada bagian header sebuah website biasanya di letakkan judul website, dan deskripsi sebuah website tersebut. pada sidebar biasanya di letakkan link-link yang mengarah pada artikel-artikel. baik itu artikel terbaru dan artikel paling populer. pada bagian konten berisi konten-konten website seperti artikel dan lainnya. dan pada bagian paling bawah yaitu footer biasanya berisi nama website dan copyrigth website tersebut.
Membuat Layout Tampilan Website Sederhana

nah sekarang kita akan mulai membuat sebuah layout website yang paling sederhana sama seperti format pada gambar di atas. untuk bisa mudah memahami tentang cara membuat template website. teman-teman harus memahami dulu dasar-dasar HTML dan CSS.

Pertama, buat sebuah file. di sini saya membuat sebuah file dengan nama layout.php

layout.php

<!DOCTYPE html>
<html>
<head>
	<title>Judul Web Anda</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="bingkai">
		<div class="header">
			<h1>Web Develindo.com</h1>
			<p>Tutorial belajar membuat layout website sederhana</p>
		</div>
		<div class="menu">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">HTML</a></li>
				<li><a href="#">CSS</a></li>
				<li><a href="#">PHP</a></li>
				<li><a href="#">Javascript</a></li>
			</ul>
		</div>
		<div class="badan">
			<div class="sidebar">
				sidebar
				<ul>
					<li><a href="#">Tutorial HTML dasar</a></li>
					<li><a href="#">Tutorial CSS dasar</a></li>
					<li><a href="#">Tutorial PHP dasar</a></li>
					<li><a href="#">Tutorial JQuery dasar</a></li>
				</ul>
			</div>
			<div class="content">
				content
			</div>
		</div>
		<div class="clear"></div>
		<div class="footer">
			footer
		</div>
	</div>
</body>
</html>

Simpan di folder yang sama dengan tutorial sebelumnya yah

selanjutnya anda buat sebuah file untuk script CSS

style.css

body{
    background:#f4f4f4;
}
.bingkai{
	background: #DDD;
	width: 900px;
	margin: 20px auto;
    border : #CCC solid 1px;
}

/*bagian header*/
.bingkai .header{
	background: #ea3b16;
	/*height: 50px;*/
	padding: 2px 10px;
}

/*akhir header*/

/*bagian menu*/
.bingkai .menu{
	background: #eacd9a;
    width:100%;
    height:40px;
}

.bingkai .menu ul{
	padding: 0;
	margin: 0;

}

.bingkai .menu ul li{
	float: left;
	list-style: none;
	padding: 10px;
}
/*akhir menu*/

.clear{
	clear: both;
}

.badan{
	height: 450px;
}
/*bagian sidebar*/
.bingkai .badan .sidebar{
	background: #FFF;
	float: left;
	width: 25%;
	height: 100%;
}

/*akhir sidebar*/

.bingkai .badan .content{
	background: #f1f1f1;
	float: left;
	height: 100%;
	width: 75%;
}

.bingkai .footer{
	width: 100%;
	padding: 10px;
}

Simpan file style.css di folder yang sama yah

nah sekarang anda coba jalankan file layout.php di browser anda, maka tampilannya akan seperti ini

membuat-layout

Sekarang anda sudah dapat membuat tampilan layout sederhana dengan HTML dan CSS, silahkan anda kembangkan dan modifikasi sendiri yah..

Terimakasih

develindo.com

Develindo Web | Tutorial Pemrograman Website