Ini adalah postingan lanjutan membuat website yang yang keren abizzz. Pada postingan kali ini, kita akan membuat tampilan website sebelumya lebih bagus. Yang belum lihat dan membaca postinganku sebelumnya, monggo lihat disini. Ok, Mari kita mulai praktek. Ikuti langkah langkah berikut ini :
1. Bukalah home.html di teks editor (notepad)
<html>
<head>
<title>kiblatwebsite.blogspot.co.id</title>
<style>
#container{
margin:0 auto; width:950px; height:600px;box-shadow:#cccccc 2px 2px 10px;
}
img{
width:950px;
}
a{
background:#428bca; padding: 10px 30px; text-align:center; text-decoration:none; color:#ffffff;
}
a:hover{
background:#e7e7e7; color:#000000;
}
p,h1{
padding:5px;
}
</style>
</head>
<body>
<div id="container">
<img src="gambar.jpg">
<p><a href="home.html">HOME</a> <a href="profil.html">PROFIL</a></p>
<h1>Ini adalah website sederhana saya</h1>
<p>Ini adalah halaman home saya, disini bisa anda isi dengan artikel sesuai dengan keinginan anda.</p>
</div>
</body>
</html>
<head>
<title>kiblatwebsite.blogspot.co.id</title>
<style>
#container{
margin:0 auto; width:950px; height:600px;box-shadow:#cccccc 2px 2px 10px;
}
img{
width:950px;
}
a{
background:#428bca; padding: 10px 30px; text-align:center; text-decoration:none; color:#ffffff;
}
a:hover{
background:#e7e7e7; color:#000000;
}
p,h1{
padding:5px;
}
</style>
</head>
<body>
<div id="container">
<img src="gambar.jpg">
<p><a href="home.html">HOME</a> <a href="profil.html">PROFIL</a></p>
<h1>Ini adalah website sederhana saya</h1>
<p>Ini adalah halaman home saya, disini bisa anda isi dengan artikel sesuai dengan keinginan anda.</p>
</div>
</body>
</html>
3. Simpan dengan nama home.html dan simpan di folder yang sudah anda buat tadi
4. Buka profil.html di teks editor anda (notepad, dreamwaver, notepad++, dll).
5. Ketikan kode script di bawah ini (warna merah)
<html>
<head>
<title>kiblat Website</title>
<style>
#container{
margin:0 auto; width:950px; height:600px;box-shadow:#cccccc 2px 2px 10px; }
img{
width:950px; }
a{
background:#428bca; padding: 10px 30px; text-align:center; text-decoration:none; color:#ffffff; }
a:hover{
background:#e7e7e7; color:#000000; }
p,h1{
padding:5px;}
</style>
</head>
<body>
<div id="container">
<img src="gambar.jpg">
<p><a href="home.html">HOME</a> <a href="profil.html">PROFIL</a></p>
<h1>Ini adalah website sederhana saya</h1>
<p>Ini adalah halaman profil saya</p>
<table>
<tr>
<td>Nama</td>
<td>:</td>
<td>Reds Script</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td>Lamongan</td>
</tr>
<tr>
<td>Hobi</td>
<td>:</td>
<td>Web Programming</td>
</tr>
</table>
</div>
</body>
</html>
<head>
<title>kiblat Website</title>
<style>
#container{
margin:0 auto; width:950px; height:600px;box-shadow:#cccccc 2px 2px 10px; }
img{
width:950px; }
a{
background:#428bca; padding: 10px 30px; text-align:center; text-decoration:none; color:#ffffff; }
a:hover{
background:#e7e7e7; color:#000000; }
p,h1{
padding:5px;}
</style>
</head>
<body>
<div id="container">
<img src="gambar.jpg">
<p><a href="home.html">HOME</a> <a href="profil.html">PROFIL</a></p>
<h1>Ini adalah website sederhana saya</h1>
<p>Ini adalah halaman profil saya</p>
<table>
<tr>
<td>Nama</td>
<td>:</td>
<td>Reds Script</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td>Lamongan</td>
</tr>
<tr>
<td>Hobi</td>
<td>:</td>
<td>Web Programming</td>
</tr>
</table>
</div>
</body>
</html>
6. Simpan dengan nama profil.html dan simpan di folder yang sudah anda buat tadi
<div id="container"> disini berfungsi untuk pembungkus isi web dengan id bernama container, sedangkan </div> berfungsi untuk penutup.
1 comments:
commentsterima kasih gan
Replypostingannya bagus sekali..bisa untuk belajar membuat web