Proses Bisnis Industri Dengan Menggunakan Flowchart

SIKLUS PEMBELIAN KREDIT (PENGELUARAN)

1.       Pembelian dalam perusahaan

Secara umu pembelian didalam perusahaan meliputi :

·         Pembelian barang dagangan

·         Pembelian bahan baku dan bahan pembantu

·         Pembelian suplies (bahan habis pakai)

·         Pembelian peralatan

·         Pembelia aktiva tetap

2.       Dokumen dan catatan dalam pembelian kredit

Dokumen yang di gunakan dalam transaksi pembelian kredit adalan sebagai berikut :

·         Surat permintaan pembelian

·         Surat order pembelian

·         Nota retur

·         Faktur pembelian

·         Bukti kas keluar

3.       Aktivitas pembelian

Aktivitas pembelian dapat disebut dengan prokuremen. Prokuremen merupakan suatu proses bisnis yang diawali dengan pemilihan sumber daya, aktivitas pembuatan order, dan perolehan barang atau jasa dari pemasok yang dilakukan oleh perusahaan.

Aktivitas prokuremen secara umum dapat dibagi sebagai berikut :

·         Menentukan produk atau jasa (permintaan pembelian)

·         Memilih sumber daya

·         Memilih pemasok

·         Menerbitlan pesanan pembelian

·         Penerimaan barang

·         Verifikasi faktur

·         Pembayaran dengan pemasok

Job Description di dalam proses pembelian yaitu:

a.       Supplier

·         Mempromosikan barang ke perusahaan

·         Melakukan penawaran harga

·         Membuat nota pembayaran

·         Mengirim barang yang dipesan dan membuat surat jalan

b.      Bagian pembelian

·         Melakukan pembelian barang secara kredit

·         Melakukan penawaran harga ke supplier

·         Melakukan pembayaran

·         Membuat jurnal pembelian

c.       Gudang

·         Membuat data persediaan barang

·         Membuat daftar data barang yang dibutuhkan

·         Meminta dan memeriksa barang

d.      Pimpinan

·         Menerima laporan dari setiap bagian

·         Mengawasi kinerja karyawannya

4.       Siklus Pembelian

Didalam siklus dijelaskan bagaimana perusahaan melakukan pembelian yang akan digunakan baik untuk proses produksi bahan baku,kebutuhan, dll. Berikut ini contoh flowchart pembelian kredit :

Algoritma dari siklus pembelian kredit :

1. Bagian supplier mengirimkan SPH (Surat Penawaran Harga) ke bagian pembelian.
2. Bagian pembelian menerima SPH dari pemasok lalu membuat daftar barang yang akan di cek ke gudang dan deberikan kepada pimpinan untuk disetujui.
3. Bagian gudang menerima daftar barang lalu memastikan ketersediaan barang dan mengirimkan daftar barang yang dibutuhkan untuk disetujui oleh pimpinan
4. Setelah pemimpin menerima daftar barang yang akan disetujui jika pimpinan menyetujui maka pimpinan mengacc SPP (Surat Permintaan Pembelian)
5. Setelah itu SPP diberikan kepada bagian pembelia, setelah menerima SPP yang telah di acc akan membuat SOP yang akan dikirimkan kepada supplier dan bagian gudang serta bagian keuangan.
6. Supplier menerima SOP dari bagian pembelian. Setelah itu supplier membuat faktur,lalu menrimkannya beserta barang yang dibeli kepada bagian pembelian.
7.  Bagian pembelian menerima daftar barang dan faktur dari supplier setelah itu mengirimkan barang dan faktur ke bagian gudang
8. Bagian gudang menerima barang dari bagian pembelian. Bagian gudang membuat laporan penerimaan barangberdasarkan barang dan SOP. Laporan penerimaan barang disimpan sebagai arsip dan dikirim kebagian keuangan dengan faktur.
9. Bagian keuangan membuat laporan pembelian kredit berdasarkan SOP faktur dan laporan penerimaan barang. Laporan pembelian kredit akan disimpan sebagai arsip dan laporan keuangan akan dikirim ke pemimpin.

