آموزش کامل HTML برای مبتدیان — از صفر تا ساخت اولین صفحه وب

اگر می‌خواهید وارد دنیای طراحی وب شوید، HTML اولین و مهم‌ترین زبان برای یادگیری است. این آموزش جامع، شما را از مفاهیم پایه تا ساخت اولین صفحه وب با HTML راهنمایی می‌کند.

🔹 HTML چیست؟

HTML (مخفف HyperText Markup Language) زبان استاندارد ساخت صفحات وب است. این زبان با استفاده از تگ‌ها (Tags) به مرورگر می‌گوید که چگونه محتوا را نمایش دهد.

ویژگی‌های کلیدی HTML:

✅ ساختار اصلی صفحات وب را تعریف می‌کند.
✅ از تگ‌ها برای نمایش متن، تصاویر، لینک‌ها و فرم‌ها استفاده می‌شود.
✅ یک زبان استاتیک است (برای پویایی باید با CSS و JavaScript ترکیب شود).

🔹 ابزارهای مورد نیاز برای شروع

برای نوشتن HTML فقط به دو چیز نیاز دارید:

یک ویرایشگر کد مثل:
- VS Code (توصیه می‌شود)
- Sublime Text
- Notepad++
یک مرورگر مثل Chrome, Firefox, Edge

🔹 ساختار پایه یک سند 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>این یک پاراگراف است.</p>
</body>
</html>

توضیح تگ‌های اصلی:

تگ	توضیح
`<!DOCTYPE html>`	نوع سند را مشخص می‌کند (HTML5).
`<html>`	ریشه سند HTML است.
`<head>`	شامل متا اطلاعات، عنوان و لینک‌های خارجی است.
`<body>`	تمام محتوای قابل مشاهده صفحه در اینجا قرار می‌گیرد.
`<h1>`	عنوان اصلی صفحه (از `<h1>` تا `<h6>`).
`<p>`	پاراگراف متن.

🔹 مهم‌ترین تگ‌های HTML که باید بدانید

1. تگ‌های متنی


<h1>عنوان اصلی</h1>  
<h2>عنوان فرعی</h2>  
<p>این یک پاراگراف است.</p>  
<b>متن پررنگ</b>  
<i>متن کج (ایتالیک)</i>  
<u>متن زیرخط‌دار</u>

2. لینک‌ها (`<a>`)


<a href="https://example.com">این یک لینک است</a>

3. تصاویر (`<img>`)


<img src="image.jpg" alt="توضیح تصویر" width="200">

4. لیست‌ها


<ul>  <!-- لیست نامرتب -->
    <li>آیتم 1</li>
    <li>آیتم 2</li>
</ul>

<ol>  <!-- لیست مرتب -->
    <li>آیتم اول</li>
    <li>آیتم دوم</li>
</ol>

5. جداول (`<table>`)


<table border="1">
    <tr>
        <th>نام</th>
        <th>سن</th>
    </tr>
    <tr>
        <td>علی</td>
        <td>25</td>
    </tr>
</table>

6. فرم‌ها (`<form>`)


<form action="/submit" method="POST">
    <input type="text" placeholder="نام شما">  
    <input type="password" placeholder="رمز عبور">  
    <button type="submit">ارسال</button>
</form>

🔹 تمرین عملی: ساخت اولین صفحه وب

VS Code را باز کنید و یک فایل با نام index.html ایجاد کنید.
کد زیر را در آن قرار دهید:


<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>اولین صفحه من</title>
</head>
<body>
    <h1>خوش آمدید!</h1>
    <p>این اولین صفحه وب من است. 😊</p>
    <a href="https://google.com">برو به گوگل</a>
    <img src="https://via.placeholder.com/150" alt="تصویر نمونه">
</body>
</html>

فایل را ذخیره کنید و با مرورگر باز کنید.

✅ تبریک می‌گویم! شما اولین صفحه HTML خود را ساختید! 🎉

🔹 نکات مهم برای یادگیری بهتر HTML

📌 تگ‌ها را به درستی ببندید (مثلاً <p>متن</p>).
📌 از تگ‌های معنایی HTML5 مثل <header>, <footer>, <article> استفاده کنید.
📌 همیشه از alt برای تصاویر استفاده کنید (برای سئو و دسترسی‌پذیری).
📌 برای پیشرفت، CSS و JavaScript را بعد از HTML یاد بگیرید.

🔹 جمع‌بندی

HTML پایه و اساس طراحی وب است. در این آموزش با ساختار اصلی، تگ‌های مهم و نحوه ساخت یک صفحه وب آشنا شدید. برای تبدیل شدن به یک توسعه‌دهنده وب، ادامه دهید و CSS و JavaScript را نیز یاد بگیرید.

💡 پیشنهاد: برای تمرین بیشتر، یک رزومه آنلاین یا وبلاگ ساده با HTML بسازید!

اگر سوالی دارید، در بخش نظرات بپرسید. 😊🚀