پروژهٔ نهایی: انتشار زنده — ترم ۶ آیرو

در این فصل چه می‌سازی#

سایتت ساخته شد، ولی هنوز فقط روی کامپیوترِ توست. این فصل — آخرین فصلِ دوره — آن را به اینترنت می‌برد تا هر کسی در دنیا با یک آدرس بازش کند. اول به صفحه متادیتا و پیش‌نمایشِ اجتماعی می‌دهی تا وقتی لینکش را جایی می‌فرستی، به‌جای یک خطِ خشک، یک کارتِ قشنگ با عنوان و خلاصه و تصویر دیده شود. بعد فایل‌ها را از آزمایشگاه به کامپیوترِ خودت و یک ویرایشگرِ واقعی می‌بری، و بالاخره سایت را روی یک میزبانِ رایگان منتشر می‌کنی. مفهومِ CSSِ تازه‌ای نیست؛ چند تگِ ساده در <head> و یک جریانِ کارِ واقعی.

آخر این فصل می‌توانی:

به هر صفحه meta description و تگ‌های og:* بدهی تا پیش‌نمایشِ اشتراک قشنگ شود
یک favicon و یک theme-color به سایت اضافه کنی
فایل‌ها را از آزمایشگاه به کامپیوترِ خودت و VS Code منتقل کنی
سایت را روی یک میزبانِ static منتشر کنی و آدرسِ زنده‌اش را به اشتراک بگذاری

قبل از شروع#

از فصل ۱۰: سایتِ نمونه‌کارِ آماده‌ات (index.html و styles.css).
از ترم ۱ فصل ۱: <head> و <title> — جایی که این تگ‌های تازه هم می‌نشینند.

فقط یک مرورگر لازم داری، یا همین آزمایشگاه.

۱. صفحه‌ات کجا زندگی می‌کند؟#

تا حالا صفحه‌ات فقط روی کامپیوترِ خودت باز می‌شد. انتشار یعنی یک نسخه از فایل‌ها را روی یک کامپیوترِ همیشه‌روشن (یک «میزبان») بگذاری که به اینترنت وصل است، تا هر کسی با یک آدرس بازش کند. قبل از این کار، دو کارِ کوچک ولی مهم مانده که سایت را آمادهٔ دیده‌شدن می‌کنند: متادیتا و آیکون.

۲. متادیتا: توضیح و پیش‌نمایشِ اجتماعی#

فرض کن آدرسِ سایتت را برای یک دوست در یک پیام‌رسان می‌فرستی. انتظار داری یک کارتِ قشنگ ظاهر شود؛ ولی چیزی که می‌آید یک خطِ خاکستریِ بی‌رمق است — نه عنوانی، نه خلاصه‌ای، نه تصویری. چرا؟ چون پیام‌رسان سراغِ <head> صفحه‌ات رفت و دنبالِ یک توضیح و چند تگِ پیش‌نمایش گشت و هیچ‌کدام را پیدا نکرد.

🔧 اگر کار نکرد: پیش‌نمایشِ لینک خالی و زشت است؟ چون صفحه‌ات این تگ‌ها را ندارد. دو چیز اضافه کن. اول <meta name="description">: یک جملهٔ کوتاه که می‌گوید صفحه دربارهٔ چیست — همان که موتورِ جست‌وجو و پیام‌رسان به‌عنوان خلاصه نشان می‌دهند. بعد تگ‌های Open Graph که با og: شروع می‌شوند و دقیقاً همان کارت را می‌سازند: og:title (عنوان)، og:description (خلاصه)، og:image (تصویرِ کارت) و og:url (آدرسِ صفحه). این‌ها را داخلِ <head> بگذار:

<meta name="description" content="نمونه‌کارهای پروانه پارسا، سازندهٔ صفحه‌های وب با HTML و CSS.">

<meta property="og:type" content="website">
<meta property="og:title" content="پروانه پارسا — نمونه‌کارها">
<meta property="og:description" content="نمونه‌کارهای پروانه پارسا، سازندهٔ صفحه‌های وب با HTML و CSS.">
<meta property="og:image" content="https://parvaneh.example/cover.jpg">
<meta property="og:url" content="https://parvaneh.example/">

حالا همان لینک، یک کارتِ کامل می‌سازد: عنوان، خلاصه و تصویر. آدرسِ parvaneh.example فعلاً جای‌نگه‌دار است؛ وقتی سایتت را منتشر کردی و آدرسِ واقعی‌ات را گرفتی، این دو خط را با همان آدرس عوض می‌کنی.

