hehehe. sebenarnya sih sudah terlambat kalau mau posting studi kasus modul 4 ini. hm, tapi lebih baik terlambat daripada tidak sama sekali , bukan begitu (?) #menghibur diri sendiri.
yah, hitung-hitung berbagi ilmu sama yg mau baca. karena alangkah baiknya jika kita bisa berbagi dengan orang lain apa yg kita punya dan yang kita pahami #walaupun sebenarnya saya juga tidak paham banget alias masih dalam tahap belajatr :)
yey. berikut ini cara membuat desain border halaman web. yg standart yg di dalamnya content-nya belum ada isinya apa-apa. lets play ..
================================================================================================================================================
>> langkah pertama , buat code dan menyimpannya dengan ekstensi css. berikut sourcenya ..
body {
margin: 10px auto;
width: 750px;
}
header,nav,section,footer {
display:block;
}
header {
height:70px;
width:700px;
border:1px solid red;
background:#971c96;
nav{
float:left;
width:700px;
height:20px;
border:1px solid blue;
}
section{
float:left;
width:700px;
height:370px;
border:1px solid yellow;
}
sidebar {
float:left;
margin-left:20px;
margin-top:20px;
height:330px;
width:430px;
border:1px dashed purple;
}
sidebar2 {
float: right;
margin-right:20px;
margin-top:20px;
height:330px;
width:210px;
border:1px dashed pink;
}
footer {
width:700px;
clear:both;
height:20px;
border:1px solid green;
}
=====================================================
>> langkah kedua , buat code lagi sebagai headernya dan menyimpan dengan ekstensi html. berikut ini adalah sourcenya ..
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>>> Studi Kasus Modul 4 <<</title>
<link rel="stylesheet" href="mystyle.css" type=text/css />
</head>
<body>
<header>
header
</header>
<nav>
nav
</nav>
<section>
<sidebar>
content1
</sidebar>
<sidebar2>
content2
</sidebar2>
</section>
<footer>
footer
</footer>
</body>
</html>
=====================================================
>> dan yey. apabila berhasil, berikut ini tampilannya ..
==========================================================================================================
Tidak ada komentar:
Posting Komentar