senang bisa buat postingan lagi
pada kesempatan kali ini saya akan melanjutkan postingan saya tentang cara membaut web dengan script css. ok cikidot
silakan tuliskan coding d bawah ini ke dalam notepad anda
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="image">
</div>
<img src ="gambar.jpg" width="1600px" height="400px">
<div id="header">
<ul>
<li><a href="nav.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
<div id="nav">
<div id="garis"><ol><b>Biodata</b></ol></div>
<img src="gambar2.jpg" width="200px" height="150px">
<p>
Nama : Cici sofrawida<br/>
Negara : Indonesia<br/>
Alamat : Batu Merah,batu ampar<br/>
Hoby : Membaca<br/> </p>
<hr>
<p align="justify">
Saya adalah seorang mahasiswi Stt ibnu sina,Batam Indonesia.
Saya memiliki hobi Membaca terutam novel.
</p>
</div>
<div id="kanan">
<ul>
<li><a href="nav.html">Menu 5</a></li>
<li><a href="nav.html">Menu 6</a></li>
<li><a href="nav.html">Menu 7</a></li>
<li><a href="nav.html">Menu 8</a></li>
</ul>
</div>
<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="tengah"></div>
<div id="footer">
Copyright ©Ibnu Sina Batam.com
</div>
</body>
</html>
lalu save dalam format html
tuliskan coding kedua pada notepad anda
#image
{
background-image:url("header.gif");
padding-left:100px;
height:150px;
}
#header {
background-color:#ff00b4;
color:#0c00ff;
text-align:center;
padding:5px;
padding-left:150px;
}
#nav {
line-height:25px;
height:730px;
width:200px;
float:left;
padding-top:5px;
}
#kanan {
line-height:25px;
height:300px;
width:200px;
float:right;
padding-top:5px;
}
#section {
width:350px;
float:left;
padding:50px;
}
#footer {
background-color:#ff00b4;
color:white;
text-align:center;
padding:5px;
clear:both;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 200px;
font-weight: bold;
color: black;
background-color: #ff00b4;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #ff00b4;
}
#garis {
width: 200px;
float:left;
background-color:#ff00b4;
text-transform: uppercase;
}
lalu save dalam format css.. contoh nav.css
dan jangan lupa sisipkan foto anda dan foto yang ingin d jadikan background atas web dalam folder yang berisi file html dan css
lalu buka file html mengunakan si gambar api alias mozilla firefox
nah itu lah tampilan web sederhana kita kali ini salam minangmylife!
0 komentar:
Posting Komentar