Membuat Template HTML Sendiri

Pada postingan kali ini saya mau bagi – bagi duit tutorial nge buat template html sendiri , langsung saja yuk ,..

Yang pertama buat file berekstensi .html , terserah kamu mau pake nama apa , contoh aja ane pake index.html . Silahkan buka dangan text editor , disini ane pake notepad++ . Biar mudah , kita rancang dulu yang akan kita buat . Contoh kira kira kaya giini :

flow

Nah, sekarang tinggal menjadikannya dalam tag html , lanjuut…

1. Struktur utama

<!DOCTYPE html>
<html>
<head>
<title>PHP DO By Wakuadratn</title>
</head>
<body>
 // Content //
</body>
</html>

2. Selanjutnya kita buat header , pastikan selalu menutup tag dengan benar .

<header>
<a href="#">PHP DO</a><span>By Wakuadratn</span>
</header>

3. kemudian Menu :

<nav>
 <ul>
  <li><a href="#">Home</a></li>
  <li><a href="">Menu</a></li>
  <li><a href="">Menu</a></li>
  <li><a href="">Menu</a></li>
  <li><a href="">Menu</a></li>
 </ul>
</nav>

4. Body / content :

<div id="content">
// content //
</div>

5. Footer

<div id="footer">
   <p class="footer">
<span class="copyright">&copy; 2013 . <a href="./">PHP DO</a> .</span>Powered by <strong>Wakuadratn Lab's</strong></p>
</div>

kita tengok dulu hasilnya :

no-style

*di contoh SC saya tambahkan lorem ipsum teks.

Saatnya kita tambahkan sentuhan stylesheet (css) .

untuk mempersingkat waktu , di tutorial kali ini kita menggunkan css dalam satu file dengan html . OK! Langsng next –>

tambahkan tag <style></style> sebelum tag </head>

<style>
/* CSS content */
</style>

6. Header & Menu

/*
 * HEADER & MENU
 */

	header {
		font-family: 'lobster';
		color: #363636;
		background-color: transparent;
		font-size: 28px;
		font-weight: bold;
		padding: 35px 15px 15px 15px;
		text-transform: none;
	}

	header .slogan {
		font-family: times new roman;
		padding:0 15px;
		font-size: 12pt;
		line-height: 12px;
		font-weight: normal;
		font-style: italic;
		text-transform: none;
	}

	nav {
		color: #444;
		background-color: transparent;
		border-top: 1px solid #D0D0D0;
		border-bottom: 1px solid #D0D0D0;
		font-size: 16px;
		font-weight: normal;
		height: 40px;
	}

	nav ul {
		list-style:none;
		margin:10px;
		padding:0 5px 0 5px;
	}

	nav ul li {
		padding: 0 5px;
		list-style:none;
		display:inline;
	}

7. edit tag header

<header>
<a href="#">PHP DO</a><span class="slogan">By Wakuadratn</span>
</header>

Hasil sampai tahap ini :

style-header

Sudah mulai kelihatan sasarannya nih ,.. OK, tinggal kita utak atik biar cakep .
Nih , berikutnya html code selengkapnya yang ane buat :

<body>
<div id="wrapper">
    <header><a href="#">PHP DO</a><span class="slogan">By Wakuadratn</span></header>

<div id="container">
	<nav>
		<ul>
            <li><a href="#">Home</a></li>
			<li><a href="">Menu</a></li>
			<li><a href="">Menu</a></li>
			<li><a href="">Menu</a></li>
			<li><a href="">Menu</a></li>
		</ul>
	</nav>

	<div id="body"><div class="container">	<div id="content">
	<h2 class="lobster">Lorem ipsum dolor sit amet</h2>
    <div class="content">
    <p>Lorem ipsum dolor sit amet,</p>

</div>
	</div>
</div>
</div>
</div>
<div style="height:60px;"></div>
</div>
<div id="footer">
      <p class="footer"><span class="copyright">&copy; 2013 . <a href="./">PHP DO</a> .</span>Powered by <strong>Wakuadratn Lab's</strong></p>
    </div>
</body>

Hasil akhir :

final

Sekian dulu pembahasan membuat template html sendiri kali ini , silahkan tingkatkan kretifitas anda untuk membuat template html yang lebih menarik lagi .

Download :

http://adf.ly/V2ORY

salam wakuadratn.

7 thoughts on “Membuat Template HTML Sendiri

  1. Rachman. S

    Mau nanya gan, misalnya ane mau kuliah dengan jurusan yang berkaitan dengan pembuatan template seperti diatas jurusannya apa yaa?

    Balas

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s