Adapun Pseudecode dari siklus pembelian kredit pada salah satu transaksi, yaitu pada tranksaksi SUPPLIER :

1. Terminator (Mulai)
2. Dokument (Form pemesanan barang)
3.  Manual Operation ( Melakukan pengecekan barang dan membuat surat utang)
4.  Dokument (Surat utang)
5. Dokument (Surat utang)
6.  Manual operation (membuat laporan pembelian)
7. Dokument (Laporan pembelian)
8.  Dokument (Laporan pembelian)
9. Dokument (Laporan Keuangan )
10.  Terminator (Selesai)

Setelah membaca kata PHP apa yang terlintas dipikiran Anda? Tentunya buka "Pemberi Harapan Palsu" atau "Pemberi Harapan Pasti" yaa hehehe
PHP disini yang kita maksud adalah Personal Home Page (Situs Personal), PHP merupakan bahasa script yang dapat ditanamkan atau disisipkan kedalam HTLM. PHP banyak dipakai untuk memrogram sits web dinamis, PHP juga dapat digunakan membangun sebuah CMS.

Mengenal Folder htdoc

Agar dapat mengakses halaman PHP dari web browser, maka anda harus menempatkan file PHP di dalam folder khusus yang merupakan folder home dari web server.

Pada aplikasi XAMPP, folder tersebut adalah folder htdocs yang berada di dalam folder instalasi XAMPP. Jika anda mengubah tempat instalasi XAMPP menjadi D:\xampp (jika mengikuti tutorial sebelumnya), maka folder tersebut seharusnya berada di D:\xampp\htdocs.

Anda bisa meletakkan file PHP langsung di dalam folder ini, atau agar memudahkan pencarian file, buatlah sebuah folder baru di dalam folder htdocs ini. Untuk tutorial belajar PHP di dalamduniailkom ini, saya akan membuat folder “Monica”. Folder belajar inilah yang akan kita jadikan sebagai tempat file PHP nantinya.

Cara Menulis File PHP

File PHP pada dasarnya merupakan file text biasa yang bisa dibuat menggunakan aplikasi notepad bawaan windows, namun untuk fitur yang lebih, anda dapat menggunakan aplikasi editor text sepertiNotepad++, yang dapat di download di http://notepad-plus-plus.org/download/.

 Kembali ke folder Monica yang berada di D:\xampp\htdocs\belajar, kita akan membuat sebuah file baru. Untuk pembuatan file ini anda dapat menggunakan notepad bawaan Windows maupunNotepad++.

Sebagai isian dari file tersebut, silahkan ketikkan kode berikut:

<htm<html>

<head>

<title>Praktikum AlPro</title>

</head>

<body>

<?php

echo "<h1>PRAKTIKUM ALGOROTMA dan PEMROGRAMAN 2</h1>

<p>Nama : Monica Rachma Marantika</p>

<p>Npm : 1410128262057 </p>

<p>Kelas : IIB</p> ";

     

      $no02="1";

      $nama02="Nur Fharid";

      $npm02="1410128252054";

      $prodi02="Teknik Informatika";

      $email02="nurfharid19@yahoo.com";

     

      $no03="2";

      $nama03="Abdul Jalal";

      $npm03="1410128252055";

      $prodi03="Teknik Informatika";

      $email023="j.abdul18@gmail.com";

      $no03="3";

      $nama03="Khaidar Salman";

      $npm03="1410128252056";

      $prodi03="Teknik Informatika";

      $email03="KhaidarS@gmail.com";

?>

<table border=1>

           

<th>NO</th>

<th>NAMA</th>

<th>NPM</th>

<th>PRODI</th>

<th>E-MAIL</th>

          <tr>

<td>1</td>

<td>Nur Fharid</td>

<td>1410128262054</td>

<td>Teknik Informatika</td>

<td>Nurfharid19@yahoo.com

               </tr>

<td>2</td>

<td>Abdul Jalal</td>

<td>1410128252055</td>

<td>Teknik Informatika</td>

<td>j.abdul18@gmail.com</td>

               </tr>

<td>3</td>

<td>Khaidar Salman</td>

<td>1410128262055</td>

<td>Teknik Informatika</td>

