Belajar Membuat Flowchart, Algoritma, serta Pseudocode

1. Definisi Algoritma

“Algoritma merupakan suatu urutan langkah-langkah (steps) yang disusun secara logis dan sistematis untuk menyelesaikan suatu masalah dan dapat dieksekusi. “

Dalam defenisi diatas istilah “komputer” tidak terlihat sehingga sebuah algoritma tidak selalu berhubungan dengan komputer. Dalam kehidupan sehari-hari banyak terdapat proses yang dinyatakan dalam suatu algoritma.

2. Definisi Flowchart (Diagram Alir)

Selain dalam bentuk tulisan, algoritma juga dapat ditulis dalam bentuk diagram-diagram dengan anak panah sebagai penunjuk urutan langkah algoritmanya. Algoritma yang ditulis dengan simbol-simbol demikian yang dinamakan flowchart.

3. Definisi Pseudocode Pseudo berarti imitasi dan code berarti kode yang dihubungkan dengan instruksi yang ditulis dalam bahasa komputer (kode bahasa pemrograman). Apabila diterjemahkan secara bebas, maka pseudocode berarti tiruan atau imitasi dari kode bahasa pemrograman.
Pada dasarnya, pseudocode merupakan suatu bahasa yang memungkinkan programmer untuk berpikir terhadap permasalahan yang harus dipecahkan tanpa harus memikirkan syntax dari bahasa pemrograman yang tertentu. Tidak ada aturan penulisan syntax di dalam pseudocode. Jadi pseudocode digunakan untuk menggambarkan logika urut-urutan dari program tanpa memandang bagaimana bahasa pemrogramannya.

Berikut ini contoh Algoritma, Flowchart dan Pseudecode dari Prosedur Penjualan Kredit :

1. Flowchart
Berikut ini adalah flowchart dari penjualan kredit.

2. Algoritma

    Berikut ini contoh Prosedur Penjualan Kredit (Analytic Flowchart) di atas :

A. Customer mengirimkan Surat Order Barang ke Bagian Penjualan. Setelah menerima Surat Order Barang dari Customer, Bagian Penjualan membuat dan menandatangani Faktur Penjualan yang dirangkap 3, lembar pertama dan lemabar kedua untuk Bagian Pengiriman, sedangkan lembar ketiga untuk Bagian Gudang. Dari Faktur Penjualan tersebut, Bagian Penjualan membuat Surat Jalan yang dirangkap 2 untuk Bagian Pengiriman.

B. Dari Faktur Penjualan lembar ketiga yang diterima dari Bagian Penjualan, Bagian Gudang menyiapkan barang yang diorder dan mencatat ke Buku Catatan Barang. Kemudian Barang tersebut diserahkan ke Bagian Pengiriman dan Faktur Penjualan dikembalikan ke Bagian Penjualan.

C. Barang dari Bagian Gudang dan Surat Jalan beserta Faktur Penjualan dari Bagian Penjualan, dicek apakah sudah sesuai apa belum , jika sesuai, Barang dan Surat Jalan beserta Faktur Penjualan tersebut dikirm ke Customer. Jika Barang belum sesuai maka akan di kembalikan ke Bagian Gudang.

D. Setelah Faktur Penjualan dan Surat Jalan ditandatangani oleh Customer, Faktur Penjualan lembar pertama diberikan ke Customer sedangkan Faktur Penjualan lembar kedua diberikan ke Bagian Akuntansi. Surat Jalan lembar pertama diberikan ke Bagian Gudang untuk diarsip urut tanggal dan lembar kedua diberikan ke Bagian Penjualan.

E. Surat Jalan lembar kedua dari Bagian Pengiriman dan Faktur Penjualan lembar ketiga dari Bagian Gudang, Bagian Penjualan mencatat ke Catatan Penjualan kemudian Surat Jalan beserta Faktur Penjualan di arsip urut tanggal jatuh tempo sampai pelanggan melunasi pembelian tersebut.

