Maret 19, 2013

Saya mengamsumsi anda sudah cukup mengenal keywords pada program HTML seperti <tag>, <a href>, <p> ,<br>, <frameset>,<frame> <header>, <footer> dan anda sudah cukup mengetahui tentang fungsinya tersebut sehingga memudahkan dalam mebuat program ini....

Berikut saya akan membuat contoh web sederhana yang mungkin membantu anda.
 contoh webesite yang akan saya berikan modelnya seperti ini











Tetapi sebulum anda membuatnya anda sebaiknya sudah memiliki beberapa desain web sederhananya sehingga membantu agar desain ini berjalan.

Berikut adalah kodingnya beserta penjelasan singkatnya

<!DOCTYPE HTML>
<html lang=en>
<head>
<title>Simplistic HTML5</title>
<meta charset=utf-8>
<style>
body { width:500px; margin:auto;
}
header, nav, article, footer { display:block;
}
header { width:500px; background-color:#FF9966; text-align:center; margin:auto;
}
nav { float:left; width:25%; background-color: #FF9966; margin-bottom:10px;
}
article { float:right; width:70%; background-color:#FF9966; margin-bottom:10px;
}
footer { clear:both; background-color:#FF9966; text-align:center;
}
h2 { font-size:large; font-weight:bold; margin-top:0; margin-bottom:0;
}
</style>
</head>
<body>
<header>
<h1>header goes here</h1>
</header>
<nav>
<ul>
<li><a href="page-one.html" >Page One</a></li>
<li><a href="page-two.html" >Page Two</a></li>
<li><a href="index.html" >Home page</a></li>
</ul>
</nav>
<article>
<h2>Article</h2>
Are you illiterate? Write today for free course.
</article>
<article>
<h2>Another Article</h2>
Stock up for Christmas. Limited to one per family.
</article>
<footer>
Footer. Perhaps for a copyright statement
</footer>
</body>
</html>

  1. <!DOCTIPE HTML> merupakan bahasa programan untuk HTML5 jika yang anda pelajari  masih versi XHTML maka anda cukup menghapusnya dan tidak perlu menulisnya
  2. <html lang=en> Ini merupakan pemerograman menggunakan bahasa inggris jika anda ingin mengganti dalam bahasa lain bisa di liat di sini
  3. untuk yang saya coret anda bisa menggantinya dengan nama desain anda sendiri yang telah anda miliki.
Silakan Mencoba.... Tinggalkan Komen jika blum jelas....

Tidak ada komentar:

Posting Komentar

Terima Kasih Sudah Mau Berkunjung