طراحی سایت

آموزش HTML از صفر

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

  • درس ۲ از ۱۲
  • مقدماتی
  • رایگان، بدون ثبت نام

ساختار یک صفحه، از ریشه تا شاخه ها

htmlریشه سند و جایی که زبان و جهت صفحه اعلام می شود

  • head

    کدگذاری حروف، عنوان صفحه، تنظیم نمایش روی موبایل. چیزی از این بخش روی صفحه چاپ نمی شود.

    دیده نمی شود

  • body

    هر چیزی که کاربر می بیند اینجاست، و سه شاخه بعدی داخل همین می نشینند.

    دیده می شود

  • header و nav

    سربرگ و منوی سایت. صفحه خوان از روی منو می پرد، چون می داند منو است.

  • main

    محتوای یکتای همین صفحه، یکی و فقط یکی، و تیتر h1 داخل آن.

  • footer

    پاورقی سایت: تماس، قوانین، لینک های تکراری هر صفحه.

مرورگر همین ساختار را در حافظه می سازد. هر تگی که باز بماند، شاخه را جای دیگری می بندد و صفحه چیزی می شود که ننوشته اید.

آخرین بررسی: فکت ها و نام ابزارهای این درس در همین تاریخ با منابعشان بازبینی شده اند.

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

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

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

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

یک باور غلط رایج هم همین جا تمام می شود: HTML زبان برنامه نویسی نیست. شرط و حلقه و متغیر ندارد، چیزی را حساب نمی کند و تصمیم نمی گیرد. توصیف می کند. همین که ساده است دلیل ماندگاری اش است.

اولین صفحه: یک فایل، چند خط، و مرورگر

هیچ نرم افزار خاصی لازم نیست. یک ویرایشگر متن ساده کافی است، حتی Notepad، و فایل را با پسوند .html ذخیره می کنید. بعدا سراغ ویرایشگرهای حرفه ای بروید؛ الان فقط جلوی راه است.

این کل چیزی است که یک صفحه معتبر لازم دارد:

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>اولین صفحه من</title>
</head>
<body>
  <h1>سلام</h1>
  <p>این اولین صفحه ای است که خودم ساخته ام.</p>
</body>
</html>

فایل را ذخیره کنید و با دوبار کلیک بازش کنید؛ مرورگر بازش می کند، بدون هیچ سروری. چهار خط اولش را هم بی دلیل ننوشته ایم. doctype به مرورگر می گوید با قواعد امروزی کار کند نه با حالت سازگاری قدیمی. lang و dir زبان و جهت را مشخص می کنند و برای فارسی نبودشان یعنی متن چپ چین و صفحه خوانی که با لهجه اشتباه می خواند. charset نبودش یعنی حروف فارسی به هم می ریزند. و viewport نبودش یعنی صفحه روی موبایل کوچک و تودرتو نمایش داده می شود.

حالا یک کلمه را عوض کنید و صفحه را refresh کنید. همین حلقه کوتاه، نوشتن و دیدن، تمام روش یادگیری HTML است. چیزی برای اجرا کردن یا کامپایل کردن وجود ندارد.

از فایل خالی تا صفحه ای که در مرورگر باز می شود

  1. یک فایل متنی بسازید

    اسمش index.html باشد و پسوندش هم واقعا html، نه html.txt.

    ۱

  2. اسکلت را بنویسید

    doctype، تگ html با زبان و جهت، head و body. همین.

    ۲

  3. با مرورگر بازش کنید

    دوبار کلیک کافی است. هیچ سروری در کار نیست.

    ۳

  4. عوض کنید و دوباره ببینید

    ذخیره، refresh، نگاه. همین حلقه است که مهارت را می سازد.

    ۴

  5. اعتبارسنجی کنید

    فایل را به اعتبارسنج W3C بدهید تا تگ های بسته نشده را نشانتان بدهد.

    ۵

این پنج قدم روی کامپیوتر خودتان اجرا می شود و هیچ هاست و دامنه ای لازم ندارد. انتشار روی اینترنت مرحله بعدی و جدایی است.

کدام تگ برای کدام کار؟ اسکلت معنایی صفحه

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

اسکلتی که تقریبا هر صفحه ای دارد این است:

<body>
  <header>
    <nav>...</nav>
  </header>

  <main>
    <h1>عنوان صفحه</h1>
    <article>
      <h2>یک بخش</h2>
      <p>متن.</p>
    </article>
  </main>

  <footer>...</footer>
</body>

