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-kerangka 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>Sumber :
http://blog.um.ac.id/alivi/informatika-3/pemrograman-web/membuat-kerangka-web-dengan-css/
noreply@blogger.com (rian saadillah sukamdi Yan) 06 Jun, 2013
-
Source: http://besoklagiaja.blogspot.com/2013/06/membuat-kerangka-web-dengan-css.html
--
Manage subscription | Powered by rssforward.com
Tidak ada komentar:
Posting Komentar