Untuk membuat layout sederhana seperti itu pertama buatlah folder coba kemudian buatlah file dokumen html dengan nama file beranda.html simpanlah di folder coba untuk source codenya sebagai berikut :
<html><head>
<title>Belajar Membuat Layout Web</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div id="content">
<header>
<h1>Ini Untuk Logo</h1>
</header>
<nav id="navbg" >
<ul class="navigation">
<li >
<a href="#">Kontak</a></li>
<li>
<a href="#">Profile</a></li>
<li>
<a href="#">Artikel</a></li>
<li >
<a href="#">Beranda</a></li>
</ul>
</nav>
<section id="banner">
<header >
Disini Untuk Banner
</header>
</section>
<section>
<article>
<ul class="kategori">
<li id="kat1">
<h3>Berita ke 1</h3>
<p>Isi konten. Apa saja yang penting Terisi hehe... </p>
<p>dan yang paling terpenting adalah belajarnya </p>
<p><center><a href="" >Baca Selanjutnya....</p></a></center>
</li>
<li id="kat2">
<h3>Berita ke2</h3>
<p>Isi konten. Apa saja yang penting Terisi hehe... </p>
<p>dan yang paling terpenting adalah belajarnya </p></p>
<p><center><a href="" >Baca Selanjutnya....</p></a></center>
</li>
<li id="kat3">
<h3>Berita ke 3</h3>
<p>Isi konten. Apa saja yang penting Terisi hehe... </p>
<p>dan yang paling terpenting adalah belajarnya </p>
<p><center><a href="" >Baca Selanjutnya....</p></a></center>
</li>
<li id="kat4">
<h3>Service4</h3>
<p>Isi konten. Apa saja yang penting Terisi hehe... </p>
<p>dan yang paling terpenting adalah belajarnya </p></p>
<p><center><a href="" >Baca Selanjutnya....</p></a></center>
</li>
</ul>
</article>
</section>
<footer id="footer">
<ul class="footer">
<li>
<strong> Kontak Kami </strong>
<ul class="footertext">
<li >
<a href="#">Kontak</a></li>
<li>
<a href="#">Portofolio</a></li>
<li>
<a href="#">Tentang Kami</a></li>
</ul>
</li>
<li>
<strong> Temukan Kami di Social Media</strong>
<ul class="footertext">
<li >
<a href="#">Facebook</a></li>
<li>
<a href="#">Twitter</a></li>
</ul>
</li>
</ul>
</footer>
</div>
<center><footer>Dibuat untuk pembelajaran @2011</footer></center>
</body>
</html>
setelah itu buatlah file css dengan nama file style.css untuk banner masukan sebuah gambar pada folder coba disini saya contohkan dengan nama file Screenshot.png
body
{
font-family: "Lucida Grande", sans-serif;
font-size:14px;
margin:0;
background-color:#f1f1f1;
}
p,h1,h2,h3
{
margin-left:5px;
}
#content
{
width:1002px;
clear: both; margin: 0 auto;
}
ul.navigation {
padding: 0;
margin: 0;
width: 100%;
}
ul.navigation li {
list-style-type: none;
display: block;
width: 100px;
line-height:35px;
margin:0 15px;
padding:0 5px;
float: right;
text-align: center;
background:#663300;
margin-top:-10px;
font-size:16px;
font-weight:bold;
}
ul.navigation li a {
display: block;
text-decoration: none;
color:#FFF;
}
ul.navigation li a:hover {
display: block;
width: 100px;
line-height:35px;
margin-top:-10px;
text-decoration: none;
}
#navbg
{
display:block;
background-color:#336600;
height:35px;
}
.navigation li:before {
content:"";
display:block;
position:relative;
left:-15px;
width:0;
height:0;
border-width:5px 5px 5px 5px;
border-style:solid;
border-color: transparent #2e3f00 #2e3f00 transparent ;
}
#banner
{
display:block;
height:250px;
background-image:url(Screenshot.png)
}
ul.kategori {
padding: 0;
margin:0;
width: 100%;
}
ul.kategori li {
list-style-type: none;
display: block;
float: left;
text-align: left;
background:#5f7e0a;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 20px;
width: 210px;
}
li#kat1
{background-color:#66CC00;}
li#kat2
{background-color:#669933;}
li#kat3
{background-color:#99CC33;}
li#kat4
{background-color:#99CC99;}
#footer
{
display:block;
clear:both;
background-color:#666633;
height:120px;
padding:5px;
}
ul.footer {
padding: 0;
margin: 0;
list-style: none;
}
ul.footer li {
list-style-type: none;
display: block;
margin-right:50px;
float: left;
text-align: left;
line-height:30px;
color:#FFF;
}
ul.footertext {
padding: 0;
margin: 0;
list-style: none;
}
ul.footertext li {
text-align: left;
float:left;
clear:both;
}
ul.footertext li a {
text-decoration: none;
display: block;
width: auto;
color: #FFFFFF;
}
ul.footertext li a:hover {
width:auto;
color: #dff293;
}
Selamat mencoba dan Berkreasi!
Tidak ada komentar:
Posting Komentar