چند قاعده که همین اسکلت را نگه می دارند: در هر صفحه یک h1 و فقط یکی، چون تیتر اصلی صفحه یکی است. سطح تیترها به ترتیب پایین بیایند و هیچ وقت برای کوچک تر شدن فونت از h2 به h4 نپرید؛ اندازه کار CSS است. در هر صفحه یک main، که همان محتوای یکتای آن صفحه است و منو و فوتر داخلش نمی روند.

برای متن هم چند تگ کوچک هست که اغلب اشتباه استفاده می شوند. strong یعنی این مهم است و em یعنی روی این کلمه تاکید هست؛ اگر فقط ضخیم یا کج شدن می خواهید بدون اینکه معنایی داشته باشد، آن کار CSS است. a جایی است که کاربر به صفحه دیگری می رود و button جایی است که در همین صفحه کاری انجام می شود. جابه جا کردن این دو، رایج ترین اشتباه معنایی وب است.

فهرست کامل تگ ها را حفظ نکنید. مرجع عناصر HTML در MDN همیشه باز است و کسی که ده سال است این کار را می کند هم روزی چند بار بازش می کند.

همان صفحه، با تگ درست و با div خالی

برگه بازبینی اسکلت صفحهHTML

با تگ معنایی

  • صفحه خوان می گوید اینجا منوی سایت است و می شود از رویش پرید
  • تیترها یک فهرست مطالب واقعی می سازند
  • دکمه با Tab و Enter کار می کند، بدون یک خط کد اضافه
  • خزنده موتور جستجو می فهمد محتوای اصلی کدام تکه است

با div خالی

  • همه چیز یک تکه بی نام است و چیزی برای پریدن وجود ندارد
  • برای همان کار باید ویژگی های ARIA اضافه شود
  • دکمه فقط با ماوس کار می کند و با کیبورد نه
  • ساختار فقط در ذهن نویسنده کد وجود دارد

هر دو ستون در مرورگر یک شکل دیده می شوند. تفاوت جایی معلوم می شود که کسی صفحه را نبیند و فقط بشنود.

چرا دسترس پذیری از روز اول، نه بعدا؟

چون بعدا گران است. اگر صفحه را با تگ درست بسازید، بخش بزرگی از دسترس پذیری مجانی به دست می آید؛ اگر با div بسازید و بعد بخواهید درستش کنید، باید همان معنی را با ویژگی های اضافه دوباره بسازید، که هم بیشتر طول می کشد و هم شکننده تر است.

چهار چیز که همان روز اول باید عادت شوند. اول متن جایگزین تصویر: alt برای کسی نوشته می شود که تصویر را نمی بیند، پس باید بگوید در تصویر چه خبر است، نه اینکه کلمه کلیدی داخلش چپانده شود. اگر تصویر فقط تزئینی است، alt="" خالی درست است و حذف کردن alt غلط. دوم ترتیب تیترها، که برای صفحه خوان همان نقش فهرست مطالب را دارد. سوم برچسب فرم: هر input باید یک label متصل داشته باشد، وگرنه کاربر می شنود «ویرایش متن» و نمی داند چه چیزی باید بنویسد. چهارم کار با کیبورد: اگر با Tab نمی شود روی یک دکمه رفت و با Enter فعالش کرد، آن چیز دکمه نیست، فقط شبیه دکمه است.

یک قاعده هست که تمام این ها را خلاصه می کند و از خود W3C می آید: اگر عنصر HTML بومی برای کاری وجود دارد، از همان استفاده کنید و ARIA اضافه نکنید. سند Using ARIA این را اولین قاعده اش گذاشته، و دلیلش هم این است که ARIA اشتباه از نبودنش بدتر است: به صفحه خوان چیزی را قول می دهد که مرورگر انجام نمی دهد.

و حد این کار را هم بدانید: ابزارهای خودکار همه چیز را نمی سنجند. راهنمای Easy Checks خود W3C روی همین تاکید دارد که بررسی خودکار جای بررسی انسانی را نمی گیرد. اینکه alt وجود دارد را ماشین می فهمد؛ اینکه متنش تصویر را واقعا توصیف می کند یا نه، فقط شما می فهمید.

چهار اشتباه رایج، و اینکه خودتان چطور پیدایشان کنید

اولی انتخاب سطح تیتر بر اساس اندازه فونت. کسی h3 می گذارد چون h2 برایش بزرگ است. نتیجه یک فهرست مطالب به هم ریخته برای صفحه خوان و موتور جستجو است، در حالی که مشکل با دو خط CSS حل می شد.

دومی دکمه ای که دکمه نیست: یک div با رویداد کلیک. با ماوس کار می کند و با کیبورد نه.