F. Atas Faktur Penjualan lembar kedua dari Bagian Pengiriman, Bagian Akuntansi mencatat ke Jurnal Penjualan. Kemudian Faktur Penjualan diarsip urut tanggal.

Sistem Akuntansi :

   Pada umumnya diartikan sebagai organisasi atau jaringan yang terdiri dari formulir-formulir, catatan-catatan, prosedur-prosedur, alat-alat dan sumber daya manusia dalam rangka menghasilkan informasi pada suatu organisasi untuk keperluan pengawasan operasi, dan untuk pengambilan keputusan.

Prosedur :
   Urut-urutan pekerjaan klerikal yang melibatkan beberapa orang/bagian yang disusun untuk menjamin adanya perlakuan yang sama terhadap penanganan transaksi perusahaan yang berulang.

Pekerjaan klerikal terdiri dari :

a.       Penulisan kode

b.      Pembandingan

c.       Pembukuan

d.      Penggandaan

e.       Pemilahan

f.       Penghitungan

g.      Pembuatan daftar-daftar.

Hal-hal penting dalam membuat flowchart :

1. Konsep IPO (Input-Proses-Output)

    Suatu input tidak akan langsung menjadi output tanpa melalui suatu proses.

2. Penggunaan simbol.

3. Penggunaan garis arus. 

Langkah-Langkah membuat flowchart berdasarkan narasi prosedur/sistem:

1. Tentukan Bagian-bagian yang terlibat dalam prosedur/sistem (Bagian-bagian tersebut adalah yang terdapat dalam struktur organisasi perusahaan).

2. Tentukan jenis dan simbol-simbol flowchart yang digunakan

3. Tentukan awal dan akhir prosedur/sistem

4. Tidak boleh dilupakan:

     a. Judul Flowchart

     b. Pemisahan antar kolom atau bagian

     c. Keterangan Simbol

3. Pseudecode

Berikut ini adalah pseudecode dari Flowchart Bagian Pengiriman, yaitu : 
Alur 1 
1.      Operation manual (mengecek kesesuaian barang dari gudang dengan packing slip) 
2.      Dokumen (sales order) 
3.      Konsumen 
Alur 2 
1.      Operation manual (mengecek kesesuaian barang dari gudang dengan packing slip) 
2.      Operation manual (membuat bukti pengiriman barang) 
3.      Dokumen (bukti pengiriman barang) 
4.      Dokumen (bukti pengiriman barang diserahkan kepada bagian akuntansi dan konsumen)

Sekian artikel Belajar Membuat Flowchart, Algoritma, serta Pseudocode. Terimakasih telah berkunjung. Salam optimis:) 
#tugasutsteori

Read More

Memulai Belajar PHP dengan Xampp

Setelah anda berhasil menginstal xammp maka anda pasti ingin langsung membuat choding php kan?? Sabar yaaa.. ada beberapa hal dulu yang harus diperhatikan sebelun memualainya :

        1. Pastikan apache dan mysql di xammp control panel hidup running

2. Buat folder tempat penyimpanan di htdocs dalam xampp. Caranya adalah jika pada saat menginstall xampp anda menyimpan xampp di drive c  maka :

Folder htdocs anda maka berada di dalam folder xampp di drive c:

C:/xampp/htdoc/

3. Setelah didalam htdocs anda buat folder coba sebagai media penyimpanan anda.. Setelah  itu anda baru bisa memulai php. Sebagai permulaan, cobalah script di bawah ini :

 <?php
echo"Lastri Yanti";
$no ="1";
$nama ="Lastri Yanti";
$npm ="1410128262047";
    

echo "<table border=1>

<th>No</th>
<th>Nama</th>
<th>NPM</th>
<th>Email</th>
<tr>
                          
<td>01</td>
<td>Lastri</td>
<td>2047</td>
<td>lastriyanti@rocketmail.com</td>
</tr>

