قسمت ۱ – HTML چیست؟ شروع آموزش HTML از صفر

HTML (اچ‌تی‌ام‌ال) زبان نشانه‌گذاری استاندارد برای ساخت صفحات وب است؛ یعنی زبانی که به مرورگر می‌گوید کدام بخش صفحه تیتر است، کدام پاراگراف، کدام لینک و کدام تصویر. اگر می‌خواهید طراحی سایت را از صفر یاد بگیرید، آموزش HTML اولین و مهم‌ترین قدم است. در این قسمت از دوره رایگان آموزش HTML و CSS کدپرس siloow، با مفهوم HTML آشنا می‌شوید، نقش آن را در کنار CSS و جاوااسکریپت می‌فهمید و اولین کد HTML خود را می‌نویسید.

نویسنده: تیم siloow (سیلو سولوشن) — آخرین به‌روزرسانی: آبان ۱۴۰۵

این دوره ۶۰ قسمتی است و از صفر مطلق شروع می‌شود؛ هر روز یک قسمت جدید منتشر می‌شود و در پایان، یک لندینگ پیج راست‌چین و ریسپانسیو کامل می‌سازید. همه مثال‌ها از ابتدا برای زبان فارسی و چیدمان راست‌به‌چپ (RTL) نوشته شده‌اند؛ چیزی که در بیشتر آموزش‌های فارسی جا افتاده است.

HTML چیست؟ تعریف ساده

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

نکته مهم: HTML زبان برنامه‌نویسی نیست. در HTML شرط، حلقه یا محاسبه وجود ندارد؛ فقط ساختار و معنای محتوا را تعریف می‌کند. منطق و تعامل را جاوااسکریپت و ظاهر را CSS بر عهده دارد.

نقش HTML، CSS و جاوااسکریپت در طراحی سایت

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

فناوری	وظیفه	تشبیه	نمونه کار
HTML	ساختار و معنای محتوا	اسکلت ساختمان	تیتر، پاراگراف، لینک، فرم
CSS	ظاهر و چیدمان	نما و دکوراسیون	رنگ، فونت، فاصله، ریسپانسیو
JavaScript	رفتار و تعامل	سیستم برق و آسانسور	منوی بازشونده، اعتبارسنجی پویا

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

وقتی آدرس یک سایت را در مرورگر وارد می‌کنید، این اتفاق‌ها به ترتیب می‌افتد:

1. مرورگر از سرور، فایل HTML صفحه را درخواست می‌کند.
2. سرور فایل را می‌فرستد؛ فایلی متنی که پر از تگ است.
3. مرورگر تگ‌ها را می‌خواند و یک درخت از عناصر به نام DOM می‌سازد.
4. فایل‌های CSS و تصاویر که در HTML معرفی شده‌اند دریافت می‌شوند.
5. صفحه با ظاهر نهایی روی صفحه نمایش رسم می‌شود.

اولین کد HTML شما

کد زیر یک صفحه کامل و استاندارد HTML فارسی است. فعلاً لازم نیست تک‌تک خط‌ها را بفهمید؛ در قسمت‌های بعد همه را جزءبه‌جزء توضیح می‌دهیم. فقط به دو اتریبیوت lang="fa" و dir="rtl" دقت کنید که صفحه را فارسی و راست‌چین می‌کنند.

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

برای اجرا، این کد را در یک فایل متنی با نام index.html ذخیره کنید و روی فایل دوبار کلیک کنید تا در مرورگر باز شود. در قسمت ۲ با ویرایشگر حرفه‌ای VS Code همین کار را راحت‌تر انجام می‌دهیم.

تگ، المان و اتریبیوت به زبان ساده

سه مفهوم پایه‌ای که در تمام این دوره با آن‌ها سروکار دارید:

• تگ (Tag): برچسبی داخل علامت‌های < > مثل <p>. بیشتر تگ‌ها یک تگ باز و یک تگ بسته دارند.
• المان (Element): مجموعه تگ باز، محتوا و تگ بسته؛ مثلاً یک پاراگراف کامل.
• اتریبیوت (Attribute): اطلاعات اضافه‌ای که داخل تگ باز نوشته می‌شود؛ مثل href در لینک یا alt در تصویر.

