ساخت سایت با هوش مصنوعی؛ یک صفحهٔ فارسی را از صفر منتشر کن

قبل از کدنویسی: صفحه باید چه کاری انجام بدهد؟

مخاطب باید در چند ثانیه بفهمد چه می‌کنی، یک نمونه ببیند و راه تماس را پیدا کند. برای نسخهٔ اول، همین سه کار کافی است. متن‌های «بهترین خدمات با بالاترین کیفیت» را با یک کار مشخص عوض کن: «صفحهٔ معرفی فارسی برای کسب‌وکار کوچک می‌سازم».

از ساروی ابتدا شرح صفحه بخواه: مخاطب، سه بخش ضروری و اقدام اصلی. وقتی این‌ها معلوم‌اند، تولید کد کمتر به حدس وابسته است. فایل نمونهٔ این مقاله فرم تماس ساختگی ندارد؛ دکمهٔ تماس یک لینک ایمیل است که باید نشانی نمونه‌اش را تغییر بدهی.

فایل را باز کن، بعد پوشهٔ پروژه را بساز

starter-portfolio.html را دانلود کن و در مرورگر باز کن. این صفحه برای نمایش به سرور نیاز ندارد چون فقط HTML و CSS دارد. برای توسعه، پوشه‌ای بساز و نام فایل را index.html بگذار.

ویرایشگر متن کد را عوض می‌کند و مرورگر نتیجه را نشان می‌دهد. بعد از ذخیره، صفحه را تازه‌سازی کن. اگر تغییر دیده نمی‌شود، اول مطمئن شو همان فایل را باز کرده‌ای. از ابتدا چند نسخهٔ هم‌نام در پوشه‌های مختلف نساز.

my-portfolio/
  index.html
  .nojekyll

HTML اسکلت معنایی صفحه است

تگ header برای معرفی و منو، main برای محتوای اصلی، section برای بخش موضوعی و footer برای پایان صفحه است. h1 فقط عنوان اصلی این صفحه است. برای هر بخش مهم یک h2 داریم. این ساختار هم به خواننده و هم به ابزارهای دسترس‌پذیری کمک می‌کند.

در html، زبان fa و جهت rtl را مشخص می‌کنیم. meta viewport باعث می‌شود مرورگر موبایل عرض واقعی دستگاه را مبنا بگیرد. بدون آن، حتی CSS مناسب هم ممکن است کوچک و دور دیده شود.

<!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>
  <header>نام و منو</header>
  <main>
    <h1>چه کاری برای چه کسی انجام می‌دهم؟</h1>
    <section id="work"><h2>نمونه‌کارها</h2></section>
  </main>
  <footer>راه تماس</footer>
</body>
</html>

CSS را با چند تصمیم روشن نگه دار

یک عرض حداکثر برای محتوا، فضای کافی اطراف متن، یک رنگ تأکیدی و عنوان قابل خواندن انتخاب کن. لازم نیست برای هر بخش رنگ و فونت تازه داشته باشی. در نمونه، پروژه‌ها روی نمایشگر بزرگ سه ستون‌اند و زیر ۷۰۰ پیکسل یک ستون می‌شوند.

از margin و padding برای فاصله استفاده کن، نه چند br پشت سر هم. width:100% و box-sizing:border-box کمک می‌کنند عرض عنصر با padding از صفحه بیرون نزند. عددهای منفی برای پنهان کردن مشکل عرض، معمولاً مشکل اصلی را حل نمی‌کنند.

* { box-sizing: border-box; }
.wrap { max-width: 1050px; margin: auto; padding: 0 24px; }
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
h1 { font-size: clamp(36px, 7vw, 70px); line-height: 1.4; }
@media (max-width: 700px) {
  .projects { grid-template-columns: 1fr; }
  .wrap { padding-inline: 20px; }
}

محتوا را با شاهد واقعی جایگزین کن

سه پروژهٔ نمونه را با کار خودت عوض کن. برای هر پروژه بنویس مسئله چه بود، تو چه کردی و خروجی کجاست. اگر هنوز پروژه نداری، پروژهٔ پایتون یا آزمون قابل اشتراک را بساز.

ایمیل hello@example.com نمونه است. آن را با نشانی خودت جایگزین کن. لینک mailto برنامهٔ ایمیل کاربر را باز می‌کند؛ خودش پیام را روی سرور تو ذخیره یا ارسال نمی‌کند. اگر فرم واقعی لازم داری، باید مسیر دریافت، اعتبارسنجی و ارسال پیام را هم پیاده کنی.

صفحه را روی گوشی و با صفحه‌کلید بررسی کن

عرض مرورگر را کم کن: متن نباید از قاب بیرون بزند، منو باید جا شود و دکمهٔ تماس راحت لمس شود. کلید Tab را بزن؛ باید معلوم باشد کدام لینک فوکوس دارد. اگر برای زیبایی outline را حذف کنی، راهنمای حرکت با صفحه‌کلید را از بین می‌بری.

هر لینک را یک بار باز کن. یک تصویر اگر بعداً اضافه می‌کنی، alt متناسب با محتوا داشته باشد و حجمش را قبل از انتشار کم کن. متن سفید روی زمینهٔ روشن و فونت خیلی ریز، روی مانیتور خوب هم مشکل‌اند.

انتشار با GitHub Pages

یک مخزن بساز و index.html را در ریشه قرار بده. در Settings → Pages، منبع را Deploy from a branch بگذار و شاخهٔ main و پوشهٔ root را انتخاب کن. پس از موفق شدن فرایند انتشار، GitHub نشانی سایت را نشان می‌دهد. برای مخزن پروژه‌ای، معمولاً مسیر نام مخزن هم در URL وجود دارد.

مسیر فایل‌ها را نسبی بنویس؛ مثلاً images/photo.webp. اگر با /images شروع کنی، در سایت پروژه‌ای ممکن است مرورگر به ریشهٔ دامنه برود و تصویر پیدا نشود. برای پروژهٔ کاربری با نام username.github.io رفتار مسیر فرق می‌کند.

GitHub Pages میزبان فایل‌های ایستا است. فایل PHP یا سرور Java را اجرا نمی‌کند؛ برای آن‌ها به محیط سرور مناسب نیاز داری. آموزش PHP همین تفاوت مرورگر و سرور را روشن می‌کند.

منبع این بخش: GitHub: تنظیم منبع انتشار Pages ↗

AI را برای تغییر دقیق به کار بگیر

به‌جای «این را بهتر کن» بنویس: «در موبایل سه کارت زیر هم باشند، فاصلهٔ عنوان کمتر شود و دکمهٔ تماس بعد از معرفی بیاید. متن و لینک‌ها حفظ شوند.» نسخهٔ قبل را نگه دار و هر بار یک مسئله را حل کن.

در ساروی فایل را بده و مقصد تغییر را مشخص کن. خروجی را باز کن و همان رفتار را بررسی کن. برای یادگیری، بخواه هر تغییر CSS را با علتش توضیح دهد؛ کم‌کم می‌توانی خودت تشخیص بدهی کدام قانون مسئول هر بخش است.