آموزش HTML

🔹 HTML چیست؟

HTML مخفف HyperText Markup Language است. با «تگ»‌ها به مرورگر می‌گوییم هر بخش صفحه چیست: عنوان، پاراگراف، عکس و لینک.

<!DOCTYPE html>
<html>
  <head>
    <title>صفحه من</title>
  </head>
  <body>
    <h1>سلام دنیا</h1>
  </body>
</html>

هر تگ یک باز (<h1>) و یک بسته (</h1>) دارد.

🔹 عنوان و متن

<h1>عنوان بزرگ</h1>
<h2>عنوان کوچکتر</h2>
<p>این یک پاراگراف است.</p>

🔹 لینک و عکس

<a href="https://sbiorg.com">وب‌سایت</a>
<img src="logo.png" alt="لوگو">

🔹 لیست و دکمه

<ul>
  <li>مورد اول</li>
  <li>مورد دوم</li>
</ul>
<button>کلیک کن</button>

🔹 ساختار کامل یک صفحه

هر صفحهٔ استاندارد سه بخش دارد: نوع سند، <head> (اطلاعات صفحه) و <body> (محتوای دیدنی).

<!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>
    <!-- محتوا اینجا -->
  </body>
</html>

تگ meta viewport باعث می‌شود صفحه در موبایل درست نمایش داده شود.

🔹 ویژگی‌ها (Attributes)

ویژگی‌ها اطلاعات بیشتری به تگ می‌دهند و داخل تگ باز نوشته می‌شوند.

<a href="https://sbiorg.com" target="_blank">لینک</a>
<img src="logo.png" alt="لوگو" width="120">
<p id="intro" class="text" style="color:blue">متن</p>

مهم‌ترین‌ها: id (شناسه یکتا)، class (دسته‌بندی)، href (آدرس لینک)، src (منبع عکس)، alt (متن جایگزین).

🔹 قالب‌بندی متن

<strong>پررنگ</strong>
<em>ایتالیک</em>
<u>زیرخط‌دار</u>
<mark>هایلایت</mark>
<br> خط جدید
<hr> خط جداکننده

🔹 جدول

<table>
  <tr>
    <th>نام</th>
    <th>امتیاز</th>
  </tr>
  <tr>
    <td>سبحان</td>
    <td>۱۰</td>
  </tr>
</table>

tr = ردیف، th = سرستون، td = سلول داده.

🔹 فرم‌ها و ورودی‌ها

<form>
  <label>ایمیل:</label>
  <input type="email" placeholder="you@mail.com">
  <input type="password" placeholder="رمز">
  <textarea>پیام</textarea>
  <button type="submit">ارسال</button>
</form>

انواع input: text, email, password, number, date, checkbox, radio, file.

🔹 تگ‌های معنایی (Semantic)

این تگ‌ها به موتورهای جستجو و دسترس‌پذیری کمک می‌کنند ساختار صفحه را بفهمند.

<header>سربرگ</header>
<nav>منو</nav>
<main>
  <section>بخش</section>
  <article>مقاله</article>
</main>
<footer>پاورقی</footer>

🧭 HTML Roadmap v35 — مسیر یادگیری کامل

۱) ساختار صفحه، ۲) متن و لینک، ۳) عکس و ویدیو، ۴) فرم‌ها، ۵) جدول، ۶) تگ‌های معنایی، ۷) SEO و دسترس‌پذیری.

<main>
  <article>
    <h1>Title</h1>
    <p>Useful content...</p>
  </article>
</main>

تمرین: یک کارت پروفایل بساز که عکس، نام، بیو، لینک شبکه اجتماعی و فرم تماس داشته باشد.

♿ SEO و دسترس‌پذیری

<img src="avatar.jpg" alt="عکس پروفایل سبحان">
<button aria-label="باز کردن منو">☰</button>
<meta name="description" content="توضیح کوتاه صفحه">

alt برای عکس، label برای فرم‌ها و heading مرتب برای گوگل و کاربران مهم است.

🎯 حالا خودت تمرین کن!

در صفحه تمرین، کدها را تایپ کن و خروجی را بلافاصله ببین.

⚡ صفحه تمرین کد 🎨 ادامه: آموزش CSS

آموزش کامل HTML