Sebelum membuat halaman web, sebaiknya kita membuat kerangka dari halaman web tersebut. Ini akan memudahkan kita karena dengan adanya kerangka, kita tinggal mengisikan apa yang akan kita isikan pada kerangka-kerangkla web tersebut. Contoh kerangka suatu halaman web dapat dilihat di bawah ini :
Untuk kode css-nya "kerangka.css" dapat dilihat di bawah ini :
body {
margin: 30px auto;
width: 800px;
}
header, nav, section, article, aside, footer {
display: block;
}
header {
height: 80px;
border: 1px solid yellow;
text-align: center;
}
nav {
float: left;
width: 800px;
height: 40px;
border: 1px solid green;
}
section {
float: left;
width: 800px;
height: 350px;
border: 1px solid orange;
}
article {
float: left;
height: 300px;
width: 500px;
margin: 20px 50px 50px 30px;
border: 1px dashed red;
text-align: center;
}
aside {
margin: 20px 50px 50px 570px;
height: 300px;
width: 200px;
border: 1px dashed red;
text-align: center;
}
footer {
clear: both;
width: 800px;
height: 20px;
border: 1px solid blue;
}
tombol, login {
display: block;
cursor: pointer;
float: left;
height: 25px;
width: 90px;
margin: 6px 10px 10px 20px;
border: 1px solid blue;
text-align: center;
}
login {
margin: 10px 10px 10px 50px;
}
Sedangkan untuk kode html-nya dapat dilihat dibawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Desain Layout Sederhana HTML5</title>
<link rel="stylesheet" href="kerangka.css" type="text/css" />
</head>
<body>
<header>header</header>
<nav>
<tombol>home</tombol>
<tombol>article</tombol>
<tombol>download</tombol>
<tombol>About Us</tombol>
</nav>
<section>
<article>article</article>
<aside>
<login>Log In</login>
<br /><br /><br />aside</aside>
</section>
<footer>footer</footer>
</body>
</html>
selamat mencobaaa !!!
Baca Selengkapnya...
4 komentar:
mengisi tab home article dll nya gimana?????
Komentar ini telah dihapus oleh administrator blog.
Posting Komentar