<td>02</td>
<td>Yanti</td>
<td>2147</td>
<td>lastri_yanti@yahoo.co.id</td>
</tr>

</table>"
?>

</html>

4. Setelah itu simpan dengan nama apa saja dengan berekstensikan .php di dalam folder yang anda buat di htdocs (contoh : Test1.php). Lalu buka web browser anda dan ketikan localhost/nama_folder_dihtdocs_tempat_anda_menyimpan_file.php/ (contoh : localhost/mr.r). Maka di dalam web browser tersebut akan terdapat file php yang anda buat. setelah itu jika di klik maka hasilnya akan seperti ini :

Sekian artikel Memulai Belajar PHP dengan Xampp. Happy Nyekrip! Terimakasih telah berkunjung. Salam optimis:)
#tugas5

Read More

Tahapan Desain dan Membuat Web dengan HTML

Untuk memudahkan dalam belajar membuat web, maka berikut adalah tahapan dalam desain dan membuat web yang secara besar tahapan materi/artikel dibagi menjadi 3 bagian secara berurutan yaitu HTML, CSS dan Penerapan. Ini merupakan langkah-langkah yang akan ditempuh dalam mempelajari cara membuat web, cara-cara ini akan ditempuh jika kita dalam membuat website ini kita menggunakan teknik “hand coding” bukan menggunakan CMS.

1. HTML

Pada bagian awal yang harus dipelajari adalah bagaimana skrip HTML digunakan untuk membuat halaman Web. memulai untuk menuliskan kata-kata atau kalimat yang ingin ditampilkan pada halaman web.

Memberi tag pada setiap kata atau group kata untuk menandainya sebagai judul, paragraf, dan lain sebagainya.

Juga dijelaskan lebih rinci tentang bagaimana mengatur teks, list atau daftar, link, gambar, tabel, bentuk-bentuk atau shapes, audio video dan flash, dan unsur lain-lain.

Untuk permulaan, contoh-contoh kode html yang di buat latihan akan terlihat membosankan, namun itu adalah dasar dari pembuatan halaman web.

Selanjutnya belajar tentang CSS yaitu suatu skrip yang digunakan untuk mengatur kode html yang sudah dibuat agar terlihat jauh lebih menarik.

2. CSS

Pada bagian ini yang akan dipelajari adalah bagaimana kinerja skrip css untuk mengontrol styling dan tata letak pada sebuah halaman web.

Untuk selanjutnya memahami berbagai properti dalam skrip CSS, properti ini dibagi dalam dua kategori:

Presentasi: Cara mengontrol objek seperti warna teks, font yang ingin digunakan dan ukurannya, bagaimana cara menambah warna background pada suatu halaman, atau mengubahnya dengan gambar.

Layout: Cara mengontrol posisi semua unsur-unsur pada layar dan belajar bagaimana teknik untuk membuat halaman lebih menarik.

3. PENERAPAN

Setelah memahami tentang CSS dan HTML, Pada tahapan akhir jangan lupa untuk mempelajari tips seputar informasi yang akan membantu dalam membangun website, yaitu tentang bagaimana menaruh web dalam hosting online, meningkatkan SEO, menggunakan Google Analytics, dan masih banyak lagi.

Perlu diketahui beberapa tag baru telah diperkenalkan HTML5 untuk membantu mengatur struktur halaman web. HTML5 adalah versi terbaru dan terakhir saat ini, mempelajari HTML5 akan membuat website kita mempunyai fitur dari HTML yang paling baru, pelajari HTML5 lebih mendetail beserta prakteknya setelah kita mengerti akan dasar mengenai HTML dan CSS.

Berikut ini Tahapan Desain dan Membuat Web dengan HTML masih menggunakan Notepad/Notepad++:

1. Buat folder bebas dan simpan diamana terserah anda.

2. Buka lah Notepad atau notepad++
3. Kemudian untuk langkah selanjutnya,Ketik script sederhana (contoh) HTML berikut:
 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="image">
