Artikel

Home > Artikel
 

 

Membuat Desain Tampilan Sederhana Menggunakan HTML


Diposting : 2017-07-24 oleh : WebHozz



Assalamualaikum, sobat Webhozz. Kali ini kita akan membahas tentang membuat desain tampilan sederhana menggunakan HTML.

Sebelumnya, jika kamu pernah belanja online atau membuka web e-commerce pastinya kamu pernah melihat rincian barang tersebut untuk mengetahui apakah sesuai dengan yang kita mau. Saat kita lihat, yang namanya rincian tersebut tidak jauh dari nama produk, harga, bahkan deskripsi produknya.

Pada tutorial ini akan dibahas, bagaimana caranya membuat tabel spesifikasi tersebut. Sebenarnya ada banyak cara untuk menampilkan rincian seperti itu. Salah satunya adalah dengan menggunakan tabel dalam format HTML. Dan oke, langsung aja kita praktek.

1.       Pertama-tama, kita buat dulu folder dan file yang nanti yang akan disimpan pada folder tersebut. Disini saya membuat folder html dan di dalamnya ada file rincian.html.

2.       Siapkan contoh foto produknya. Disini saya punya gambar dengan nama bajukeren.png. Kemudian simpan foto tersebut ke dalam folder html bersama dengan file rincian.html tadi.

3.       Kita buka, file rincian.html. Kemudian ketikkan kode berikut ini.

<table align="center">

                       <tr>

                                       <td>

                                       </td>

 

                                       <td>

                                       </td>

                       </tr>

       </table>

4.       Disini ada 2 kolom. Untuk kolom pertama kita sisipkan gambar bajukeren.png .

<table align="center">

                       <tr>

                                       <td>

                                                       <img src="bajukeren.png" width="300">

                                       </td>

 

                                       <td>

                                       </td>

                       </tr>

       </table>

 

5.       Kolom pertama sudah terisi dengan gambar bajukeren.png. Trik selanjutnya adalah membuat tabel lagi di kolom kedua. Jadi kita membuat tabel di dalam tabel.  Berikut adalah script kodenya.

<table>

       <tr>

       <td>Nama Produk</td>

       <td>:</td>

       <td><b style="color: red;">Baju Doraemon</b></td>

       </tr>

 

       <tr>

       <td>Harga Produk</td>

       <td>:</td>

       <td><b>Rp. 39.000,-</b></td>

       </tr>

 

       <tr>

       <td>Deskripsi</td>

       <td>:</td>

       <td>

                       <b>

                       <ul>

                       <li>Bahan Fletch</li>

                       <li>Tahan air</li>

                       <li>Tahan jamur</li>

                       <li>Tidak mudah lentur</li>

                       <li>Enak dipakai</li>

                       </ul>

                       </b>

       </td>

       </tr>

</table>

6.       Jika kode tersebut sudah digabungkan pada kolom kedua, maka tampilan keseluruhannya adalah sebagai berikut.

<table align="center">

                       <tr>

                                       <td>

                                                       <img src="bajukeren.png" width="300">

                                       </td>

 

                                       <td>

 

                       <!--pembuka tabel di kolom ke dua -->

                                                      

                                                       <table>

                                                                       <tr>

                                                                                       <td>Nama Produk</td>

                                                                                       <td>:</td>

                                                                                       <td><b style="color: red;">Baju Doraemon</b></td>

                                                                       </tr>

 

                                                                       <tr>

                                                                                       <td>Harga Produk</td>

                                                                                       <td>:</td>

                                                                                       <td><b>Rp. 39.000,-</b></td>

                                                                       </tr>

 

                                                                       <tr>

                                                                                       <td>Deskripsi</td>

                                                                                       <td>:</td>

                                                                                       <td>

                                                                                                       <b>

                                                                                                                       <ul>

                                                                                                                                       <li>Bahan Fletch</li>

                                                                                                                                       <li>Tahan air</li>

                                                                                                                                       <li>Tahan jamur</li>

                                                                                                                                       <li>Tidak mudah lentur</li>

                                                                                                                                       <li>Enak dipakai</li>

                                                                                                                       </ul>

                                                                                                       </b>

                                                                                       </td>

                                                                       </tr>

                                                       </table>

                                       <!--penutuptabel di kolom ke dua -->

                                       </td>

                       </tr>

       </table>

 

Oke, rincian harga buatan kita sendiri sudah selesai. Silahkan dicoba. Inilah salah satu caranya. Akhir kata, semoga artikel ini bermanfaat terutama yang lagi pengen buat toko online. Sampai jumpa lagi pada artikel berikutnya.

 

Wassalamualaikum, Wr. Wb

 

By: Danny Julian Pratama




Tag : kursus android, kursus web, kursus web design, kursus php, kursus website, lenovo, woocommerce, windows, excel, xampp, php, mysql, twitter, analytic, adwords, google, maps, seo, jquery, slider, browser, game, transition, animation, whatsapp, desktop, wireframe, desain, vps, css, aplikasi, html, javascript, captcha, form, kode, kaskus, autoscroll, codeigniter, processor, bootstrap, ios, wordpress, div, span, lollypop, background, marquee, behaviour, plugin, chaton, bitcoin, opencart, payment, post, get, tooltip, button, silverlight, webmaster, phonegap, facebook, html5, swicth, sass, bbm, alert, mvc, fungsi, mobile, loading, nokia, template, traffic, laravel, yii, jquerymobile, blogger, adobe, baidu, hosting, font, server, input, sticky, menu, tokoonline, prestashop, joomla, java, yahoo, angular, microsoft, responsive, generator, visitor, counter, flatdesign, kursus web design jakarta, kursus web design bandung, kursus website bandung, kursus php bandung, kursus android bandung, kursus java bandung, kursus web bandung, Aplikasi Ramadhan, Cara Membuat Website, Tempat Kursus Website Bandung, Manfaat Internet, Menggunakan Wireframe Web, multikolom, horizontal, ym, toko online, controllers, optimalisasi, landing page, DOM, multikolom, horizontal, ym, toko online, controllers, optimalisasi, landing page, DOM, kursus web jogja, kursus website jogja, kursus web design jogja, kursus web programming jogja, kursus php jogja, kursus android jogja, kursus android programming jogja, kursus java jogja, kursus webmaster jogja, kursus codeigniter jogja, kursus wordpress jogja, kursus seo jogja, kursus vb jogja, kursus sql server jogja, kursus game jogja, kursus website jakarta, kursus web design jakarta, kursus web programming jakarta, kursus webmaster jakarta, kursus php jakarta, kursus wordpress jakarta, kursus android jakarta, kursus seo jakarta, kursus java jakarta, kursus sql server jakarta, framework cordova, mengenal framework cordova, apa itu cordova, membuat aplikasi android dengan cordova, cordova android, aplikasi hybrid android, cordova vs phonegap, Kursus Website Surabaya, Kursus Web Design Surabaya, Kursus Webmaster Surabaya, Kursus PHP Surabaya, Kursus Wordpress Surabaya ,