Home / CSS / HTML / Tips n triks / tugas kuliah / Web / Membuat Website Statis Dengan CSS dan HTML

Membuat Website Statis Dengan CSS dan HTML

, , , ,
Hay sobat gimana kabarnya?
Wah nggak kerasa udah 3minggu nggak pernah bikin posting. Ada yang kangen gak nih?hahaha. Maklum sibuk kemaren - kemaren sibuk Ujian tengah semester, ma traveling ke puncak merbabu. Jadi ya hampir 3 hari tepar n gak sempat ngurus blog heheheehe.
Dah lama juga nih gak pernah posting tentang coding. Berhubung tadi ada adik kelas yang minta tolong dibuatin web statis pakai CSS ma HTML. yaudah sekalian aja diposting dan di share ke sobat bloger semua.
Ok langsung aja deh ke pokok bahasan kita. Kali ini kita akan membuat sebuah web statis sederhana berbasis CSS dan HTML. Ya hasil akhirnya hampir mirip dengan web profile perorangan (anggep aja mirip hahaha). Bagi yang belum ngerti apa itu web statis, silahkan cari sendiri ya di Google banyak hahaha (usaha sedikit ya bro, lagi males ngetik D:).

Yang perlu sobat siapin sebelum memulai projek kita kali ini adalah :
  1. Browser (recommended : Mozilla Firefox).
  2. Text Editor : saya pakai notepad ++
  3. Gorengan dan rokok untuk temen suntuk (yang nggak ngerokok bisa belli dulu ntar gue bantuin habisin deh ahahahaha Just Kidding sob)
Download Script yang sudah saya buat disini : DOWNLOAD

Ok,jika sudah sobat download script diatas, silahkan extrct file .Rar nya. Didalam file tersebut ada 2 folder (Css dan Images) serta 3 file dengan ekstensi .html (index.html , style.html, my-gallery.html). kurang lebihnya lihat gambar dibawah : 


Pertama kita buat dulu file .css nya. Buka text editor sobat dan ketik script dibawah ini jika sudah save dengan nama style.css. Berikut adalah script CSS nya:

 *{margin:0 auto; padding:0}
body{background:url(../images/b8.jpg);
    font-family:verdana; font-size:10px; color:#4c4e55;
    }
#container{width:74.5%; height:auto;
    background:url('bg.jpg') no-repeat; overflow:hidden;
    }
#header{height: 180px;
    border: 4px solid #DAA520;
background:#000 url(../images/up.jpg) ;
    }
#logo{width:180px; float:left}
.gmbr_logo{margin:10px 0px 0px 30px;}

#menu{width:750px; float:right;}

#menu ul{margin:70px; float:right; list-style:none;}

#menu li{float:left;}

#menu a{display:block; padding:7px 12px; text-decoration:none; font-weight:bold;
    font-family:arial; font-size:14px; color:#DAA520;
    }
#menu a:hover {background:#000000; text-decoration:underline;}

#sidebar_kiwo{float:left; width:350px; height:780px; margin:3px 0;
    padding:3px; border:2px solid #DAA520;background:#000000;font-family:arial; font-size:14px; color:#DAA520;
    }

#konten{float:left; width: 850px; height:780px; margin:3px; padding:3px;
    border:2px solid #DAA520;background:#000;font-family:arial; font-size:14px; color:#DAA520;
    }
#sidebar_tengen{float:left; width:350px; height:780px; margin:3px 0;
    padding:3px; border:2px solid #DAA520;background:#000000;font-family:arial; font-size:14px; color:#DAA520;
    }
#footer{height:80px; border:2px solid #DAA520;
    clear: both;
 padding : 30px 0 0 0px;
  color : #DAA520;
text-align:center;
  font-size:12px;font-weight:bold;
  background: url(../images/down.jpg) ;
    }
#runing-text{
    font-family:verdana;
    font-size:15px;
    color:#DAA520;
    }
#photo_search {
    width: 370px;
    height: 275px;
    border: 2px;
    border-color: #DAA520;
    background-color: #fff;
    margin-top: -1px;
    }
#photo {
float: 0;
width: 780px;
height:270px;
border: 5px;
border-color: #000000;
}

Jika sudah,Sekarang akan kita bahas dari awal proses pembuatannya, silahkan sobat buka text editor sobat lalu kita buat file dengan nama Index.html lalu save Jika sudah ketik script berikut :

<html>
<head>
<title>WMH SITE</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div id="container">
    <div id="header">
        <div id="logo">
          <p><a href="Images/logo.jpg"><img class="gmbr_logo" src="Images/logo.jpg" width="170" height="170"></a></p>
        </div>
        <div id="menu">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="my-gallery.html">My Gallery</a></li>
            </ul>
        </div>
        </div>
    <tr>
<td id="content" colspan="3">
<marquee direction="left">
          <p id="runing-text" ><strong>SELAMAT DATANG DI WEB SAYA</strong></p>           
          </marquee>              