<td>KhaidarS@yahoo.com</td>

               </tr>

<body bg background="flower.jpg">

</body>

</html>

Lalu savelah sebagai coba.php. Sehingga file tersebut akan berada pada alamat D:\xampp\htdocs\belajar\coba.php. Sampai tahap ini, sebenarnya kita telah membuat sebuah file PHP sederhana. Untuk menjalankannya, kita harus menggunakan web browser.

Cara Menjalankan File PHP

Selanjutnya buka browser, dan ketikkan alamat berikut: localhost/belajar/coba.php pada address bar dan tekan Enter.

Jika anda mengikutinya langkah-langkah diatas dengan benar, maka di dalam web browser akan tampil seperti tampilan di berikut:

Selamat! Anda telah berhasil menjalankan file PHP pertama anda, walaupun file PHP tersebut tidak mengerjakan apa-apa selain menampilkan beberapa baris text.

Sebelum mengakhiri tutorial ini, ada beberapa hal yang perlu diperhatikan terkait cara menjalankan file PHP:

File php yang akan dijalankan harus berada di dalam folder D:\xampp\htdocs, baik itu di dalam folder tersebut, atau folder-folder dibawahnya. Untuk menjalankan di dalam browser, anda tinggal mengganti alamat D:\xampp\htdocs menjadi localhost. Namun Jika file php tersebut berada di luar folder htdoc, maka web server tidak bisa mengaksesnya.

Setiap file PHP harus ditulis menggunakan akhiran .php (walaupun hal ini bisa dirubah pada settingan modul php).

Penamaan file PHP, harus tanpa spasi dan sebaiknya menggunakan huruf kecil. Anda dapat menggunakan underscore (_) sebagai pengganti spasi.

Nah cukup sekian dulu ya guys pembahasan PHP dengan XAMPP, sampai jumpa dipostingan berikutnya.. Salam Terhangat dan See You again....

Madu merupakan cairan ajaib yang sangat bermanfaat bagi kesehatan tubuh, karena madu dapat digunakan untuk mengobati berbagai penyakit sepert menyembuhkan sariawan, meningkatkan kekebalan tubuh, menghilangkan jerawat dan sebagainya. Selain bermanfaat bagi kesehatan tubuh, ternyata madu juga dapat bermanfaat bagi kecantikan kulit wajah dan tubuh. Selain mudah didapat, cara yang digunakan juga cukup mudah dan cukup menghemat waktu dan energi.

Cantik itu membutuhkan perawatan dan biaya, tetapi sahabat tidak usah merasa khawatir, karena sahabat dapat tampil cantik hanya dengan menggunakan madu sebagai perawatan kecantikan kulit. Mau tau lebih lengkap mengenai manfaat madu untuk kecantikan kulit wajah ? Silahkan ikuti terus artikel berikut ini yang akan memberikan informasi mengenai manfaat madu untuk kecantikan :

- Melembabkan Kulit
Madu dapat bermanfaat untuk melembabkan kulit wajah yang kering, sehingga menjadi kenyal, bersih dan segar. Caranya dengan mengoleskan madu ke seluruh bagian wajah, kemudian tepuk-tepuk dengan kedua tangan hingga mengering. Setelah itu basuhlah dengan menggunakan air hangat.

- Mencegah Penuaan Dini
Selain dapat bermanfaat untuk melembabkan kulit, teryata madu juga dapat bermanfaat untuk mencegah penuaan dini pada kulit wajah dan dapat membuat kulit menjadi segar dan halus. Cara yang digunakan juga sangat mudah, hanya dengan mengambil 4 sendok madu, 1 sendok bubuk kayu manis, dan 3 cangkir air. Setelah itu rebus semua bahan tersebut seperti membuat teh. Minumlah 3 x sehari secara rutin.

- Membersihkan Wajah
Madu dapat digunakan untuk membersihkan make up dan kotoran pada kulit wajah, dan madu merupakan bahan alami yang aman bagi kulit wajah sebagai pembersih wajah. Dengan cara mencampurkan 1 sendok madu dengan sedikit susu bubuk pada telapak tangan. Setelah itu oleskan pada wajah seperti membersihkan make up dan kotoran pada wajah. Kemudian bilas dengan air hangat hingga benar-benar bersih.

