ساخت رسید یا فاکتور HTML
برای ایجاد یک رسید یا فاکتور با استفاده از HTML، نیاز است که ساختار مناسبی را برای نمایش اطلاعات مشتری، محصولات و قیمت‌ها در نظر بگیرید.
ساختار کلی HTML
ابتدا، یک ساختار پایه HTML می‌سازیم. این شامل تگ‌های اصلی مانند `<html>`, `<head>`, و `<body>` می‌باشد.
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
- 0">
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
padding: 8px;
text-align: right;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>رسید خرید</h1>
```
جزئیات مشتری
در این بخش، اطلاعات مشتری شامل نام، آدرس و شماره تماس را وارد می‌کنیم.
```html
<h2>اطلاعات مشتری</h2>
<p>نام: علی رضایی</p>
<p>آدرس: تهران، خیابان ولیعصر، پلاک 50</p>
<p>شماره تماس: 0912XXXXXXX</p>
```
جدول محصولات
اکنون به ایجاد یک جدول برای نمایش محصولات خریداری شده می‌پردازیم. این جدول شامل نام محصول، تعداد، قیمت واحد و مجموع قیمت خواهد بود.
```html
<h2>محصولات خریداری شده</h2>
<table>
<tr>
<th>نام محصول</th>
<th>تعداد</th>
<th>قیمت واحد</th>
<th>مجموع قیمت</th>
</tr>
<tr>
<td>محصول 1</td>
<td>2</td>
<td>200,000 تومان</td>
<td>400,000 تومان</td>
</tr>
<tr>
<td>محصول 2</td>
<td>1</td>
<td>150,000 تومان</td>
<td>150,000 تومان</td>
</tr>
<tr>
<td colspan="3">مجموع کل</td>
<td>550,000 تومان</td>
</tr>
</table>
```
نتیجه‌گیری
در پایان، می‌توانیم با یک پیام تشکر از مشتری، رسید را کامل کنیم.
```html
<h2>خ thank you for your purchase!</h2>
<p>از خرید شما سپاسگزاریم. امیدواریم دوباره شما را ببینیم!</p>
</body>
</html>
```
نتیجه نهایی
با استفاده از این کد، یک رسید یا فاکتور ساده اما کاربرپسند ایجاد می‌شود. این رسید شامل اطلاعات کلیدی است که هر مشتری نیاز دارد. همچنین، با استفاده از CSS، طراحی بصری بهتری به رسید می‌دهیم.
شما می‌توانید این کد را به دلخواه خود تغییر داده و آن را برای نیازهای خاص خود سفارشی کنید.