</div>
<img src="batam.jpg" width="1500px" height="500px">
<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">
<img src="lastri.JPG" width="150" height="170"><br>
<p>
Nama : Lastri Yanti<br/>
Pekerjaan : Karyawan Swasta<br/>
Negara : Indonesia<br/>
Alamat : Komp. Tering Raya Blok B1 No. 35<br/>
Hoby : Selfi<br/> </p>
<hr>
<p align="justify">
Saya adalah seorang mahasiswa asal Batam, Indonesia.
Saya menyukai traveling, teater dan musik.
</p>
</div>


<div id="kanan">
<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>Biodata</h1>
<p>
Saya Lastri Yanti Mahasiswa STT IBNU SINA Semester 2 Teknik Informatika
Umur saya 20 tahun, saya anak ke-2 dari 3 bersaudara
</p>

<p>
Sekian biodata singkat tentang saya, jika ingin mengetahui saya lebih lanjut silahkan add fb atau twitter saya.
</p>

</div>
<div id="tengah"></div>

<div id="footer">
<marquee><font color="white">lastriyanti@rocketmail.com</font><marquee>
</div>
</body>
</html>

Simpan Script HTML di atas pada folder yang sudah di buat.
 

        4. Lalu,Buka TAB baru di Notepad atau Notepad++
5. Langkah berikutnya adalah proses untuk mengedit jarak, tampilan, dll pada blog/web anda, Berikut script nya.

      #image
{
    background-image:url("jembatan.jpg");
    padding-left:100px;
    height:150px;
}
#header {
    background-color:#000000;
    color:purple;
    text-align:center;
    padding:5px;
    padding-left:150px;
}
#nav {
    line-height:30px;
    height:730px;
    width:200px;
    float:left;
    padding-top:5px;
}

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


#section {
    width:350px;
    float:left;
    padding:50px;
}
#footer {
    background-color:#000000;
    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: 200px;
    font-weight: arial;
    color: #FFFFFF;
    background-color: #98bf21;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

a:hover, a:active {
    background-color: #000000;
}

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

(*NB.Teks kalimat,gambar,warna dapat anda rubah sesuai keinginan anda,saya disini hanya memberikan contoh belajarnya saja)

 7. Simpan Script diatas dengan format cascade style sheet(*css),dan disimpan dalam satu folder yang sudah dibuat.

 8. Biasanya dalam satu folder berisi:

9. Sekarang bukalah broser anda, bisa menggunakan Mozilla firefox ataupun Google Chrome dan bukalah file html yang sudah anda simpan tersebut. maka hasil tampilannya akan seperti berikut ini:

Sekian artikel Tahapan Desain dan Membuat Web dengan HTML. Happy Nyekrip! Terimakasih telah berkunjung. Salam optimis:)
#tugas4

Read More

Cara Desain Website Sederhana dengan HTML

Pada kesempatan kali ini kita akan membahas cara membuat website sederhana dengan html 5, sebelumnya anda diharapkan sudah mengerti dasar HTML dan CSS karena pada tutorial ini tidak akan dijelaskan secara mendetail mengenai HTML dan CSS, tutorial ini hanya menjelaskan secara garis besar fungsi dari elemen yang dipakai.

Jika anda belum pernah membuat halaman web sederhana, sangat disarankan untuk latihan membuat halaman web secara sederhana di artikel ” CARA MEMBUAT HALAMAN WEB SEDERHANA ” dalam artikel ini juga dijelaskan secara mendetail tentang apa saja alat yang digunakan dalam membuat website.

Silahkan anda ikuti langkah-langkah membuat desain website sederhana dengan html ini:

1. Silahkan anda buka aplikasi Notepad/Notepad ++

2. Lalu buatlah Folder bebas (silahkan diberi nama dan simpan terserah anda)

3. Kemudian ketik contoh script sederhana berikut: 

<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="image">
</div>
<img src="cf.jpg" width="1000px" height="300px">
<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">CONTUCT US</a><li>
<li><a href="nav.html">ABOUT</a><li>
</ul>
</div>