- Toner Kulit
Madu dapat bermanfaat sebagai toner kulit dan dapat membuat kulit menjadi kencang, lembut, dan lembab. Caranya dengan mencampurkan 1 buah kulit jeruk dengan 1 sendok madu, kemudian blender hingga halus, setelah itu gosokkan ke bagian wajah dan diamkan selama 15 menit. Bersihkan dan basuhlah madu yang telah mengering tadi dengan air hangat secara perlahan-lahan.

- Masker Wajah
 Masker wajah alami dan aman bagi kulit adalah dengan menggunakan madu, karena madu dapat bermanfaat untuk mengencangkan kulit wajah dan menghilangkan flek hitam atau noda hitam pada wajah. Caranya dengan oleskan madu murni pada seluruh daerah wajah, kemudian diamkan selama 13 menit dan biarkan hingga madu benar-benar mengering. Setelah itu basuhlah wajah dengan menggunakan air hangat hingga mengering.

Itulah berbagai manfaat madu untuk kecantikan kulit wajah, semoga artikel kali ini dapat menambah pengetahuan sahabat mengenai manfaat madu. Sekian artikel kali ini dan terima kasih. ^^

Diet mayo diet aman bagi wanita – wanita terkesan lebih mengutamakan bentuk tubuh dan berat badan mereka daripada laki – laki. Kalau laki – laki biasanya akan cuek untuk masalah berat badan ini. Hal ini cukup logis, karena dalam pergaulannya wanita biasanya ingin dilihat lebih seksi dan lebih menarik. Apalagi jika pekerjaanya menuntut dia harus mempunayi bentuk tubuh layaknya gitar spanyol dan berat badan yang tidak terlalu over.

Biasanya mereka akan melakukan diet yang sangat ketat untuk mendapatkan semua keinginannya tersebut. Sebenarnya, tanpa ia sadarai bahwa dengan diet yang sangat ketat tersebut malah bisa mengancam kesehatan mereka. Sebut saja salah satu wanita di Rusia yang entah siapa namanya saya sudah lupa yang saya juga dapatkan infonya melalui salah satu satsiun tv swasta Indonesa. Jadi seperti ini, Dia sangat terobsesi sekali untuk mendapatkan bentuk tubuh yang seksi dan berat badan yang rendah, karena ia ingin sekali menjadi model. Namun apa daya, cara diet salah yang ia lakukan malah membuat dia menjadi kurus sekali sampai – sampai setaip bentuk tulangnya terlihat. Kalau orang jawa menyebutnya adalah lunglit, atau balung kulit yang dalam bahasa indonesianya berarti tulang kulit.

Salah satu program diet yang sekarang banyak digandrungi orang dan sudah terbukti cukup aman adalah diet mayo. Ya, diet mayo merupakan cara aman diet bagi wanita yang terobsesi untuk menurunkan berat badannya hanya dalam waktu 13 hari. Pantangan dari diet inipun cukup mudah namun sepertinya cukup berat juga bagi mereka yang suka dengan camilan asin, pantangannya adalah anda hanya perlu mengurangi bahkan menghindari makanan yang mengandung garam.

Pada prosesnya, kadar garam yang terdapat didalam tubuh anda akan dikeluarkan melalui feses, keringat dan urin anda. Sedangkan tubuh tidak akan lagi mengalami penambahan jumlah garam dalam tubuh saat anda melakukan diet mayo ini. Ini sangat efektif untuk menurunkan berat badan, karena anda sudah mengurangi garam dalam tubuh. Perlu anda ketahui juga, bahwa garam yang terdapat didalam makanan dapat menambah volume air,sedangkan air sendiri merupakan salah satu penyebab kegemukkan.

Ruth Frechman dari American Dietetic Association bahkan sempat memuji program diet yang satu ini. Ia memuji bahwa metode penurunan berat badan yang paling sederhana, murah dan efektif guna menurunkan berat badan tubuh adalah diet mayo. Melalui diet mayo ini, semua orang bekesempatan untuk menurunkan berat badan mereka dengan cara yang sehat dan aman. Selain itu, dalam diet mayo ini juga tidak ada indikasi yang menunjukkan terhadap resiko atau efek sampng yang buruk terhadap kesehatan tubuh anda.

