شروع کار با HTML در وردپرس

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

اسکلت‌بندی پایه صفحه

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

<!-- اسکلت پایه برای تمرین داخل نوشته وردپرس -->
<section>
  <h1>سلام دنیا!</h1>
  <p>این اولین پاراگراف من در HTML است.</p>
</section>

تگ‌های مهم متن: عنوان، پاراگراف و خط جداکننده

عناوین h1 تا h6

<h1>عنوان اصلی صفحه</h1>
<h2>عنوان بخش</h2>
<h3>زیرعنوان</h3>

پاراگراف و خط افقی

<p>این یک پاراگراف توضیحی است.</p>
<hr><!-- خط جداکننده -->

فهرست‌ها: مرتب و نامرتب

برای نمایش آیتم‌ها از لیست استفاده می‌کنیم.

<h3>نامرتب (bullet)</h3>
<ul>
  <li>آیتم اول</li>
  <li>آیتم دوم</li>
</ul>

<h3>مرتب (شماره‌دار)</h3>
<ol>
  <li>مرحله ۱</li>
  <li>مرحله ۲</li>
</ol>

لینک‌ها و تصاویر

لینک ساده

<a href="https://example.com" target="_blank">برو به سایت</a>

تصویر با متن جایگزین

<img src="https://picsum.photos/400/220" alt="نمونه تصویر تصادفی" width="400" height="220">

جدول‌ها برای داده‌های ساختاریافته

<table>
  <thead>
    <tr>
      <th>نام</th>
      <th>سن</th>
      <th>شهر</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>مریم</td>
      <td>16</td>
      <td>تهران</td>
    </tr>
    <tr>
      <td>آرین</td>
      <td>15</td>
      <td>اصفهان</td>
    </tr>
  </tbody>
</table>

استفاده سریع از CSS داخل نوشته وردپرس

سه روش رایج داریم: درون‌خطی (inline)، داخلی (style) و خارجی (فایل جدا). در نوشته‌ها معمولا داخلی و درون‌خطی کافی است.

درون‌خطی

<p style="color:#16a34a; font-weight:bold">این متن سبز و بولد است</p>

سبک داخلی برای یک بخش