</td>
</tr>
    <div id="sidebar_kiwo">
    <center><strong><p>Welcome to my site</p></strong></center>
    <br>
    <center><p><a href="#"><img src="Images/1.jpg"></a></p></center>
    <br>
    <p><strong>BIODATA</strong></p>
    <br>
    <p>Nama : Wahyu Miftahul Huda</p>
    <p>Prodi: Teknik Informatika</p>
    <p>Univ : Univeritas Ahmad Dahlan</p>
    <p>Job : Web Designer, Web Development, Mobile Developmen, and Security System</p>
    </div>
    <div id="konten">
    <p><center>SUGENG RAWUH DUMATENG WEB KULO</center></p>
   <p>Silahkan tambah sendiri isi kontennya sesuai dengan kehendak sobat</p>
    </div>
    <div id="sidebar_tengen">
    <center><Strong><p>TEMOKKE KULO NENG :</p></strong></center>
    <br>
    <center><div class="table">
        <table>
        <tbody>
        <tr>
        <td><div class="subicons">
        <a class="Fadeout" href="https://www.facebook.com/wahyu.miftahulhuda" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizdJHNSpKmhyphenhyphen0x0Nt2bzUlS6v1I_33eYg9G5EVNSlo-_wZ2sjnsdxdBQoY4FhpgsTu0POvLavdGkRnsZeYAxRutUoHJ1G_LH7DHJyos9lPAyAU1pvXJUcQS4Vo5xH9w94-gITXMA9TQp8k/s1600/facebook-48.png" /></a></div>
        </td><td><div class="subicons">
        <a class="Fadeout" href="#" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxmZM9zh5LRiG2feRDcsK9Hz2OV1K14onuyWkmCwUk2lfak4SFcq5g_8IAUnRAzUhynJxKayPp8z4cXeq11WD_5-bETrzOg-4hTvYW_yxAnCcTeDM-u4speN1dqD_l_9RPt1iBbc9syylV/s1600/twitter-48.png" /></a></div>
        </td>
        <td><div class="subicons">
        <a class="Fadeout" href="#" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic-4LMC70E_Rq9o0ziN9kZw79-IBH5AE_NIh2ERzd3y0nVaI5t10wPPVOFHqQj58MAuECldJKR2LEZYXeThwZbwavQUT_xVlabHbnnWNxNwpXifz0lVCHtdZLB8wl5SGjHtZlUs1mIbFOh/s1600/rss-48.png" /></a></div>
        </td>
        <td><a class="Fadeout" href="#" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiklIe4U6xwFOoA7CT_vfWqZse2kwjTrbFHpHph0ntd_u86F-GV7BOmX55NOI9kILAJ86eEK47ubkCVV961_2qzy12i3M6VpC5DIdVyQDxUB5SREdyDWGO4rCwaxYoLXzZq6RV5ilmSaq9q/s1600/google-48.png" /></a></td>
        </tr>
        </tbody></table>
        </div>
        <br />
<div class="ss-item ss-navigate">
<div class="ss-form-entry">
</div></div></center>
    </div>
    <div id="footer">
<center><p>Author &copy;2014. <a href='http://wahyumiftahulhuda.blogspot.com'>WAHYU MIFTAHUL HUDA</p></center>
    </div>
</div>
</table>
</body>
</html>

KETERANGAN : 
Warna MERAH : adalah komponen syntax yang bisa sobat ubah sesuai selera sobat.
Warna  BIRU : adalah komponen Konten/isi web yang nanti tinggal sobat edit untuk membuat halaman baru (About, my-gallery)di web dengan cara copy file index.html lalu buka text editor baru dan paste kemudian simpan dengan nama baru, lakukan langkah tersebut untuk tiap membuat halaman baru yang sobat inginkan. dan edit bagian konten/isi sesuai selera sobat..

Langkah selanjutnya adalah membuat file About.html. Caranya sama seperti langkah diata. Buka halaman text editor baru lalu copy script pada file index.html kemudian paste ke text edtor. Jika sudah edit kontentnya sesuai selera. Lalu save.

Langkah selanjutnya adalah membuat halaman my-gallery.html. caranya sama seperti diatas, jika sudah simpan dengan nama file my-gallery.html.

jika sobat ingin menambahkan menu baru lagi, sobat tinggal cari file index.html lalu cari script berikut:



Jika sudah, silahkan sobat jalankan filenya dengan cara "Double click" menu index.html maka hasilnya seperti gambar dibawah ini :

Tampilan HOME
 Tampilan menu ABOUT
 Tampilan menu MY-GALLERY
Ok,jika sobat minat bisa langsung Download Source Code nya : DOWNLOAD
Mungkin tampilan masih kurang makimal,silahkan sobat eksplorasi sendiri ya :D
Sekian posting dari saya,apabila ada yang ingin ditanyakan silahkn Comment di bawah. Selamat Coding dan semoga postingan kali ini bermanfaat :)

Membuat Website Statis Dengan CSS dan HTML Membuat Website Statis Dengan CSS dan HTML Reviewed by Wahyumiftahulhuda on April 30, 2014 Rating: 5

You May Also Like

2 komentar:

  1. Unknown14 Desember 2015 pukul 20.05

    Izin share ya ban :D

    BalasHapus
  2. Unknown6 April 2017 pukul 04.14

    sekedar saran gan, buat logo-logo sosmed bagian bawah. untuk tampilan hovernya tulisannya susah dibaca. trimakasih.

    BalasHapus

Langganan: Posting Komentar ( Atom )
Diberdayakan oleh Blogger.