 |
| Html/Css |
Selamat Malam semua ,Bertemu lagi dengan indopedia pemrograman web nah saat ini saya akan menerangkan bagaimana cara membuat layout pada web secara sederhana menggunakan HTML dan CSS.
Gimana gan...??Iya tunggu bentar gan ini ane masi ngarang scriptnya maklum ane masi belajar juga (newbie)yuk lansung saja kita kulas pembahsan di atas Gini pertama anda harus membuat dasar-dasar script HTML anda bisa copy kan scriptnya di bawah ini.
Copy Script Dibawah ini dan Tulisakan Formatnya Index.html
Script Css
<title>Dunia Teknologi</title>
<style type ="text/css">
#wrapper{
border-radius:8px;
background:#11a9e5;
width:950px;
height: 996px;
margin-left:auto;
margin-right:auto;
padding-top:1px;
padding-left:6px;
}
#header{
border-radius:8px;
background:#407f98;
width:930px;
margin:10px 2px 10px 2px;
height:150px;
border:3px solid white;
}
#menu{
border-radius:8px;
position: Reelative;
width: 930px;
height: 40px;
background:#8dcff4 ;
border: 5px solid white;
font-size: 2em;
}
#menu li{
padding:2px;
margin:0px 20px;
list-style:none;
float: left;
position: relative;
border-right: 3px solid white;
text-align: center;
}
#menu li a{
text-decoration: none;
}
#content{
width: 610px;
height:680px;
background: #407f98;
border: 5px solid white;
margin: 10px 2px 10px 2px;
float: left;
}
#seidebar{
width: 302px;
height: 680px;
background:#407f98 ;
border: 5px solid white;
margin: 10px 2px 10px 5px;
float: left;
}
#footer{
width: 930px;
height: 35px;
background: #8dcff4;
border: 5px solid white;
float: left;
}
</style>
<style type ="text/css">
#wrapper{
border-radius:8px;
background:#11a9e5;
width:950px;
height: 996px;
margin-left:auto;
margin-right:auto;
padding-top:1px;
padding-left:6px;
}
#header{
border-radius:8px;
background:#407f98;
width:930px;
margin:10px 2px 10px 2px;
height:150px;
border:3px solid white;
}
#menu{
border-radius:8px;
position: Reelative;
width: 930px;
height: 40px;
background:#8dcff4 ;
border: 5px solid white;
font-size: 2em;
}
#menu li{
padding:2px;
margin:0px 20px;
list-style:none;
float: left;
position: relative;
border-right: 3px solid white;
text-align: center;
}
#menu li a{
text-decoration: none;
}
#content{
width: 610px;
height:680px;
background: #407f98;
border: 5px solid white;
margin: 10px 2px 10px 2px;
float: left;
}
#seidebar{
width: 302px;
height: 680px;
background:#407f98 ;
border: 5px solid white;
margin: 10px 2px 10px 5px;
float: left;
}
#footer{
width: 930px;
height: 35px;
background: #8dcff4;
border: 5px solid white;
float: left;
}
</style>
Dan apakah sudah selesai gan belom gan ini ada script css nya letakkan di bawah titile.
Script Html
<!doctype html>
<html>
<head>
</head>
<body>
<div id ="wrapper">
<div id ="header">
</div>
<div id ="menu">
<li><a href ="#">Home</a></li>
<li><a href ="#">Contact</a></li>
<li><a href ="#">Privasi</a></li>
<li><a href ="#">Pengetahuan</a></li>
<li><a href ="#">Profil</a></li>
</div>
<div id ="content">
</div>
<div id ="seidebar">
</div>
<div id ="footer">
<center>Copy Right All 2017 By Dunia Teknologi</center>
</div>
</div>
</body>
</html>
<html>
<head>
</head>
<body>
<div id ="wrapper">
<div id ="header">
</div>
<div id ="menu">
<li><a href ="#">Home</a></li>
<li><a href ="#">Contact</a></li>
<li><a href ="#">Privasi</a></li>
<li><a href ="#">Pengetahuan</a></li>
<li><a href ="#">Profil</a></li>
</div>
<div id ="content">
</div>
<div id ="seidebar">
</div>
<div id ="footer">
<center>Copy Right All 2017 By Dunia Teknologi</center>
</div>
</div>
</body>
</html>
Adapun script lengkapnya anda bisa copas script di bawah ini Dan pemasngan script nya pun anda bisa lihat pada script di bawah ini .
Script Lengkap
<!doctype html>
<html>
<head>
<title>Dunia Teknologi</title>
<style type ="text/css">
#wrapper{
border-radius:8px;
background:#11a9e5;
width:950px;
height: 996px;
margin-left:auto;
margin-right:auto;
padding-top:1px;
padding-left:6px;
}
#header{
border-radius:8px;
background:#407f98;
width:930px;
margin:10px 2px 10px 2px;
height:150px;
border:3px solid white;
}
#menu{
border-radius:8px;
position: Reelative;
width: 930px;
height: 40px;
background:#8dcff4 ;
border: 5px solid white;
font-size: 2em;
}
#menu li{
padding:2px;
margin:0px 20px;
list-style:none;
float: left;
position: relative;
border-right: 3px solid white;
text-align: center;
}
#menu li a{
text-decoration: none;
}
#content{
width: 610px;
height:680px;
background: #407f98;
border: 5px solid white;
margin: 10px 2px 10px 2px;
float: left;
}
#seidebar{
width: 302px;
height: 680px;
background:#407f98 ;
border: 5px solid white;
margin: 10px 2px 10px 5px;
float: left;
}
#footer{
width: 930px;
height: 35px;
background: #8dcff4;
border: 5px solid white;
float: left;
}
</style>
</head>
<body>
<div id ="wrapper">
<div id ="header">
</div>
<div id ="menu">
<li><a href ="#">Home</a></li>
<li><a href ="#">Contact</a></li>
<li><a href ="#">Privasi</a></li>
<li><a href ="#">Pengetahuan</a></li>
<li><a href ="#">Profil</a></li>
</div>
<div id ="content">
</div>
<div id ="seidebar">
</div>
<div id ="footer">
<center>Copy Right All 2017 By Dunia Teknologi</center>
</div>
</div>
</body>
</html>
Jika sudah maka otomatis anda akan membuat layout web anda seperti di bawah ini .<html>
<head>
<title>Dunia Teknologi</title>
<style type ="text/css">
#wrapper{
border-radius:8px;
background:#11a9e5;
width:950px;
height: 996px;
margin-left:auto;
margin-right:auto;
padding-top:1px;
padding-left:6px;
}
#header{
border-radius:8px;
background:#407f98;
width:930px;
margin:10px 2px 10px 2px;
height:150px;
border:3px solid white;
}
#menu{
border-radius:8px;
position: Reelative;
width: 930px;
height: 40px;
background:#8dcff4 ;
border: 5px solid white;
font-size: 2em;
}
#menu li{
padding:2px;
margin:0px 20px;
list-style:none;
float: left;
position: relative;
border-right: 3px solid white;
text-align: center;
}
#menu li a{
text-decoration: none;
}
#content{
width: 610px;
height:680px;
background: #407f98;
border: 5px solid white;
margin: 10px 2px 10px 2px;
float: left;
}
#seidebar{
width: 302px;
height: 680px;
background:#407f98 ;
border: 5px solid white;
margin: 10px 2px 10px 5px;
float: left;
}
#footer{
width: 930px;
height: 35px;
background: #8dcff4;
border: 5px solid white;
float: left;
}
</style>
</head>
<body>
<div id ="wrapper">
<div id ="header">
</div>
<div id ="menu">
<li><a href ="#">Home</a></li>
<li><a href ="#">Contact</a></li>
<li><a href ="#">Privasi</a></li>
<li><a href ="#">Pengetahuan</a></li>
<li><a href ="#">Profil</a></li>
</div>
<div id ="content">
</div>
<div id ="seidebar">
</div>
<div id ="footer">
<center>Copy Right All 2017 By Dunia Teknologi</center>
</div>
</div>
</body>
</html>
 |
| Layout |
Itu saja yang indopedia bisa sampaikan jika ada kata-kata yang kurang jelas atau salah mohon maaf sekian dan terimakasih selamat mencoba kawan
No comments:
Write komentar