<p>این یک <strong>پاراگراف</strong> است.</p>
<a href="https://siloow.com">رفتن به سایت siloow</a>
<img src="logo.png" alt="لوگوی سایت">

چرا یادگیری HTML هنوز مهم است؟

با وجود وردپرس، المنتور و ابزارهای هوش مصنوعی، دانستن HTML برای هر کسی که با وب کار می‌کند یک مزیت جدی است:

• پایه همه چیز: هر سایتی، چه وردپرسی و چه اختصاصی، در نهایت به HTML تبدیل می‌شود.
• سئو بهتر: استفاده درست از تیترها، تگ‌های معنایی و متن جایگزین تصاویر مستقیماً روی رتبه گوگل اثر دارد.
• دسترس‌پذیری: HTML درست، سایت را برای کاربران صفحه‌خوان و کم‌بینا قابل‌استفاده می‌کند.
• شروع مسیر شغلی: HTML و CSS دروازه ورود به فرانت‌اند، وردپرس و طراحی رابط کاربری است.
• رفع اشکال سریع: وقتی بدانید صفحه از چه ساخته شده، مشکلات ظاهری سایت خود را سریع پیدا می‌کنید.

نقشه راه دوره آموزش HTML و CSS از صفر تا صد

این دوره در چهار فصل اصلی طراحی شده است و هر فصل روی قبلی بنا می‌شود:

فصل	قسمت‌ها	موضوع	خروجی شما
۱. مبانی HTML	۱ تا ۱۲	ساختار صفحه، متن، لینک، تصویر، لیست، جدول	صفحه‌های محتوایی ساده
۲. HTML پیشرفته	۱۳ تا ۲۲	فرم‌ها، HTML5 معنایی، رسانه، متا تگ و دسترس‌پذیری	صفحه استاندارد و سئوپسند
۳. CSS پایه تا میانی	۲۳ تا ۴۵	سلکتور، رنگ، فونت فارسی، باکس مدل، Flexbox و Grid	چیدمان حرفه‌ای صفحه
۴. CSS مدرن و پروژه	۴۶ تا ۶۰	ریسپانسیو، متغیر، انیمیشن، RTL و پروژه نهایی	لندینگ پیج کامل و ریسپانسیو

پیش‌نیازها و ابزارهای لازم

برای شروع آموزش HTML فقط به این‌ها نیاز دارید:

• یک کامپیوتر با ویندوز، مک یا لینوکس (حتی سیستم‌های ضعیف کافی است).
• یک مرورگر به‌روز مثل Chrome یا Firefox.
• یک ویرایشگر کد؛ ما VS Code را پیشنهاد می‌کنیم که رایگان است.
• روزی ۳۰ تا ۶۰ دقیقه زمان برای خواندن هر قسمت و تمرین.

هیچ دانش برنامه‌نویسی قبلی لازم نیست. اگر تایپ کردن و کار با فایل‌ها را بلدید، آماده‌اید.

تمرین این قسمت

1. یک فایل به نام index.html بسازید و کد «اولین صفحه» را در آن قرار دهید.
2. متن تیتر را به نام خودتان تغییر دهید و صفحه را در مرورگر باز کنید.
3. یک پاراگراف دیگر زیر پاراگراف اول اضافه کنید.
4. dir="rtl" را حذف کنید و تغییر جهت متن را ببینید؛ سپس آن را برگردانید.

جمع‌بندی

در این قسمت یاد گرفتید HTML چیست، چه تفاوتی با CSS و جاوااسکریپت دارد و یک صفحه فارسی ساده چطور نوشته می‌شود. در قسمت ۲ ویرایشگر VS Code را نصب می‌کنیم و اولین پروژه را به شکل حرفه‌ای می‌سازیم. فهرست همه قسمت‌ها را می‌توانید در صفحه کدپرس siloow دنبال کنید. اگر هم به جای یادگیری، به یک سایت آماده و حرفه‌ای نیاز دارید، خدمات طراحی سایت siloow را ببینید.

منابع

• HTML Living Standard — استاندارد رسمی HTML (WHATWG)
• MDN Web Docs — ساختاردهی محتوا با HTML
• web.dev — دوره Learn HTML گوگل

سوالات متداول آموزش HTML