### مقدمه
ایجاد یک صفحه وب ساده با HTML یکی از اولین قدم‌ها در یادگیری طراحی وب است. در این مقاله، ما به شما نشان خواهیم داد که چگونه می‌توانید یک صفحه وب ساده بسازید و عناصر اصلی آن را اضافه کنید.
### مراحل ایجاد یک صفحه وب ساده
#### 1. آماده‌سازی محیط
برای شروع، شما به یک ویرایشگر متن نیاز دارید. می‌توانید از ویرایشگرهای ساده مانند Notepad (در ویندوز) یا TextEdit (در مک) استفاده کنید. همچنین می‌توانید از ویرایشگرهای کد مانند Visual Studio Code یا Sublime Text بهره ببرید.
#### 2. ایجاد فایل HTML
یک فایل جدید با پسوند `.html` ایجاد کنید. به عنوان مثال، می‌توانید نام آن را `index.html` بگذارید.
#### 3. نوشتن ساختار پایه HTML
در فایل `index.html`، ساختار پایه HTML را بنویسید. این ساختار شامل تگ‌های اصلی HTML است.
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>صفحه وب ساده من</title>
</head>
<body>
<h1>سلام به وب‌سایت من!</h1>
<p>این یک صفحه وب ساده است که با HTML ساخته شده است.</p>
</body>
</html>
```
#### 4. توضیح تگ‌ها
- **`<!DOCTYPE html>`**: این خط به مرورگر می‌گوید که این یک سند HTML5 است.
- **`<html lang="fa">`**: تگ ریشه HTML که زبان صفحه را مشخص می‌کند.
- **`<head>`**: شامل اطلاعات متا و عنوان صفحه است.
- **`<meta charset="UTF-8">`**: مشخص می‌کند که از کدگذاری UTF-8 استفاده می‌شود.
- **`<title>`**: عنوان صفحه که در نوار عنوان مرورگر نمایش داده می‌شود.
- **`<body>`**: محتوای اصلی صفحه را در بر می‌گیرد.
#### 5. افزودن عناصر بیشتر
حالا می‌توانیم عناصر بیشتری به صفحه اضافه کنیم. به عنوان مثال، می‌توانیم یک تصویر و یک لینک اضافه کنیم.
```html
<body>
<h1>سلام به وب‌سایت من!</h1>
<p>این یک صفحه وب ساده است که با HTML ساخته شده است.</p>
<img src="image.jpg" alt="توضیح تصویر" width="300">
<p>برای اطلاعات بیشتر به <a href="https://www.example.com">این لینک</a> مراجعه کنید.</p>
</body>
```
#### 6. توضیح عناصر جدید
- **`<img>`**: برای نمایش تصویر استفاده می‌شود. ویژگی `src` آدرس تصویر و `alt` توضیحی برای تصویر است.
- **`<a>`**: برای ایجاد لینک به یک صفحه دیگر یا وب‌سایت استفاده می‌شود. ویژگی `href` آدرس لینک را مشخص می‌کند.
#### 7. ذخیره و مشاهده صفحه
پس از نوشتن کد، فایل را ذخیره کنید و آن را در مرورگر خود باز کنید. برای این کار، کافی است روی فایل `index.html` دوبار کلیک کنید یا آن را در مرورگر بکشید و رها کنید.
#### 8. افزودن استایل با CSS (اختیاری)
برای زیباتر کردن صفحه، می‌توانید از CSS استفاده کنید. می‌توانید CSS را در تگ `<head>` اضافه کنید:
```html
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
text-align: center;
}
h1 {
color: #007BFF;
}
</style>
```
### نتیجه‌گیری
تبریک می‌گویم! شما اکنون یک صفحه وب ساده با HTML ایجاد کرده‌اید. این صفحه شامل عنوان، پاراگراف، تصویر و لینک است. با یادگیری بیشتر در مورد HTML و CSS، می‌توانید صفحات وب پیچیده‌تری بسازید و طراحی‌های جذاب‌تری ایجاد کنید.