<div id="nav">
<ul>
<li><a href="nav.html">-Products</a></li>
<li><a href="nav.html">-Events</a></li>
<li><a href="nav.html">-Promotions</a></li>
<li><a href="nav.html">-Nutritions & Wellness</a></li>
</ul>
</div>
<img src="coffee.jpg" width="500px" height="200px">

<div id="section">
<h1><center>POKKA<CENTER></h1>
<p>
Established in January 1977 by Pokka Sapporo Food & Beverage Limited (previously known as Pokka Corporation Japan), Pokka is a leading food and beverage group in Singapore and the Asia Pacific.
</p>
<p>
The company manufactures and markets a wide range of beverages under the reputed brand name "Pokka" and also owns and operates restaurant chains, serving varied culinary delights.

</div>

<div id="footer">
<marquee><font color="#000000">Copyright © 2013 Pokka Singapore-Customer Care Hotline: 1800-MY-POKKA (1800-69-76552)</font></marquee>
</div>
</body>
</html>

4. Kemudian simpan script diatas pada folder yang anda buat tadi.(*Ingat simpan dengan format *HTML)

5. Langkah selanjutnya adalah langkah untuk mengedit letak kata,gambar,warna dll.Maka ketik script berikut ini :

#image
{background-image:url("a.jpg");
    padding-left:0px;
    height:0px;
}
   
#header {
    background-color:#D2B48C;
    color:#DC143C;
    text-align:center;
    padding:5px;
    padding-left:150px;
}
#nav {
    line-height:93px;
    height:400px;
    width:100px;
    float:left;
    padding:5px;
}
#section {
    background-color:#D2B48C;
    height:300px;
    width:480px;
    float:left;
    padding:10px;
}
#warna {
    background-color:#DDA0DD;
    height: 388px;
    width:782px;
    float:left;
    padding:10px;
    }
#footer {
    background-color:#CD853F;
    color:white;
    text-align:center;
    padding:1px;
    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:#000000 ;
    background-color:#CD853F;
    text-align:centre;
    padding:4px;
    text-decoration:none;
    text-transform:centaur;
}
a:hover, a:active {
    background-color: #800000;
}

6. Lalu simpan script tersebut pada folder yang anda buat dan simpan dengan format  Cascade Style Sheet (*CSS)

7. Biasanya dalam satu folder berisi :

8. Dan hasil proses dari langkah atas menjadi :

Cukup sampai disini tutorial Cara Desain Website Sederhana dengan HTML, Pada tahap ini kita sudah membuat website meskipun sangat sederhana, simple dan terbilang cukup mudah, web sederhana ini hanya terdiri dari satu halaman web saja. Kita bisa menambahkan halaman lain dengan cara duplikat halaman web yang sudah dibuat dan isinya kita ganti dengan yang lain.

Tutorial diatas masih sebatas cara membuat web simpel dan biasa, yang perlu diketahui bahwa website simpel ini masih bersifat statis tidak dinamis. Tutorial cara membuat website sederhana ini sangat jauh dari kesempurnaan, maka dari itu kami sangat mengharapkan saran dan kritikan yang membangun.

Happy Nyekrip! Salam optimis :)
#tugas3

Read More

Cara Membuat Tampilan Sederhana pada Web dengan HTML

HTML adalah pembentuk dasar dari hampir setiap website, tidak peduli seberapa besar atau kecil website tersebut.
Jadi, pada saat anda selesai belajar tentang HTML, anda akan siap untuk melanjutkan dengan teknologi web lain seperti CSS, Java Script dan teman-temannya.

Seperti yang akan kita pelajari, tidak ada teknologi atau bahasa yang secara individu memungkinkan penciptaan website modern dan aplikasi web. Sebaliknya, website terdiri dari beberapa teknologi yang memberi kita kebebasan untuk merangkai dan mengkombinasikannya menjadi sesuatu yang baru, seperti kita bermain puzzle.

