Salam :D.Pada
postingan saya sebelumnya tentang Cara membuat tampilan dasar sederhana pada Web dengan bahasa HTML,sekarang saya
akan mengajarkan kembali tahap selanjutnya untuk mengedit tampilannya lagi.
Dari pada berbasa
basi,mending kita langsung ke Proses TKP aja :D
Caranya:
1.Buka aplikasi notepad atau
Notepad ++
2.Buat Folder bebas(silahkan
diberi nama dan simpan terserah anda)
3.kemudian ketik contoh script
sederhana berikut:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<div id="image">
</div>
<div id="header">
<ul>
<li><a
href="nav.html">Home</a></li>
<li><a
href="nav.html">News</a></li>
<li><a
href="nav.html">Contact</a></li>
<li><a
href="nav.html">About</a></li>
</ul>
</div>
<div id="nav">
<ul>
<li><a
href="nav.html">Menu 1</a></li>
<li><a
href="nav.html">Menu 2</a></li>
<li><a
href="nav.html">Menu 3</a></li>
<li><a
href="nav.html">Menu 4</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 milion inhabitants
</p>
<p>
standing on the river thames,london has been major settlement
for two millennia,
its history going back to its founding by the romans, who
named it londinium
</p>
</div>
<div id ="footer">
copyright torrent.com
</div>
</body>
</html>
4.Kemudian simpan
script diatas pada folder yang anda buat tadi.(*Ingat simpan dengan format
*HTML)
5.langkah
selanjutnya adalah langkah untuk mengedit letak kata,gambar,warna dll.Maka
ketik script berikut ini:
#image
{
background-image:url("header.jpg");
padding-left:100px;
height:150px;
}
#header {
background-color:#98bf21;
color:Red;
text-align:center;
padding:5px;
padding-left:150px;
}
#nav {
line-height:30px;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section{
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:#4c5f10;
color:Red;
clear:both;
text-align:center;
padding:5px;
}
ul{
list-style-type:
none;
margin: 0;
padding: 0;
overflow:
hidden;
}
li{
float: left;
}
a:link, a:visited{
display:
block;
width: 120px;
font-weight:
bold;
color:
#FFFFFF;
background-color:
#98bf21;
text-align:
center;
padding: 4px;
text-decoration:
none;
text-transform:
uppercase;
}
a:hover, a:active {
background-color:
#7A991A;
}
6.lalu simpan
script tersebut pada folder yang anda buat dan simpan dengan
format Cascade Style Sheet(*CSS)
7.Biasanya dalam satu folder
berisi:
8.Dan hasil proses dari langkah
atas menjadi:
0 komentar:
Posting Komentar