Langkah-langkah Membuat Nota Bengkel dengan HTML

🛠️ Cara Membuat Nota Bengkel Motor dengan HTML

Bagi kamu yang punya bengkel motor dan ingin membuat nota servis di benkel atau nota jualan di toko kamu sendiri tanpa perlu software rumit, kamu bisa membuatnya cukup dengan kode HTML. Selain mudah, cara ini bisa kamu gunakan langsung di halaman web atau diprint untuk nota manual di kertas.

Langkah-langkah Membuat Nota Bengkel dengan HTML

1. Siapkan Struktur Dasar HTML

Buka file HTML baru atau masuk ke mode HTML di Blogger. Kita akan membuat tampilan nota lengkap dengan bagian nama bengkel, tanggal, jenis motor, hingga tabel item servis.

2. Gunakan Kode Berikut:  

<div style="max-width:700px;margin:auto;font-family:Arial,Helvetica,sans-serif;border:1px solid #000;padding:20px;">

  <h2 style="text-align:center;margin-bottom:10px;">NOTA SERVIS MOTOR - ABM MOTOR</h2>

  <hr>

  <table style="width:100%;margin-top:10px;">

    <tr>

      <td><strong>Bengkel:</strong> ABM Motor</td>

      <td><strong>Tanggal:</strong> ....................</td>

    </tr>

    <tr>

      <td><strong>Alamat:</strong> ..................................................</td>

      <td><strong>No. Nota:</strong> .............</td>

    </tr>

    <tr>

      <td colspan="2"><strong>Jenis Motor:</strong> ...............................................................</td>

    </tr>

  </table>

  <hr style="margin:15px 0;">

  <table style="width:100%;border-collapse:collapse;text-align:center;" border="1">

    <tr style="background:#f2f2f2;">

      <th style="width:5%;">No</th>

      <th style="width:55%;">Keterangan / Nama Barang</th>

      <th style="width:20%;">Harga</th>

      <th style="width:20%;">Total</th>

    </tr>

    <tr><td>1</td><td></td><td></td><td></td></tr>

    <tr><td>2</td><td></td><td></td><td></td></tr>

    <tr><td>3</td><td></td><td></td><td></td></tr>

    <tr><td>4</td><td></td><td></td><td></td></tr>

    <tr><td>5</td><td></td><td></td><td></td></tr>

    <tr><td>6</td><td></td><td></td><td></td></tr>

    <tr><td>7</td><td></td><td></td><td></td></tr>

    <tr><td>8</td><td></td><td></td><td></td></tr>

    <tr><td>9</td><td></td><td></td><td></td></tr>

    <tr><td>10</td><td></td><td></td><td></td></tr>

    <tr style="font-weight:bold;">

      <td colspan="3" style="text-align:right;">Grand Total :</td>

      <td></td>

    </tr>

  </table>

  <p style="margin-top:30px;text-align:center;">

    Terima kasih telah mempercayakan motor Anda kepada ABM Motor!<br>

    <strong>Web:</strong> bangalicb.blogspot.com

  </p>

</div> 

NB;ganti yang aku tandai warna ping dengan nama toko atau benkelmu,

Dan hasilnya akan seperti di bawah ini ;

NOTA SERVIS MOTOR - ABM MOTOR

---

Bengkel: ABM Motor	Tanggal: ....................
Alamat: ..................................................	No. Nota: .............
Jenis Motor: ...............................................................

---

No	Keterangan / Nama Barang	Harga	Total
1
2
3
4
5
6
7
8
9
10
Grand Total :

Terima kasih telah mempercayakan motor Anda kepada ABM Motor!
Web: bangalicb.blogspot.com

sementara ini yang isa saya bagikan semoga denganartikel ini bisa membantu kamu yang ingin buat nota melalui code html, 

selamat mencoba

Baca Juga