Mencoba membuat web
Inilah salah satu kegiatan saya saat mengerjakan tugas html
<html>
<head>
<title>website</title>
<body background="fd.jpg">
<link type="text/css" href="style.css" rel="stylesheet">
</head>
<body>
<div align="center" class="position">
<div id="wrapper">
<div id="header">
<img src="tm.jpeg" height="150px" width="150px">
<h1>Warung S3j4ever ( Jagonyanya Permainan Indonesia)</h1>
</div>
<div id="navbar">
<ul class="float">
<li><a href="jadi1.html">MENU</a></li>
<li><a href="web.html">DISKRIPTION</a></li>
<li><a href="logiin.html"></a></li>
<li><a href="#"></a></li
</ul>
</div>
<div id="content">
<h1>Permainan S3J4ever</h1>
<img src="welcome.jpg" height="300px" width="600px">
<p>Sebuah toko Mainan yang terletak di kota Rembang didekat Pasar kota Rembang , Letaknya persis di depan Bank Pasar Rembang, Kini banyak mainan yang terdapat di warung kecil itu, ketika ada musim beberapa petasan /Kembang Apipun juga ada di deretan jualan toko maian itu. Pedagangya sangatah ramah, dan takmungkin kalian menyesal telah menggunjungi toko tersebut , karena pelayanannya dan harganya yang cukup terjangkau..</p>
</div>
<div id="sidebar">
<a href="daftar2.html">Mainan Robot Transformers</a><br>
<img src="robot7.jpg" height="180px" width="160px"><br><hr>
<a href="daftar7.html">Macam Barbie</a><br>
<img src="barbie1.jpeg" height="150px" width="150px"><hr>
<a href="daftar1.html">Macam mainan pakai baterai</a><br>
<img src="batrai1.jpeg" height="150px" width="150px"><hr>
<a href="daftar6.html">Mainan bermotor</a><br>
<img src="mobil5.jpeg" height="150px" width="180px"><br>
</div>
<div id="footer">
<a href="https://www.facebook.com/santi.imuet.39"><img src="fb.png" height="50px" width="50px"></a>
<a href="https://twitter.com/rosantiekapujiw"><img src="tw.jpeg" height="50px" width="50px"></a>
<p> Design & created by Rosanti Eka Pujiwati</p>
</div>
<link type="text/css" herf="style.css" rel ="stylesheet">
</div>
</div>
</body>
</html>
Save script di atas, dengan ekstemtion .html
Lalu
<link type="text/css" herf="style.css" rel ="stylesheet">
body{
text-align:left;
background:url(images/back.jpeg);
}
.position{
padding:20px;
position:absolute;
margin-right:auto;
margin-left:auto;
left:0px;
right:0px;
width:1000px;
}
#wrapper{
width:100%;
height:1200px;
margin: 0px auto;
}
#header{
width:100%;
height:175px;
background:url(images/111.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
text-align:left;
border-radius:20px;
}
#header img{
margin: 10px;
float:left;
}
#header h1{
padding:30px;
}
#navbar{
width:100%;
height:50px;
border:1px solid black;
background-color:black;
border-radius:20px;
}
.float li
{
float: left;
list-style: none;
margin-left:40px;
}
.float li a
{
color:#fff;
text-decoration: none;
font-variant: small-caps;
padding:12px;
-webkit-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
-ms-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
transition:all 1s ease-out;
}
.float a:hover
{
text-decoration: none;
background:#fff;
color: #000;
}
#content{
float:right;
width:70%;
height:800px;
background-color:lightblue;
border-top-right-radius: 20px;
}
#content p{
text-align:left;
font-family:times new roman;
font-size:25px;
padding:15px;
}
#sidebar{
float:left;
width:30%;
height:800px;
background-color:silver;
border-top-left-radius:20px;
}
#footer{
clear:both;
width:100%;
height:150px;
background:url(images/foot.jpg);
background-size:100% 100%;
background-repeat: no-repeat;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
#footer img{
float:left;
padding:3px;
}
#footer p{
float:left;
color:white;
}
Simpan juga script di atas dengan ekstention .css
Selamat mencoba
Terima kasih.
0 komentar:
Posting Komentar