سومی متن جایگزین بی معنی، مثل alt="عکس" یا اسم فایل. این بدتر از خالی گذاشتنش است، چون کاربر را وادار می کند به چیزی گوش بدهد که هیچ اطلاعاتی ندارد.

چهارمی تگ های بسته نشده. مرورگر معمولا خودش جمعشان می کند و صفحه سالم به نظر می رسد، تا جایی که یک بخش ناگهان داخل بخش دیگر می افتد و ساعت ها دنبال دلیلش می گردید.

سه ابزار برای پیدا کردن این ها کافی است، و هر سه رایگان اند. اعتبارسنج W3C آدرس یا فایل شما را می گیرد و خطاهای ساختاری را خط به خط نشان می دهد؛ همان جا تگ بسته نشده پیدا می شود. ابزار توسعه دهنده مرورگر، که با F12 باز می شود، ساختار واقعی صفحه را بعد از تفسیر مرورگر نشان می دهد و معمولا تفاوتش با آنچه نوشته اید افشاگر است. و ساده ترینشان، خواندن کد منبع صفحه های دیگر: هر سایتی که خوب ساخته شده باشد یک درس رایگان است.

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

مسیر سریع با هوش مصنوعی

مدل های زبانی HTML را سریع و تقریبا همیشه بدون خطای نحوی می نویسند. کاری که نمی کنند تصمیم گرفتن درباره ساختار صفحه است، و همان جاست که خروجی معمولا می لنگد: تیتر سطح اشتباه، دکمه ای که <code>div</code> است، و متن جایگزینی که برای تصویری نوشته شده که مدل هرگز ندیده. پس مسیر سریع تولید کردن نیست، تولید کردن و بعد بازرسی کردن است. برای این کار یک مدل سریع و ارزان کافی است چون کار مکانیکی است؛ انتخاب فعلی ما در <a class="text-link" href="/ai/">بخش هوش مصنوعی</a> هست.

  1. بخش های صفحه را روی کاغذ بنویسید، به ترتیبی که خواننده باید ببیند. این تنها قدمی است که مدل نمی تواند جای شما بردارد، چون او نمی داند کدام حرف مهم تر است.
  2. نسخه پایین را اجرا کنید و خروجی را در همان فایل index.html بگذارید.
  3. فایل را به اعتبارسنج W3C بدهید. خطاهای ساختاری را قبل از هر چیز دیگری تمام کنید.
  4. چهار چیز را دستی چک کنید که ابزار خودکار جوابشان را نمی داند: یک h1 و ترتیب درست تیترها، متن جایگزین هر تصویر، برچسب هر فیلد فرم، و گشتن کل صفحه فقط با Tab.
  5. متن ها را خودتان بنویسید. هر جا مدل TODO گذاشته، جای شماست؛ متنی که مدل برای تصویر ندیده می نویسد، حدس است نه توصیف.

نسخه آماده کپی

نقش: کسی که HTML معنایی می نویسد، بدون هیچ فریمورک و بدون CSS.

صفحه ای که می خواهم:
موضوع: {موضوع صفحه}
بخش ها به ترتیب: {فهرست بخش ها}
زبان و جهت: فارسی، راست به چپ

قواعد خروجی:
- فقط HTML بده. نه CSS، نه جاوااسکریپت، نه کتابخانه.
- از تگ های معنایی استفاده کن: header, nav, main, article, section, footer. تا وقتی تگ معنادار وجود دارد div نگذار.
- دقیقا یک h1، و سطح تیترها به ترتیب پایین بیاید. سطح تیتر را برای اندازه فونت انتخاب نکن.
- روی تگ html صفت های lang و dir را بگذار.
- برای کاری که در همین صفحه انجام می شود button بگذار، نه div کلیک شونده. برای رفتن به صفحه دیگر a.
- هر input یک label متصل داشته باشد.
- هیچ ویژگی ARIA اضافه نکن، مگر جایی که هیچ تگ HTML معادلی وجود نداشته باشد. اگر چنین جایی بود، در انتها بنویس چرا.
- برای هر تصویر به جای متن جایگزین ساختگی بنویس alt="TODO" تا خودم پر کنم.
- هیچ متن، عدد، نام یا ادعایی که در ورودی نیست ننویس. جای متن {...} بگذار.

بعد از کد، در سه خط بگو چه تصمیم های ساختاری گرفته ای و کجا شک داشته ای.

