آموزش HTML

چه چیزی می‌سازید

یک فرم تماس کوچک — فیلدهای دارای برچسب، یک دکمه ارسال، رفتار واقعی صفحه‌کلید و صفحه‌خوان — ابتدا ساده، سپس استایل‌دار، در حدود ۱۰ دقیقه.

پیش از شروع

به یک مرورگر و یک ویرایشگر متن نیاز دارید. همین. (git به گرفتن فایل‌های مؤلفه کمک می‌کند، اما می‌توانید آن‌ها را در مرورگر از GitHub هم کپی کنید.)

گام ۱ — کد را بگیرید

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-html-headless

هر مؤلفه یک فایل مستقل است در components/ — button.html, text-input.htmlو غیره — با یک توضیح سرفایل که برچسب HTML، قلاب کلاس، رفتار صفحه‌کلید و قرارداد دسترس‌پذیری آن را مستند می‌کند. فایل‌ها همان کتابخانه‌اند — آنچه لازم دارید کپی کنید و بروید.

گام ۲ — نخستین مؤلفه شما

باز کنید components/button.html، یا فقط نشانه‌گذاری را بنویسید — قلاب کلاس همان قرارداد است:

<button class="button" type="button">
  Save
</button>

چون یک <button>واقعی است، تمرکز صفحه‌کلید، فعال‌سازی با Enter و Space و نقش ضمنی دکمه از پیش درست‌اند.

گام ۳ — یک فرم کوچک بسازید

<form class="form">
  <div class="field">
    <label class="label" for="name">Full name</label>
    <input class="text-input" type="text" id="name" name="name" required />
  </div>
  <div class="field">
    <label class="label" for="email">Email</label>
    <input class="email-input" type="email" id="email" name="email" required />
  </div>
  <button class="button" type="submit">Save</button>
</form>

الگو را ببینید: هر کنترل <label for>خودش را پیوند می‌دهد، دقیق‌ترین نوع input را به کار می‌برد و دقیقاً یک قلاب کلاس kebab-case دارد.

گام ۴ — استایل بدهید

CSS را بر قلاب‌ها بنویسید:

.button {
  background: #2563eb;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 0.5rem;
}
.text-input,
.email-input {
  padding: 0.5rem 0.75rem;
  border: 2px solid #6b7280;
  border-radius: 0.25rem;
}
.label { display: block; font-weight: 600; margin-bottom: 0.25rem; }

یا نوشتن CSS با دست را یکسره کنار بگذارید — یکی از ۴۵ تم آماده را پیوند دهید و همان نشانه‌گذاری روشن می‌شود:

<link rel="stylesheet" href="/themes/united-kingdom-national-health-service-england-for-patients.css" />

گام ۵ — بیشتر کاوش کنید

• آزمون‌های مخزن در مرورگرهای واقعی اجرا می‌شوند: pnpm install && pnpm test (WebDriverIO).
• Storybook برای هر مؤلفه: pnpm run storybook.
• برنامه نمونه HTML+CSS+JS هر ۵۷۱ مؤلفه را استایل‌دار، جست‌وجوپذیر و نمایش‌داده نشان می‌دهد.

گام‌های بعدی

• تم‌ها — تعویض تم در زمان اجرا با theme-picker.
• کمکی‌های ترجیحات — زبان و اندازه متن.
• فهرست مؤلفه‌ها — مرجع کامل.

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