Mari kita membuat halaman web pertama yang sederhana, langkah demi langkah. Untuk membuat website, yang kita butuhkan adalah teks editor dan web browser.

Mari kita mulai dengan teks editor, Sebuah Teks Editor hanyalah sebuah program yang mampu menciptakan atau memodifikasi file teks biasa, dan setiap komputer sudah dilengkapi dengan teks editor yang tipenya tergantung OS. Jika Anda menggunakan Windows, kita akan mulai dengan menggunakan Notepad. Jika Anda menggunakan Mac, Anda dapat menggunakan TextEdit di folder aplikasi Anda.

Namun, berhati-hatilah, karena aplikasi pengolah kata yang lebih canggih seperti Microsoft Word atau Pages di Mac, seringkali akan memberikan tambahan aturan styling dan metadata yang tersembunyi dari pandangan Anda. Aturan styling yang tidak terlihat ini akan mengganggu pembuatan halaman HTML kita, jadi pastikan bahwa Anda menggunakan editor teks dasar. Seperti yang saya katakan, TextEdit pada Mac atau Notepad pada Windows akan bekerja dengan baik untuk saat ini.

Disini kita menggunakan Notepad/Notepad++. Setelah Anda membuka Notepad/Notepad++, mari kita mulai dengan mengetikkan:

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


<body>
<div id="header">
<h1><font face="Berlin Sans FB Demi"color="#FF6347">Path</h1></font>
</div>

<div id="nav">
<br><a href="https://m.facebook.com/Radovic.lass?fref=nf&pn_ref=story&ref_component=mbasic_home_header&ref_page=%2Fwap%2Fprofile_timeline.php&refid=17">Facebook</a></li>
<br><a href=https://twitter.com/lastriyantii?lang=en">Twitter</a></li>
<br><a href=blog.path.com"color="#FF6347">Path</a></li></h1></font>
</div>

<div id="section">
<h1><font face="Agency FB"color="#808080">Jejaring Sosial</h1>
<p>
Path didirikan oleh perusahaan Swasta di kantor pusat San Fransisco, California, Amerika Serikat.
Tokoh utama yang mendirikan Path adalah Dave Morin, Shawn Fanning, Dustin Mierau. Dengan 25 karyawan path resmi
diluncurkan pada bulan November 2010 dengan bahasa Inggris, Arab, Norwegia, Belanda, Perancis, Jerman, Yunani,
Indonesia, Italia, Jepang, Korea, Mandarin Sederhana, Mandarin Tradisional, Melayu, Portugis, Rusia, Spanyol,
Swedia, Thai
</p>
<p>
Sama halnya seperti Fb, Twitter, Line, dll. Path adalah sebuah aplikasi jejaring sosial pada telepon pintar yang memungkinkanpenggunanya
untuk berbagi gambar dan juga pesan.
Saya Lastri yanti Mahasisa STT Ibnu Sina Batam Semester 2 Informatika.
</p>
</div>
<div id="footer">
<marquee><font color="#8B0000">Copyright © Lastriyanti/Smt2/T.Informatika/STT Ibnu Sina
</div>
</body>
</html>

Selanjutnya, simpan scrip di atas dalam satu folder (Folder bebas dibuat terserah anda)

Sekarang bukalah broser anda, bisa menggunakan Mozilla firefox ataupun Google Chrome dan bukalah file html yang sudah anda simpan tersebut. maka hasil tampilannya akan seperti berikut ini: 

Selamat, Anda telah membuat halaman web pertama Anda. Tetapi ingat ya.., membuat website yang lebih kompleks akan membutuhkan usaha yang lebih juga.

Happy Nyekrip! Terimakasih telah berkunjung. Salam optimis:)

#tugas2

Read More

Cara Membuat Tabel HTML dengan Mudah

