Just another WordPress.com site

Dalam mendesain halaman web, cara yang dapat digunakan adalah dengan menggunakan css. Cara ini mempunyai banyak keuntungan, salah satunya adalah memperkecil kapasitas desain kita.

Berikut ini adalah sorce code yang dapat digunakan untuk menampilkan halaman web dengan css agar memperoleh tampilan seperti gambar yang ditunjukkan:

Pertama,buat source code seperti di bawah ini, dan simpan dengan nama “mystyle.css”

header,nav,article,aside,section,footer{
display:block;
}

header{
height:80px;
width:800px;
border:1px solid green;
}

nav{
height:20px;
width:800px;
border:1px solid blue;
}

section{
height:400px;
width:800px;
border:1px solid red;
}

footer{
height:20px;
close:both;
width:800px;
border:1px solid green;
}

#article{
margin-left:20px;
margin-top: 10px;
float:left;
height:360px;
width:550px;
border:1px dashed red;
}

#aside{
margin-left:20px;
margin-top: 10px;
float:left;
height:360px;
width:180px;
border:1px dashed black;
}

Jika sudah dilakukan, sekarang saatnya melakukan link terhadap desain kita, caranya adalah ketikkan source kode di bawah ini dan beri nama “studi-kasus.html”

<!DOCTYPE HTML>
<html lang=”en”>

<head>
<title> Studi Kasus</title>
<link rel=”stylesheet” href=”mystyle.css” type=text/css />
</head>

<body>
<header>
header
</header>

<nav>
nav
</nav>

<section>
<div id=”article”> article
</div>
<div id=”aside”> aside
</div>
section
</section>

<footer>
footer
</footer>

</body>
</html>

 

Nah..hasil tampilannya adalah sebagai berikut:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Tag Cloud

%d bloggers like this: