kiblatwebsite.blogspot.co.id: Belajar Membuat Website

Sudah sekian lama tidak posting, hari ini saya akan membagikan beberapa ilmu saya tentang pembuatan website. Kali ini kita akan belajar membuat website. kita akan mengulangi sekali lagi postingan postingan saya sebelumnya. bagi yang belum membaca postingan saya sebelumnya, silahkan pelajari di sini. Kali ini website yang akan kita buat akan lebih bagus dan siiiip dari pada sebelumnya,karena apa? karena berikut ini adalah
sintak dasar dalam pembuatan website. Boleh dikatakan postingan kali ini adalah rangkuman dari postingan postingan saya sebelumnya.

Pastinya sudah tidak sabar lagi,hehehe...langsung saja kita mulai.

1. Kita siapkan 5 file html,3 file gambar dan 1 file untuk css
2. Kita akan membuat file home.html, kode scriptnya sebagai berikut

<html>
<head>
<title>kiblatwebsite.blogspot.co.id</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="container">
<div id="header">
<img src="gambar.jpg">
</div>
<div id="nav">
<ul>
<li><a href="home.html">HOME</a></li>
<li><a href="profil.html">PROFIL</a></li>
</ul>
</div>
<div id="main">
Hai.. selamat datang di website pribadi saya
<br>ini merupakan halaman home saya</br>
</div>
<div id="aside">
<ul>
<li><a href="artikel1.html">Ini link untuk artikel ke 1</a></li>
<li><a href="artikel2.html">Ini link untuk artikel ke 2</a></li>
<li><a href="artikel3.html">Ini link untuk artikel ke 3</a></li>
</ul>
<p><img src="gambar_aside.jpg">

</div>
<div id="footer">Copyright © 2016 | kiblatwebsite.blogspot.co.id</div>
</div>
</body>
</html>

3. Kita buat file profil.html, berikut adalah kodenya

<html>

<head>

<title>kiblatwebsite.blogspot.co.id</title>

</head>

<body>

</div>

<ul>

<li><a href="profil.html">PROFIL</a></li>

</ul>

</div>

Ini isi profil saya

</div>

<ul>

<li><a href="artikel1.html">Ini link untuk artikel ke 1</a></li>

<li><a href="artikel2.html">Ini link untuk artikel ke 2</a></li>

<li><a href="artikel3.html">Ini link untuk artikel ke 3</a></li>

</ul>

</div>

</body>

</html>

4. Kita buat file artikel1.html, berikut adalah kodenya

<html>

<head>

<title>kiblatwebsite.blogspot.co.id</title>

</head>

<body>

</div>

<ul>

<li><a href="profil.html">PROFIL</a></li>

</ul>

</div>

isi artikel 1

</div>

<ul>

<li><a href="artikel1.html">Ini link untuk artikel ke 1</a></li>

<li><a href="artikel2.html">Ini link untuk artikel ke 2</a></li>

<li><a href="artikel3.html">Ini link untuk artikel ke 3</a></li>

</ul>

</div>

</body>

</html>

5. Berikutnya kita buat file artikel2.html, berikut adalah kodenya

<html>

<head>

<title>kiblatwebsite.blogspot.co.id</title>

</head>

<body>

</div>

<ul>

<li><a href="profil.html">PROFIL</a></li>

</ul>

</div>

isi artikel 2

</div>

<ul>

<li><a href="artikel1.html">Ini link untuk artikel ke 1</a></li>

<li><a href="artikel2.html">Ini link untuk artikel ke 2</a></li>

<li><a href="artikel3.html">Ini link untuk artikel ke 3</a></li>

</ul>

</div>

</body>

</html>

6. Berikutnya kita buat file artikel3.html, kodenya sebagai berikut

<html>

<head>

<title>kiblatwebsite.blogspot.co.id</title>

</head>

<body>

</div>

<ul>

<li><a href="profil.html">PROFIL</a></li>

</ul>

</div>

isi artikel 3

</div>

<ul>

<li><a href="artikel1.html">Ini link untuk artikel ke 1</a></li>

<li><a href="artikel2.html">Ini link untuk artikel ke 2</a></li>

<li><a href="artikel3.html">Ini link untuk artikel ke 3</a></li>

</ul>

</div>

</body>

</html>

7. Kita siapkan file dengan nama style.css, berikut list kodenya

#container{

margin:0 auto;

width:950px;

height:auto;

box-shadow:#cccccc 2px 2px 10px;

background:url(bg_main.jpg);

background-size:100% 100%;

}

#header{

width:auto;

}

#nav{

background:#428bca;

clear:both;

width: 100%;

height: 45px;

text-transform:uppercase;

}

#nav ul {

margin: 0px 10px 0px -40px;

list-style-type:none;

padding-top:5px;

}

#nav li a {

margin-top:-10px;

margin-right:1px;

display:inline;

float:left;

color: #ffffff;

padding:15px 30px;

font-weight:bold;

border-right:1px solid #e7e7e7;

}

#nav li a:hover {

color: #cccccc;

background:#e7e7e7;

}

#main{

clear:both;

padding:10px;

float:left;

width:600px;

}

#aside{

float:right;

width:300px;

height:450px;

background:#99ccff;

}

#aside ul {

margin: 0px 0px 0px -40px;

list-style-type:none;

}

#aside li a {

display:block;

color: #000000;

border-bottom:2px solid #333333;

padding:10px 20px;

}

#aside li a:hover {

background:#e7e7e7;

}

#footer{

color: #ffffff;

clear:both;

background:#428bca;

height:30px;

font-weight:bold;

text-align:center;

padding:10px;

}

img{

width:100%;

height:auto;

}

a{text-decoration:none;}

7. Kita siapkan 3 buah gambar (bisa di ubah sesuai keinginan anda), untuk na file gambar adalah, bg_main.jpg, gambar.jpg, gambar_aside.jpg

8. Simpan semua file diatas didalam sebuah folder, pastikan dalam folder seperti gambar berikut

untuk melihat hasil dari pembuatan website kita, buka file home.html, tampilan website yang telah kita buat kurang lebih seperti berikut

Gimana? bagus bukan..untuk melihat artikel yang lainnya silahkan klik disini

Author : Reds Script

Saya lahir di Lamongan,besar d Lamongan. Sempat mengenyam pendidikan S1 Sistem informasi di perguruan tinggi swasta d Surabaya.Alhamdulillah lulus. Ketertarikanku di dunia teknologi informasi khususnya di website di mulai dari tahun 2010,hingga sekarang masih berkutat di bidang Teknologi Informasi

Belajar Membuat Website

Author : Reds Script

Share this

2 comments

Informasi Yang Harus Kamu Ketahui

Belajar Membuat Website

Author : Reds Script

Share this

Related Posts

2 comments

Informasi Yang Harus Kamu Ketahui