Tabel merupakan fungsi yang digunakan untuk menyajikan data dalam kolom dan baris. Lalu, bagaimana cara membuat tabel dengan HTML. Ada unsur-unsur apa saja untuk membuat tabel dengan HTML? Di bawah ini akan menjawab semua pertanyaan tersebut.

1. Cara Membuat Tabel dengan HTML

Untuk membuat tabel dengan HTML harus diawali dengan tag <table> dan diakhiri dengan tag </ table>.

2. Elemen yang ada di HTML
<html></html> digunakan untuk membuka dan menutup kode html.
<head></head> merupakan kepala dari html.
<title></title> digunakan unutk membuat judul halaman.
<body></body> merupakan content dari halaman.
<table></table> digunakan untuk membuka dan menutup tabel dalam kode html.
<tr></tr> digunakan untuk membentuk garis didalam sebuah tabel.
<td></td>  digunakan untuk membentuk kolom tabel.

 Agar lebih jelas, dibawah ini kita akan membuat sebuah contoh tabel dengan menggunakan tag html, anda boleh mengetikkan dengan menggunakan Notepad atau Notepad++ di komputer.

<html>
<head>
<title> Tabel NPM Mahasiswa Teknik Informatika 2B </title>
</head>
<body>
<body style="background-image:url(koala.jpg)">
<table border="1">

<p align="center"><font face="arial" size="30" color="blue">TABEL MAHASISWA</font></p>
<table style="border-collapse:collapse;background:#ffc" width="75%" align="center" border="1">
    <tr>
        <td> No </td>
        <td> NPM </td>
        <td> Nama </td>
        <td> Jurusan </td>
    </tr>
    <tr>
        <td> 1 </td>
        <td> 1410128262047 </td>
        <td> Lastri Yanti </td>
        <td> Teknik Informatika </td>
    </tr>
    <tr>
        <td> 2 </td>
        <td> 1410128262057 </td>
        <td> Monica Rachma Marantika </td>
        <td> Teknik Informatika </td>
    </tr>
    <tr>
        <td> 3 </td>
        <td> 1410128262067 </td>
        <td> Raja Khusnul Maab </td>
        <td> Teknik Informatika </td>
    </tr>
    <tr>
        <td> 4 </td>
        <td> 1410128262080 </td>
        <td> Muhamad Ramdani </td>
        <td> Teknik Informatika </td>
    </tr>
    <tr>
        <td> 5 </td>
        <td> 1410128262048 </td>
        <td> Aditya setiwan </td>
        <td> Teknik Informatika </td>
    </tr>
    <tr>
        <td> 6 </td>
        <td> 1410128262066 </td>
        <td> Sufiyandi </td>
        <td> Teknik Informatika </td>
    </tr>
    <tr>
        <td> 7 </td>
        <td> 1410128262062 </td>
        <td> Uus Kusnadi </td>
        <td> Teknik Informatika </td>
    </tr>
    <tr>
        <td> 8 </td>
        <td> 1410128262069 </td>
        <td> Bayu Setyo </td>
        <td> Teknik Informatika </td>
    </tr>
    <tr>
        <td> 9 </td>
        <td> 1410128262075 </td>
        <td> Adli Gustiansyah </td>
        <td> Teknik Informatika </td>
    </tr>
    <tr>
        <td> 10 </td>
        <td> 1410128262052 </td>
        <td> Cici Sofrawida </td>
        <td> Teknik Informatika </td>
</table>
<body style=background-image:url(xx.jpg)">
</body>
</html>

Kemudian simpan script di atas dalam satu folder (Folder bebas dibuat terserah anda). Biasanya dalam satu folder berisi:

Sekarang bukalah broser anda, bisa menggunakan Mozilla firefox ataupun Google Chrome dan bukalah file html yang sudah anda simpan tersebut. maka hasil tampilannya akan seperti berikut ini:

 

Sekian artikel Cara Membuat Tabel HTML dengan Mudah.  Happy Nyekrip! Terimakasih telah berkunjung. Salam optimis:)

#tugas1

Read More