Dengan semua data – data diatas, maka secara garis besar diet ini sangat cocok untuk anda para wanita yang menginginkan mempunyai bentuk tubuh yang ramping dengan berat badan yang tidak over. Sudah banyak pengalaman dari wanita – wanita yang mencoba diet ini dan berhasil. Mereka juga tidak mempunyai masalah kesehatan yang serius seusai melakukan diet mayo ini. 

Nah, itulah sedikit informasi mengenai diet mayo diet sehat yang aman bagi wanita yang ingin menurunkan berat badannya dalam waktu 13 hari untuk penurunan sebanyak 5-8 kg. setiap masalah pasti ada solusinya, begitu juga dengan berat badan anda yyang berlebih pasti ada solusi untuk menurunkannya. Bagaimana,tertarik untuk mencoba diet mayo? Semua pilihan ada ditangan anda. Kiranya cukup sekian info yang dapat saya sampaikan, semoga info ini bermanfaat yaa Ladies :)

Apakah sih Xampp itu? Bagi kamu kamu yang belum tau atau kamu yang sudah tau mari kita mencari tau lebih dalam lagi mengenai Xampp ini, agar kamu kamu mengetahuinya. Langsng saja yuks rapatkan barisan untuk menyimak perkenalan kita kepada Xampp :D

1.Pengertian XAMPP 

XAMPP adalah program aplikasi pengembang yang berguna untuk pengembangan website berbasis PHP dan MySQL. Sampe saat tutorial ini dibuat, versi terbaru XAMP adalah XAMPP 1.8.3.0.

Software XAMPP dibuat dan dikembangkan oleh Apache Friends.
Perangkat lunak komputer ini memiliki kelebihan untuk bisa berperan sebagai server web Apache untuk simulasi pengembangan website. Tool pengembangan web ini mendukung teknologi web populer seperti PHP, MySQL, dan Perl. Melalui program ini, programmer web dapat menguji aplikasi web yang dikembangkan dan mempresentasikannya ke pihak lain secara langsung dari komputer, tanpa perlu terkoneksi ke internet. XAMPP juga dilengkapi fitur manajemen database PHPMyAdmin seperti pada server hosting sungguhan, sehingga pengembang web dapat mengembangkan aplikasi web berbasis database secara mudah.
Program XAMPP banyak diaplikasikan dan digunakan oleh kalangan pengguna komputer di bidang pemrograman web. XAMPP merupakan software gratis. XAMPP dapat dijalankan di sistem operasi Windows 2000/XP/Vista/7 dan sistem operasi lain.

2.Fungsi XAMPP

Fungsi XAMPP adalah sebagai server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP dan Perl. Program ini tersedia dalam GNU General Public License dan bebas, merupakan web server yang mudah digunakan yang dapat melayani tampilan halaman web yang dinamis. 

3.Cara Instalasi XAMPP

Berikut cara instalasi XAMPP:
1. Download software XAMPP 1.8.3.0 terlebih dahulu http://xampp.soft32.com/free-download/?rel=center

2. Klik 2 kali file instaler

3. Klik Next

4. Pilih Komponen yang akan diinstal atau biarkan default lali klik next

5. Tentukan lokasi instalasi lalu klik next

6. Hilangkan tanda centang pada "learn more about bitnami for XAMPP" atau biarkan tanda centang untuk info lebih lanjut tentang bitnami for XAMPP lalu klik next

7. Proses instalasi

8. Setelah selesai klik finish

9. Berikutnya akan terbuka control panel XAMPP,klik tombol start pada bagian apache dan mysql

10. Buka browser lalu ketik pada addres bar "localhost", dan XAMMP siap digunakan 

Nah guys sudah cukup kan berkenalannya dengan Xampp? Sudah cukup tau juga tentang Xampp itu apa. Monic Chwan membatasi perkenalan sampai disini dulu ya guys jika ingin lebih tau lagi dan lagi tidak ada salahnya dan ada baiknya untuk mencari tau pada referensi lainnya :) Sekian dan Terima Kasih Selamat TAU ya guys :D