💡 نکته: description را کوتاه و واقعی بنویس — حدودِ یک جمله. این متن جایی روی صفحه دیده نمی‌شود، ولی همان است که موتورِ جست‌وجو زیرِ عنوانِ سایتت نشان می‌دهد. یک description خوب یعنی آدم‌ها روی لینکِ تو کلیک می‌کنند نه لینکِ بغلی.

۳. favicon و theme-color#

دو تزئینِ کوچکِ دیگر هم سایت را حرفه‌ای می‌کنند. favicon همان آیکونِ ریزی است که مرورگر کنارِ عنوانِ صفحه، روی زبانه (tab) نشان می‌دهد؛ با یک تگ به مرورگر می‌گویی کدام فایل را به‌عنوانِ آیکون بردارد. و theme-color رنگی است که مرورگرِ موبایل، نوارِ بالای خودش را با آن هم‌رنگ می‌کند تا سایتت یکدست‌تر دیده شود. هر دو یک خط‌اند، داخلِ <head>:

<meta name="theme-color" content="#2a6b93">
<link rel="icon" href="favicon.svg">

حالا کلِ <head> صفحهٔ آماده‌ات این شکلی است — این نسخهٔ نهاییِ index.html است:

<!-- index.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>
    <meta name="description" content="نمونه‌کارهای پروانه پارسا، سازندهٔ صفحه‌های وب با HTML و CSS.">
    <meta name="theme-color" content="#2a6b93">

    <meta property="og:type" content="website">
    <meta property="og:title" content="پروانه پارسا — نمونه‌کارها">
    <meta property="og:description" content="نمونه‌کارهای پروانه پارسا، سازندهٔ صفحه‌های وب با HTML و CSS.">
    <meta property="og:image" content="https://parvaneh.example/cover.jpg">
    <meta property="og:url" content="https://parvaneh.example/">

    <link rel="icon" href="favicon.svg">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header class="site-header">
      <a class="logo" href="index.html">پروانه پارسا</a>
      <nav>
        <ul class="menu">
          <li><a href="index.html">خانه</a></li>
          <li><a href="#works">نمونه‌کارها</a></li>
          <li><a href="#about">درباره</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <section class="intro">
        <h1>سلام، من پروانه‌ام</h1>
        <p>سازندهٔ صفحه‌های وب. این سایت آمادهٔ انتشار است.</p>
      </section>
    </main>

    <footer class="site-footer">
      <p>ساختهٔ پروانه پارسا — ۱۴۰۵</p>
    </footer>
  </body>
</html>

✅ چک کن: DevTools را باز کن و در پنلِ Elements، داخلِ <head>، تگ‌های تازه را ببین: description، theme-color، پنج تگِ og: و link آیکون. متادیتا روی بدنهٔ صفحه چیزی عوض نمی‌کند — کارش برای مرورگر و موتورِ جست‌وجو و پیام‌رسان است، نه برای چشمِ بازدیدکننده.

🤖 با AI: از دستیار AI ات بخواه «برای این صفحه یک meta description کوتاه و گیرا در حدِ یک جمله بنویس» و متنِ صفحه‌ات را هم بده. جوابش معمولاً خوب است، ولی همیشه چک کن که واقعاً صفحهٔ تو را توصیف کند نه یک جملهٔ کلیشه‌ایِ کلی؛ توصیفی که به هر سایتی بخورد، به هیچ سایتی نمی‌خورد.

۴. از آزمایشگاه به کامپیوترِ خودت#

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

روی کامپیوترت یک پوشهٔ تازه بساز، مثلاً my-site.
VS Code را نصب و باز کن — یک ویرایشگرِ متنِ رایگان که سازندگانِ وب واقعاً با آن کار می‌کنند — و پوشهٔ my-site را در آن باز کن.
دو فایل بساز با همین نام‌ها: index.html و styles.css. کدِ هرکدام را از آزمایشگاه در فایلِ هم‌نامش کپی کن.
روی index.html دوبار کلیک کن تا در مرورگر باز شود.

✅ چک کن: صفحه در مرورگرِ خودت، بیرون از آزمایشگاه، دقیقاً مثلِ قبل باز می‌شود. اگر بی‌استایل و لخت باز شد، یعنی index.html فایلِ styles.css را پیدا نکرده — مطمئن شو هر دو در یک پوشه‌اند و اسمِ داخلِ <link rel="stylesheet" href="styles.css"> دقیقاً با نامِ فایل یکی است.

۵. انتشار روی میزبانِ static#