قبل از اعتماد به خروجی: آخرین قدم را حذف نکنید: متن جایگزین تصویرها و متن دکمه ها را انسان می نویسد. مدل تصویر شما را ندیده و اگر مجبورش کنید، توصیفی می سازد که قابل قبول به نظر می رسد و اشتباه است. بازرسی خودکار هم فقط بخشی از کار است؛ راهنمای Easy Checks در W3C همین را می گوید. تست کیبورد و خواندن متن جایگزین با چشم خودتان جایگزین ندارد.

هوش مصنوعی در این کار

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

ابزارهایی که واقعا کمک می کنند

  • Claude برای توضیح خط به خط یک قطعه کد و بازنویسی معنایی آن خوب جواب می دهد. ایران در فهرست کشورهای پشتیبانی شده انتروپیک نیست؛ این را از صفحه خود انتروپیک خوانده ایم.
  • Gemini برای ساختن اسکلت اولیه و سوال های پایه ای کافی است و فارسی را خوب می فهمد. صفحه خود گوگل می گوید اپ وب جمنای در بیش از دویست و سی کشور و منطقه کار می کند و ایران در آن فهرست نیست.
  • ChatGPT رایج ترین انتخاب و برای همین کارها قابل قبول. ما هنوز صفحه ای برایش در بخش هوش مصنوعی نداریم، پس درباره دسترسی و قیمتش اینجا ادعایی نمی کنیم.

کجا نتیجه معکوس می دهد

خطر اینجا نحوی نیست، معنایی است و بی سر و صدا رد می شود. کدی که مدل می دهد معمولا معتبر است و در مرورگر هم درست دیده می شود، ولی سه چیز در آن مرتب تکرار می شود: سطح تیتر بر اساس ظاهر انتخاب شده، دکمه ای که در واقع div است، و متن جایگزینی که برای تصویری نوشته شده که مدل ندیده است. مورد چهارم از این ها ظریف تر است: ویژگی های ARIA اضافه که به نظر حرفه ای می رسند و در عمل چیزی را خراب می کنند. اولین قاعده سند Using ARIA خود W3C همین است که اگر تگ HTML بومی وجود دارد از همان استفاده کنید و ARIA نگذارید. و راهنمای Easy Checks هم می گوید بررسی خودکار جای بررسی انسانی را نمی گیرد. پس موضع ما ساده است: تولید با مدل، بازرسی با آدم. برای اینکه بدانید هر ابزار از ایران چطور قابل پرداخت است، راهنمای خرید را ببینید.

منبع ها: W3C: Using ARIA, first rule W3C WAI: Easy Checks Anthropic: supported countries Google: where Gemini Apps are available

حد این توصیه

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

از تجربه خود ما

همین سایتی که رویش هستید مثال خودمان است و می توانید کدش را ببینید. صفحه های rgb.ir از قالب اختصاصی خودمان با فایل های PHP ساخته می شوند و هیچ افزونه صفحه سازی روی این سایت فعال نیست، پس چیزی که در view source می بینید همان چیزی است که ما نوشته ایم. روزی که این درس بررسی شد، صفحه اصلی دقیقا یک تگ h1 داشت، یک main، و بیست و شش article و پانزده section برای بلوک های محتوا. قاعده یک h1 و ترتیب درست تیترها هم پیش ما سلیقه نیست، در همان فایل قواعد نوشتاری سایت نوشته شده است. و یک صداقت لازم: همان صفحه حدود صد و شصت div هم دارد. معنایی نوشتن یعنی جایی که تگ معنادار هست از آن استفاده کنید، نه اینکه div را از زبان حذف کنید؛ برای چیدمان صرف، div هنوز درست ترین انتخاب است.

سوال هایی که واقعا پرسیده می شوند

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

نه. زبان نشانه گذاری است: توصیف می کند و اجرا نمی شود. شرط، حلقه و متغیر ندارد و چیزی حساب نمی کند. همین که برنامه نویسی نیست، دلیل خوبی است برای شروع کردن از آن.

برای شروع چه نرم افزاری لازم دارم؟

یک ویرایشگر متن و یک مرورگر، که هر دو روی کامپیوترتان هست. بعد از چند صفحه اول، ویرایشگری مثل VS Code کار را راحت تر می کند چون تگ ها را رنگی می کند و بسته نشده ها را نشان می دهد، ولی روز اول لازم نیست.

حالا که هوش مصنوعی HTML می نویسد، یاد گرفتنش لازم است؟

برای نوشتنش نه، برای خواندنش بله. کد تولید شده معمولا معتبر است ولی تصمیم های ساختاری اش را کسی باید بررسی کند؛ اگر ندانید تیتر و دکمه و متن جایگزین باید چه شکلی باشند، هیچ راهی ندارید بفهمید خروجی درست است یا فقط قشنگ است.

ادامه یادگیری