Design web lanjutan? mungkin pada bingung apa yang akan dilanjutkan :D Baiklah langsung saja desing web lanjutan ini merupakan lanjutan dari artikel Mendesign web sederhana dengan menggunakan HTML. Selanjutnya pada artikel design yang yang sudah ada kita akan menambahkan sedikit atribut mungkin bisa jadi agar terlihat lebih menarik dn ramai. Seperti biasa silahkan simak tutorialnya!
Untuk pengetikkan script kali ini belum ada yang berupah tetap menggunakan notepad atau notepad++
scriptnya seperti dibawah ini:

<!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="depan.html">Depan</a></li>
<li><a href="depan">Bio</a></li>
<li><a href="depan">Testimoni</a></li>
<li><a href="depan">Info</a></li>
</ul>
</div>

<div id="nav">
<img src="momon.JPG" width="215" height="220"><br>
<p align="left">
<strong>Nama :</strong> Monica Rachma Marantika<br/>
<strong>Pekerjaan :</strong> Freelance<br/>
<strong>Negara :</strong> Indonesia<br/>
<strong>Alamat :</strong> Melcem City<br/>
<strong>Hoby :</strong> Tidur<br/> </p>
<hr>
<p align="left">
<strong>"Banyak Jalan Menuju Cina, Tapi kalau gak punya biaya ya g bisa</strong>
</p>
</div>

<div id="kanan">
<ul>
<li><a href="depan.html">Depan</a></li>
<li><a href="depan">Bio</a></li>
<li><a href="depan">Testimoni</a></li>
<li><a href="depan">Info</a></li>
</ul>
</div>



<div id="section">
<h1><strong>HALAMAN UTAMA</strong></h1>
<p>
Selamat Datang Dihalaman Utama.    

</p>
<img src="mini.jpg" width="800" height="520"><br>
</div>
<div id="footer">
 <table width="648" cellpadding="5" align="center"><br>
    <div align="center"><font FONT FACE="georgia" color="White"><B>

MOMON@2015


    </b></FONT></div>
</div>
</body>
</html>

Script telah selsai, eiitss tetapi sesungguhnya masih ada
untuk script beriktnya lagi. Untuk script diatas silahkan di simpan dalam
format HTML dalam satu folder. Kemudian mulailah menulis lagi untuk script
kedua, script kedua ini akan berbentuk CSS yang berguna untuk melengkapi warna
design, gambar design, jenis font, size font, size picture dll.

Contok scriptnya berbentuk seperti ini:

#image 
{
    background-image:url("jos.jpg");
 padding-left:100px;
 height:200px;
 
 
}
#header {
    background-color:yellow;
    color:blue;
    text-align:center;
    padding:5px;
 padding-left:150px;
}
#nav {

margin:0 auto 10px;
   
    line-height:30px;
    height:730px;
    width:210px;
 background-color:pink;
    float:left;
 padding-top:5px;
}

#kanan {
    line-height:30px;
    height:300px;
    width:200px;
    float:right;
 padding-top:5px;
}


#section {
    width:820px;
 height:635px;
 background-color:white;
    float:left;
    padding:50px; 
 
}
#footer {
    background-color:#000000;
    color:blue;
    text-align:center;
    padding:5px;
 clear:both;
 
 margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float:left;
}

a:link, a:visited {
    display: block;
    width: 200px;
    font-weight: georgian;
    color: white;
    background-color: blue;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

a:hover, a:active {
    background-color: green;
}

#garis {
width: 200px;
float:left;
background-color:blue;
text-transform: uppercase;
}



Karna scrpt ini dibutuhkan dalam brntuk Css maka simpan
file ini dengan format Css dalan satu folder bersama dengan scrip pertama tadi.
Jangan lupa melampirkan juga gambar yang hendak dimasukan dalam desig web,
simpan gambar dalam folder bersama scriptnya. Pastikan nama gambar telah sesui
dengan nama gambar pada script, karna jika nama tidak sesuai maka gambar tidak
akan muncul pada design webnya. contok peletakkan dalam folder misalnya seperti
ini:

