Membuat Kerangka Web dengan CSS

Sabtu, Februari 26, 2011 | 4 Comments

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:

ika mengatakan...

mengisi tab home article dll nya gimana?????

Anonim mengatakan...
Komentar ini telah dihapus oleh administrator blog.
Anonim mengatakan...
Komentar ini telah dihapus oleh administrator blog.
symphonic mengatakan...

Komentar ini telah dihapus oleh administrator blog.

About

- alivi -