Hallo... kembali lagi bersama nicanisme, salam terhangat buat para pembaca blog nicanisme. langsung saja artikel kali ini akan sedikit mengulik tentang design web, tentu tidak menggunakan cara yang ribet. Mudah saja masih tetap bergelut dengan menggunakan HTML
Ingin tau caranya? silahkan simak langkah-langkahnya berikut ini:
1. Pengetikan script, seperti biasa kita masih setia menggunakan notepad atau pun notepad++. script pertama adalah berikut ini:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="monic.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 million inhabitans.
</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="footer">
Copyright©W3Schools.com
</div>
</body>
</html>
Setelah pengetikan script pertama selesai, simpan script tersebut dengan format HTML
pada satu folder. Langkah selanjutnya adalah menulis scip yang kedua untuk mengedit
gambar,warna tata letak dll. Contoh scripnya seperti dibawah ini:
#image {
background-image:url("London2.jpg");
padding-left:150px;
height:250px;
}
#header {
background-color:#98bf21;
color:white;
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: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: 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;}
Untuk script yang kedua ini silahkan dismpan dalam format CSS, jangan salah ya guys
ingat CSS. Simpan script tersebut dalam satu folder bersama scrip yang pertama tadi.
Sertakan juga gambar yang diinginkan dalam folder tersebut, pastikan bahwa nama
gambar telah masuk didalam scrip anda. Ini adalah tampilan penyimpanan file-file
tersebut:
Nah guys sekarang kita lihat hasil tampilannya seperti apa? Inilah hasil dari script kita tadi:
Dan selesai... gimana guys gak susah kan? gampang kok asal mau belajar pasti ada jalan hehehe...
oh yaa sebenernya akan lebih mudah jika sambil dipratekkan guys, selamat mencoba yaa semoga hasilnya lebih bagus ;)
0 komentar:
Posting Komentar