سایتِ تو فقط از فایل‌های آماده ساخته شده (HTML و CSS، بدونِ سرورِ خاص)، پس یک میزبانِ static می‌خواهد — و ساده‌ترین‌هایش رایگان‌اند. دو راهِ رایج:

Netlify Drop: صفحه‌اش را باز کن و پوشهٔ my-site را با موس بکش و رها کن روی آن. چند ثانیه بعد، یک آدرسِ زندهٔ اینترنتی می‌گیری که می‌توانی برای هر کسی بفرستی.
GitHub Pages: فایل‌هایت را در یک مخزنِ GitHub می‌گذاری و گزینهٔ Pages را روشن می‌کنی تا از همان مخزن، سایت را منتشر کند.

جریانِ انتشار: یک پوشه با دو فایلِ صفحه و استایل که با یک فلش به سمتِ یک کرهٔ اینترنت کشیده می‌شود و آن‌سو به‌صورتِ یک صفحهٔ زنده با یک نوارِ آدرسِ بالای آن ظاهر می‌شود

GitHub Pages به Git وصل است — همان ابزارِ نسخه‌سپاریِ کد که قدمِ طبیعیِ بعدیِ هر سازندهٔ وب است؛ فعلاً فقط اسمش را بشناس، در مسیرِ بعدی سراغش می‌روی.

۶. چک‌لیستِ پیش از انتشار#

قبل از اینکه لینک را دستِ کسی بدهی، این فهرست را یک‌بار برو — هرکدام درسی از همین دوره است:

هر صفحه یک <title> معنادار و یک <meta name="description"> دارد.
تگ‌های og:title، og:description و og:image پر شده‌اند.
یک favicon و یک theme-color گذاشته‌ای.
<meta name="viewport"> سرِ جایش است و صفحه در موبایل درست است.
هر تصویر یک alt معنادار دارد.
صفحه در تمِ روشن و تیره خواناست.
با کلیدِ Tab می‌شود کلِ صفحه را پیمایش کرد.
اسکرولِ افقیِ ناخواسته ندارد (همان شکارِ فصل قبل).
لینک‌های بینِ صفحه‌ها واقعاً کار می‌کنند.

واژه‌های تازهٔ این فصل#

کلمه	تلفظ به حروف فارسی	یعنی چه
meta description	متا دیسکریپشِن	یک جملهٔ خلاصهٔ صفحه در `<head>` که موتورِ جست‌وجو نشان می‌دهد
Open Graph	اوپِن گراف	تگ‌های `og:` که پیش‌نمایشِ لینک (کارتِ اشتراک) را می‌سازند
favicon	فَویکون	آیکونِ ریزِ صفحه روی زبانهٔ مرورگر
theme-color	تِم‌کالر	رنگی که مرورگرِ موبایل نوارِ بالایش را با آن هم‌رنگ می‌کند
static host	استاتیک هاست	میزبانی که فقط فایل‌های آمادهٔ سایت را سرو می‌کند
VS Code	وی‌اِس‌کد	یک ویرایشگرِ متنِ رایگانِ پرکاربردِ سازندگانِ وب
Netlify	نِت‌لیفای	یک میزبانِ static که با کشیدن‌ورهاکردنِ پوشه سایت را منتشر می‌کند
GitHub Pages	گیت‌هاب پیجز	انتشارِ سایتِ static از روی یک مخزنِ GitHub
Git	گیت	ابزارِ نسخه‌سپاریِ کد؛ قدمِ بعدیِ مسیرِ تو

تمرین‌ها

اول خودت فکر کن یا امتحان کن — بعد اینجا را باز کن.

در فصل بعد#

اینجا پایانِ تاروپود است — و تو حالا یک سازندهٔ وب واقعی هستی: از یک صفحهٔ خالی تا یک سایتِ چندصفحه‌ایِ semantic، responsive، با dark mode و component، که آن را اشکال‌زدایی کردی و روی اینترنت منتشرش کردی. یک چیز مانده که HTML و CSS به‌تنهایی نمی‌توانند: وقتی کاربر روی چیزی کلیک می‌کند، صفحه پاسخ بدهد و عوض شود. این کارِ JavaScript است. ترمِ بعد — پل به JavaScript — یک پلِ کوچک به آن دنیاست: با حداقلِ کد، همان صفحه‌هایی که ساختی را تعاملی می‌کنی. تارَت را بافتی و پودت را زدی؛ حالا وقتِ جان‌دادن به پارچه است.

به آخر این فصل رسیدی!

اگر ساختی و جواب داد، این دکمه مال توست.