<style>
  .badge { background:#22d3ee; color:#081521; padding:.2rem .5rem; border-radius:.5rem; font-weight:700 }
</style>

<p>این یک <span class="badge">برچسب زیبا</span> است.</p>

تگ‌های معنایی (Semantic): ساختار استاندارد

تگ‌های معنایی کمک می‌کنند موتورهای جستجو و ابزارهای کمکی، صفحه را بهتر بفهمند.

<header>هدر سایت</header>
<nav>منو</nav>
<main>
  <article>محتوای اصلی</article>
  <aside>بخش جانبی</aside>
</main>
<footer>پابرگ</footer>

فرم‌ها: ورودی از کاربر

فرم‌ها اطلاعات را از کاربر می‌گیرند. در وردپرس معمولاً برای ارسال واقعی از افزونه‌ها استفاده می‌شود؛ اینجا فقط نمایش و اعتبارسنجی ساده را می‌بینیم.

<form onsubmit="alert('فرم ارسال شد!'); return false;">
  <label for="name">نام:</label>
  <input id="name" name="name" type="text" placeholder="اسم خود را بنویسید" required>

  <label for="age">سن:</label>
  <input id="age" name="age" type="number" min="1" max="120" required>

  <button type="submit">ارسال</button>
</form>

ریسپانسیو ساده: سازگاری با موبایل

با media query می‌توانیم اندازه‌ها را برای موبایل کوچک‌تر کنیم.

<style>
  @media (max-width: 600px) {
    .box { padding: .8rem; font-size: .95rem }
  }
  .box { background:#0b1426; color:#cfe8ff; padding:1rem; border-radius:.8rem }
</style>

<div class="box">این یک باکس ریسپانسیو است</div>

دسترس‌پذیری پایه

• متن جایگزین تصاویر: همیشه alt توصیفی بگذارید.
• کنتراست رنگ: متن روشن روی پس‌زمینه تیره یا برعکس، خوانایی را زیاد می‌کند.
• برچسب برای ورودی‌ها: از <label> با for استفاده کنید تا با صفحه‌خوان‌ها سازگار باشد.

اشتباهات بسیار رایج و راه‌حل‌ها

<p>سلام
<!-- درست: -->
<p>سلام</p>

<a href="#"><p>اشتباه است</p></a>
<!-- بهتر: لینک داخل متن پاراگراف -->
<p>این <a href="#">لینک</a> داخل پاراگراف است.</p>

<img src=https://picsum.photos/200 alt=بدون-کوتیشن> <!-- ممکن است مشکل ایجاد کند -->
<!-- درست: -->
<img src="https://picsum.photos/200" alt="نمونه تصویر">

<section dir="rtl">این متن راست‌به‌چپ است</section>

تمرین‌های کوچک برای کلاس

<style>
  .card-mini { background:#0c1427; border:1px solid #152544; border-radius:12px; padding:1rem; width:320px }
  .card-mini img { width:100%; border-radius:10px; margin:.5rem 0 }
  .card-mini h3 { margin:.2rem 0 }
  .muted { color:#9ca3af; font-size:.9rem }
</style>

<div class="card-mini" dir="rtl">
  <h3>نام: مریم</h3>
  <p class="muted">سن: ۱۶ | شهر: تهران</p>
  <img src="https://picsum.photos/320/180" alt="عکس پروفایل نمادین">
  <p>علاقه‌مندی‌ها: برنامه‌نویسی، طراحی وب و آموزش</p>
</div>

<ol>
  <li><b>دفتر ۱۰۰ برگ:</b> برای یادداشت‌های روزانه</li>
  <li><b>خودکار آبی:</b> خوانایی بهتر متن</li>
  <li><b>پاک‌کن نرم:</b> مناسب برای مداد HB</li>
</ol>

<table>
  <thead>
    <tr><th>روز</th><th>۸-۱۰</th><th>۱۰-۱۲</th></tr>
  </thead>
  <tbody>
    <tr><td>شنبه</td><td>ریاضی</td><td>علوم</td></tr>
    <tr><td>یکشنبه</td><td>ادبیات</td><td>ورزش</td></tr>
  </tbody>
</table>

<form onsubmit="alert('نظر شما ثبت شد (نمونه)!'); return false;">
  <label for="n">نام:</label>
  <input id="n" name="n" type="text" required>

  <label for="c">نظر:</label>
  <textarea id="c" name="c" rows="3" required></textarea>

  <button type="submit">ارسال نظر</button>
</form>

پیشرفته‌ی کاربردی در نوشته: بلوک‌های زیبا و قابل‌استفاده

<style>
  .notice { border:1px solid #1f2b44; border-radius:12px; padding:1rem; margin:.7rem 0 }
  .notice.info { background:#0b1426; color:#cfe8ff }
  .notice.success { background:#0b261e; color:#b6f3d6 }
  .notice.warn { background:#291f0c; color:#ffe6b3 }
  .notice h4 { margin:.2rem 0 .4rem 0 }
</style>

<div class="notice info" dir="rtl">
  <h4>اطلاعات</h4>
  <p>کلاس چهارشنبه ساعت ۱۶ برگزار می‌شود.</p>
</div>

<div class="notice success" dir="rtl">
  <h4>موفقیت</h4>
  <p>تمرین‌های جلسه قبل با موفقیت تحویل داده شد!</p>
</div>

<div class="notice warn" dir="rtl">
  <h4>هشدار</h4>
  <p>ارسال پروژه بعد از مهلت، نمره کمتری خواهد داشت.</p>
</div>

<style>
  .grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: .9rem }
  .grid .item { background:#0c1427; border:1px solid #18243d; border-radius:12px; padding:.9rem }
  @media (max-width: 800px){ .grid { grid-template-columns: repeat(2, 1fr) } }
  @media (max-width: 520px){ .grid { grid-template-columns: 1fr } }
</style>

<div class="grid" dir="rtl">
  <div class="item"><b>جلسه ۱:</b> آشنایی با HTML</div>
  <div class="item"><b>جلسه ۲:</b> فهرست‌ها و لینک‌ها</div>
  <div class="item"><b>جلسه ۳:</b> تصاویر و جدول‌ها</div>
</div>