Langkah terakhir adalah buka lah file scriptnya yang
berbentuk HTML maka tampilan yang ditampilkan oleh browser adalah seperti ini:

Mudah kan guys? tinggal ikuti langkah-langkahnya aja kok
:D jika ingin menambah gambar atau atriby lainnya bisa aja untuk lebih
memperindah tampilan web kamu..

Baiklah sekian dulu yaa guys semoga bermanfaat, sampai
dan terima kasih....

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&copy;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 ;)

Membuat layout atau tampilan web yang kita butuhkan adalah membuat kelas-kelas atau bagian-bagian .dengan menggunakan tag <div> seperti yang sudah kita pelajari pada tutorial sebelum nya. Dan menggunakan syntax css sederhana.Seperti pada umum nya web mempunyai head, body, footer dan sidebar.

Perlu di ingat di asumsikan untuk membuat tampilan web atau layout web kita harus terlebih dahulu memahami tentang kelas html seperti pada tutorial sebelum nya agar memudahkan dalam membuat layout.

Berikut adalah langkah-langkah dalam membuat tampilan web dengan menggunakan HTML

Silahkan buka notepad atau notepad++ pada pc/laptop dan mulailah mengetik script seperti dibwah ini:

<!DOCTYPE html>
<html>
<head>
<style>
#header {
    background-color:pink;
    color:purple;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#pink;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:pink;
    color:purple;
    clear:both;
    text-align:center;
    padding:5px; 
}
</style> 
</head>

<body>
<div id="header">
<h1>Gallery Tari</h1>
</div>

<div id="nav">
<li><a href="http://id.wikipedia.org/wiki/Jaipongan"style="text decoration:"none" target="blank">Jaipong</a></li>
<li><a href="https://docs.google.com/document/d/1u_E52B1q5IlrE9YyzPoeqX01vQRWPx9_l55-ENn2OaE/edit"target="blank">Saman</a></li>
<li><a href="http://kebudayaan1.blogspot.com/2013/06/asal-usul-sejrah-tari-pendet-dari-bali.html/"target="blank">Pendet</a></li>
</div>

<div id="section">
<h1>Tari Zaman</h1>
Tari Saman adalah salah satu tarian daerah Aceh yang paling terkenal saat ini. Tarian ini berasal dari dataran tinggi Gayo. Pada masa lalu, Tari Saman biasanya ditampilkan untuk merayakan peristiwa – peristiwa penting dalam adat dan masyarakat Aceh. Selain itu biasanya tarian ini juga ditampilkan untuk merayakan kelahiran Nabi Muhammad. Pada kenyataannya nama “Saman” diperoleh dari salah satu ulama besar Aceh, Syech Saman.Tari Saman biasanya ditampilkan menggunakan iringan alat musik, berupa gendang dan menggunakan suara dari para penari dan tepuk tangan mereka yang biasanya dikombinasikan dengan memukul dada dan pangkal paha mereka sebagai sinkronisasi dan menghempaskan badan ke berbagai arah.
</p>
<p>
Tarian ini dipandu oleh seorang pemimpin yang lazimnya disebut Syech. Karena keseragaman formasi dan ketepatan waktu adalah suatu keharusan dalam menampilkan tarian ini, maka para penari dituntut untuk memiliki konsentrasi yang tinggi dan latihan yang serius agar dapat tampil dengan sempurna.
</p>
</div>

<div id="footer">
Copyright © W3Schools.com
</div>
</body>
</html>

setelah script selesai, silahkan simpan dengan menggunakan format HTML pada satu folder seperti :

Setelah script tersimpan dalam bentuk HTML seperti pada gambar kemudian bukalah file tersebut. Maka akan tampil hasilnya seperti ini:

 Jika anda ingin menambahkan gambar lain sebagai bagraundnya, anda dapat menambahkan tect pada script yang anda tulis, dan pastikan nama gambar dengan scrip sesuai dan berada dalam satu folder.

Demikianlah cara membuat tampilan web yang sangat sederhana, sekian dan terima kasih :)