آموزش HTML

مقدمه

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

HTML چیست؟

HTML مخفف HyperText Markup Language به معنای «زبان نشانه‌گذاری ابرمتن» است. HTML زبان برنامه‌نویسی نیست، بلکه یک زبان نشانه‌گذاری است که برای ساختاردهی محتوای صفحات وب استفاده می‌شود.

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

HTML چگونه کار می‌کند؟

فایل‌های HTML معمولاً دارای پسوند html. هستند. مرورگر پس از دریافت این فایل:

• کد HTML را می‌خواند
• تگ‌ها را تفسیر می‌کند
• خروجی بصری صفحه را نمایش می‌دهد

HTML به تنهایی فقط ساختار را مشخص می‌کند و برای زیبایی ظاهر از CSS و برای منطق و تعامل از JavaScript استفاده می‌شود.

ساختار پایه یک فایل HTML

هر فایل HTML یک ساختار استاندارد دارد. مثال زیر ساده‌ترین فرم یک صفحه HTML است:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>آموزش HTML</title>
</head>
<body>
    <h1>سلام HTML!</h1>
    <p>این اولین صفحه HTML من است.</p>
</body>
</html>

تگ (Tag) در HTML چیست؟

HTML از واحدهایی به نام تگ ساخته شده است. تگ‌ها معمولاً شامل یک تگ باز و یک تگ بسته هستند:

<p>این یک پاراگراف است</p>

بعضی تگ‌ها نیز بدون تگ بسته هستند که به آن‌ها self-closing می‌گویند.

تگ‌های متنی مهم در HTML

تیترها (Headings)

HTML شش سطح تیتر دارد که از h1 تا h6 هستند:

<h1>عنوان اصلی</h1>
<h2>عنوان سطح دوم</h2>
<h3>عنوان سطح سوم</h3>

از نظر سئو، بهتر است در هر صفحه فقط یک تگ h1 استفاده شود.

پاراگراف

<p>این یک متن پاراگراف است.</p>

برجسته‌سازی متن

<strong>متن مهم</strong>
<em>متن تأکیدی</em>

لینک‌ها در HTML

برای ایجاد لینک از تگ a استفاده می‌شود:

<a href="https://example.com">مشاهده سایت</a>

تصاویر در HTML

برای نمایش تصویر از تگ img استفاده می‌شود:

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

ویژگی alt برای سئو و دسترسی‌پذیری اهمیت زیادی دارد.

لیست‌ها در HTML

لیست نامرتب

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

لیست مرتب

<ol>
    <li>یادگیری HTML</li>
    <li>یادگیری CSS</li>
    <li>یادگیری JavaScript</li>
</ol>

کامنت‌نویسی در HTML

برای نوشتن توضیحات داخل کد بدون نمایش در صفحه از کامنت استفاده می‌شود:

<!-- این یک کامنت است -->

بهترین شیوه‌ها در نوشتن HTML

• استفاده از ساختار منظم و تو رفتگی
• نام‌گذاری واضح تگ‌ها و کلاس‌ها
• استفاده از تگ‌های semantic در HTML5
• اجتناب از کدهای تکراری و شلوغ
• تست در مرورگرهای مختلف

جمع‌بندی

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

سوالات متداول

HTML چیست و چه کاربردی دارد؟

HTML زبان نشانه‌گذاری برای ساختاردهی صفحات وب است و در تمام وب‌سایت‌ها استفاده می‌شود.

آیا HTML زبان برنامه‌نویسی است؟

خیر. HTML زبان نشانه‌گذاری است و منطق برنامه‌نویسی ندارد.

برای یادگیری HTML به پیش‌نیاز نیاز داریم؟

خیر. HTML کاملاً مناسب افراد مبتدی است و بدون هیچ پیش‌نیازی می‌توان آن را شروع کرد.

بعد از HTML چه چیزی یاد بگیریم؟

بعد از HTML معمولاً CSS و سپس JavaScript توصیه می‌شود.