آموزش و راهنما

HTML چیست؟ آموزش کامل HTML از صفر با ساخت رابط وب هوش مصنوعی

در این آموزش HTML را از صفر یاد می‌گیرید؛ از ساختار صفحه، تگ‌ها، لینک و تصویر تا فرم، جدول و Semantic HTML. در پایان یک رابط وب هوش مصنوعی با Backend پایتون و API درواره می‌سازیم.

HTML پایه اصلی تمام صفحات وب است. هر صفحه‌ای که در مرورگر باز می‌کنید، از یک سند HTML برای تعریف ساختار و محتوای خود استفاده می‌کند؛ حتی اگر آن وب‌سایت با ابزارهایی مانند React، Vue، Angular، WordPress یا یک Website Builder ساخته شده باشد.

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

در این آموزش، HTML را از صفر یاد می‌گیریم و در پایان یک پروژه واقعی می‌سازیم: رابط وب فارسی برای ارسال سؤال به یک مدل هوش مصنوعی از طریق API درواره.

برای جلوگیری از افشای API Key، درخواست مرورگر مستقیماً به درواره ارسال نمی‌شود. یک Backend کوچک با Python و FastAPI میان رابط HTML و API درواره قرار می‌دهیم.

HTML چیست؟

HTML مخفف عبارت HyperText Markup Language و به معنی زبان نشانه‌گذاری ابرمتن است.

HTML یک زبان Markup است، نه یک زبان برنامه‌نویسی عمومی. با HTML ساختار و معنای محتوای صفحه را تعریف می‌کنیم، اما معمولاً منطق پیچیده، شرط، حلقه و پردازش داده با JavaScript یا یک زبان Backend انجام می‌شود.

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

یک مثال ساده:

<h1>آموزش HTML</h1>
<p>این اولین صفحه HTML من است.</p>

در این کد:

<h1> عنوان اصلی صفحه را مشخص می‌کند.
<p> یک پاراگراف را مشخص می‌کند.

مرورگر این نشانه‌ها را تفسیر و محتوای صفحه را نمایش می‌دهد.

HyperText چیست؟

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

برای مثال:

<a href="https://darvareh.ir">ورود به درواره</a>

کاربر با کلیک روی این لینک به وب‌سایت درواره منتقل می‌شود.

لینک‌ها یکی از پایه‌های اصلی World Wide Web هستند و صفحات مختلف را به یکدیگر متصل می‌کنند.

Markup Language چیست؟

Markup Language با استفاده از نشانه‌ها، ساختار و معنای محتوا را مشخص می‌کند.

برای مثال، متن زیر فقط یک رشته عادی است:

آموزش برنامه‌نویسی وب

اما با HTML مشخص می‌کنیم که این متن عنوان اصلی است:

<h1>آموزش برنامه‌نویسی وب</h1>

HTML به مرورگر می‌گوید این بخش فقط یک متن بزرگ نیست؛ بلکه مهم‌ترین Heading صفحه است.

تفاوت HTML، CSS و JavaScript

در توسعه Frontend معمولاً سه فناوری اصلی کنار یکدیگر استفاده می‌شوند.

HTML

ساختار و معنای محتوا را تعریف می‌کند:

عنوان
پاراگراف
تصویر
لینک
فرم
جدول
منو
بخش‌های صفحه

CSS

ظاهر و چیدمان صفحه را کنترل می‌کند:

رنگ
فونت
فاصله
اندازه
Grid
Flexbox
Responsive Design
Animation

JavaScript

رفتار و منطق تعاملی صفحه را مدیریت می‌کند:

واکنش به کلیک
ارسال درخواست API
تغییر محتوای صفحه
اعتبارسنجی پویا
بازکردن منو
مدیریت State
پردازش پاسخ سرور

یک مثال ساده:

HTML = اسکلت و ساختار
CSS = ظاهر و طراحی
JavaScript = رفتار و تعامل

آیا HTML زبان برنامه‌نویسی است؟

HTML معمولاً زبان برنامه‌نویسی در نظر گرفته نمی‌شود؛ زیرا به‌تنهایی ساختارهای رایج زبان‌های برنامه‌نویسی مانند Function، Loop، Condition و Variable را ارائه نمی‌کند.

HTML یک زبان نشانه‌گذاری است که ساختار و معنای محتوا را تعریف می‌کند.

بااین‌حال، یادگیری HTML اولین قدم مهم برای ورود به Frontend، طراحی وب، SEO فنی و توسعه رابط کاربری است.

HTML5 چیست؟

HTML5 اصطلاحی است که برای نسل مدرن HTML و قابلیت‌های تکامل‌یافته آن استفاده شده است. در توسعه امروزی معمولاً فقط از واژه HTML استفاده می‌شود و سند را با Doctype ساده زیر آغاز می‌کنیم:

<!doctype html>

HTML مدرن عناصر معنایی و قابلیت‌های متنوعی دارد:

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
<video>
<audio>
<canvas>
<details>
<dialog>

پشتیبانی دقیق بعضی قابلیت‌ها ممکن است میان مرورگرها متفاوت باشد. برای قابلیت‌های خاص بهتر است Browser Compatibility را در MDN بررسی کنید.

برای نوشتن HTML به چه ابزاری نیاز داریم؟

برای شروع کافی است این ابزارها را داشته باشید:

یک ویرایشگر متن یا کد
یک مرورگر وب
یک پوشه برای پروژه

ویرایشگرهای رایج:

Visual Studio Code
WebStorm
Sublime Text
Notepad++
Zed
هر ویرایشگر متن ساده

مرورگرهای مناسب برای آزمایش:

Chrome
Firefox
Edge
Safari

در این مقاله از VS Code استفاده می‌کنیم، اما کد HTML به ویرایشگر خاصی وابسته نیست.

ساخت اولین فایل HTML

یک پوشه بسازید:

mkdir html-first-project
cd html-first-project

فایل زیر را ایجاد کنید:

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>اولین صفحه HTML من</title>
  </head>

  <body>
    <h1>سلام دنیا!</h1>
    <p>این اولین صفحه HTML من است.</p>
  </body>
</html>

فایل را ذخیره و در مرورگر باز کنید.

توضیح ساختار اصلی سند HTML

Doctype

<!doctype html>

به مرورگر اعلام می‌کند سند با HTML مدرن نوشته شده است.

عنصر html

<html lang="fa" dir="rtl">

عنصر ریشه سند است و تمام بخش‌های دیگر داخل آن قرار می‌گیرند.

Attributeهای استفاده‌شده:

lang="fa" زبان اصلی صفحه را فارسی مشخص می‌کند.
dir="rtl" جهت صفحه را راست‌به‌چپ قرار می‌دهد.

عنصر head

<head>
</head>

اطلاعاتی را نگه می‌دارد که معمولاً مستقیماً داخل محتوای قابل مشاهده صفحه نمایش داده نمی‌شوند:

عنوان صفحه
Meta Tagها
لینک CSS
Favicon
اطلاعات Open Graph
Scriptها
تنظیمات Encoding

عنصر body

<body>
</body>

محتوای قابل مشاهده صفحه داخل body قرار می‌گیرد:

عنوان
متن
لینک
تصویر
فرم
جدول
ویدئو

Tag، Element و Attribute چه تفاوتی دارند؟

این کد را در نظر بگیرید:

<a href="https://darvareh.ir">درواره</a>

Tag

Tag آغازین:

<a>

Tag پایانی:

</a>

Element

مجموع Tag آغازین، محتوا و Tag پایانی:

<a href="https://darvareh.ir">درواره</a>

Attribute

اطلاعات تکمیلی داخل Tag آغازین:

href="https://darvareh.ir"

Attribute href مقصد لینک را تعیین می‌کند.

طبق راهنمای سینتکس پایه HTML در MDN، یک Element معمولی می‌تواند شامل Tag آغازین، محتوا، Tag پایانی و Attributeهای اختیاری باشد.

Elementهای بدون Tag پایانی

بعضی Elementها محتوای داخلی ندارند و Closing Tag معمولی برای آن‌ها نوشته نمی‌شود:

<img src="image.jpg" alt="توضیح تصویر">

<input type="text">

<meta charset="utf-8">

<br>

<hr>

در HTML مدرن نوشتن Slash پایانی برای این عناصر الزامی نیست:

<img src="image.jpg" alt="توضیح تصویر">

Nesting یا تودرتویی Elementها

Elementها می‌توانند داخل یکدیگر قرار بگیرند:

<p>
  برای مشاهده مدل‌ها به
  <a href="https://darvareh.ir/models">
    صفحه مدل‌های درواره
  </a>
  بروید.
</p>

Nesting باید درست باشد.

درست:

<strong><em>متن مهم</em></strong>

نادرست:

<strong><em>متن مهم</strong></em>

Elementی که دیرتر باز می‌شود باید زودتر بسته شود.

Comment در HTML

برای افزودن توضیحی که در صفحه نمایش داده نشود:

<!-- این بخش برای منوی اصلی است -->

از Comment برای نگهداری رمز، API Key، اطلاعات داخلی یا داده محرمانه استفاده نکنید. کاربر می‌تواند Source HTML را مشاهده کند و Commentها نیز قابل دسترسی‌اند.

Headingها در HTML

HTML شش سطح Heading دارد:

<h1>عنوان اصلی</h1>
<h2>عنوان بخش</h2>
<h3>عنوان زیربخش</h3>
<h4>عنوان سطح چهار</h4>
<h5>عنوان سطح پنج</h5>
<h6>عنوان سطح شش</h6>

ساختار Heading باید منطقی باشد.

نمونه:

<h1>آموزش طراحی سایت</h1>

<h2>HTML چیست؟</h2>
<h3>ساختار سند HTML</h3>

<h2>CSS چیست؟</h2>
<h3>انتخابگرهای CSS</h3>

از Heading فقط برای بزرگ‌کردن متن استفاده نکنید. ظاهر متن باید با CSS کنترل شود و Heading برای ساختار معنایی محتوا به کار رود.

در بیشتر صفحات معمولاً یک عنوان اصلی روشن با <h1> وجود دارد. سپس بخش‌ها با <h2> و زیربخش‌ها با <h3> سازمان‌دهی می‌شوند.

پاراگراف و متن

پاراگراف:

<p>
  HTML ساختار محتوای صفحات وب را تعریف می‌کند.
</p>

متن دارای اهمیت بالا:

<strong>کلید API را در HTML قرار ندهید.</strong>

تأکید معنایی:

<em>این نکته را با دقت بخوانید.</em>

متن کوتاه بدون معنای ساختاری خاص:

<span>متن کوتاه</span>

کد داخل متن:

<p>
  فایل اصلی صفحه معمولاً
  <code>index.html</code>
  نام دارد.
</p>

کد چندخطی:

<pre><code>python app.py
uvicorn app:app --reload</code></pre>

لیست در HTML

لیست بدون ترتیب

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

لیست ترتیبی

<ol>
  <li>ساخت فایل HTML</li>
  <li>افزودن CSS</li>
  <li>نوشتن JavaScript</li>
</ol>

لیست توضیحی

<dl>
  <dt>HTML</dt>
  <dd>ساختار و معنای محتوا</dd>

  <dt>CSS</dt>
  <dd>ظاهر و چیدمان صفحه</dd>

  <dt>JavaScript</dt>
  <dd>رفتار و تعامل صفحه</dd>
</dl>

لینک در HTML

لینک خارجی:

<a href="https://darvareh.ir">
  ورود به درواره
</a>

بازکردن در Tab جدید:

<a
  href="https://darvareh.ir/models"
  target="_blank"
  rel="noopener noreferrer"
>
  مشاهده مدل‌ها
</a>

لینک داخلی به صفحه دیگر:

<a href="/about.html">درباره ما</a>

لینک به بخش مشخصی از همان صفحه:

<a href="#faq">رفتن به پرسش‌های متداول</a>

بخش مقصد:

<section id="faq">
  <h2>پرسش‌های متداول</h2>
</section>

لینک ایمیل:

<a href="mailto:example@example.com">
  ارسال ایمیل
</a>

متن لینک باید معنای مقصد را مشخص کند. عبارت‌هایی مانند «اینجا کلیک کنید» بدون Context برای Accessibility و درک محتوا مناسب نیستند.

بهتر:

<a href="/html-guide">
  آموزش کامل HTML را بخوانید
</a>

تصویر در HTML

<img
  src="images/html-course.webp"
  alt="نمایی از ویرایش کد HTML در یک لپ‌تاپ"
  width="1200"
  height="675"
>

Attributeهای مهم:

src: مسیر تصویر
alt: متن جایگزین
width: عرض
height: ارتفاع

برای تصاویر محتوایی، alt باید کوتاه و معنادار باشد. اگر تصویر فقط تزئینی است و اطلاعاتی منتقل نمی‌کند:

<img src="decoration.svg" alt="">

تعیین عرض و ارتفاع می‌تواند به مرورگر برای رزرو فضای تصویر کمک کند و از جابه‌جایی ناگهانی چیدمان بکاهد.

Figure و Figcaption

برای تصویر همراه توضیح:

<figure>
  <img
    src="images/ai-architecture.webp"
    alt="معماری اتصال رابط وب به Backend و API درواره"
    width="1200"
    height="675"
  >

  <figcaption>
    معماری پیشنهادی اتصال امن‌تر رابط وب به API
  </figcaption>
</figure>

مسیر نسبی و مطلق

مسیر نسبی:

<img src="images/logo.webp" alt="لوگو">

مسیر مطلق:

<img
  src="https://example.com/images/logo.webp"
  alt="لوگو"
>

مسیر ریشه‌ای:

<img src="/images/logo.webp" alt="لوگو">

انتخاب مسیر به ساختار پروژه و روش انتشار سایت بستگی دارد.

Semantic HTML چیست؟

Semantic HTML یعنی استفاده از Elementهایی که معنای بخش محتوا را مشخص می‌کنند.

Elementهای معنایی مهم:

<header></header>
<nav></nav>
<main></main>
<section></section>
<article></article>
<aside></aside>
<footer></footer>

طبق راهنمای ساختاربندی سند در MDN، عناصر معنایی هدف بخش‌های صفحه را مشخص می‌کنند و می‌توانند در درک ساختار محتوا و Accessibility مفید باشند.

نمونه ساختار:

<body>
  <header>
    <h1>وب‌سایت آموزش برنامه‌نویسی</h1>

    <nav aria-label="منوی اصلی">
      <a href="/">خانه</a>
      <a href="/courses">دوره‌ها</a>
      <a href="/contact">تماس</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>HTML چیست؟</h2>
      <p>HTML ساختار صفحات وب را تعریف می‌کند.</p>
    </article>
  </main>

  <footer>
    <p>تمام حقوق محفوظ است.</p>
  </footer>
</body>

تفاوت div و Elementهای Semantic

div یک Container عمومی بدون معنای خاص است:

<div class="card">
  <h2>عنوان کارت</h2>
  <p>توضیحات کارت</p>
</div>

استفاده از div اشتباه نیست. وقتی Element معنایی مناسب وجود ندارد، div انتخاب خوبی است.

اما نباید تمام صفحه را فقط با div ساخت:

<div class="header"></div>
<div class="nav"></div>
<div class="main"></div>
<div class="footer"></div>

در این حالت استفاده از Elementهای معنایی روشن‌تر است:

<header></header>
<nav></nav>
<main></main>
<footer></footer>

section و article چه تفاوتی دارند؟

section یک بخش موضوعی از صفحه است و معمولاً Heading دارد:

<section>
  <h2>مزایای HTML</h2>
  <p>...</p>
</section>

article برای محتوایی استفاده می‌شود که می‌تواند به‌صورت مستقل معنا داشته باشد:

<article>
  <h2>آموزش ساخت فرم HTML</h2>
  <p>...</p>
</article>

نمونه‌های مناسب برای article:

پست وبلاگ
خبر
دیدگاه کاربر
کارت محصول مستقل
مقاله آموزشی

Form در HTML

Form برای دریافت اطلاعات از کاربر استفاده می‌شود.

<form action="/contact" method="post">
  <label for="name">نام</label>
  <input
    id="name"
    name="name"
    type="text"
    required
  >

  <label for="message">پیام</label>
  <textarea
    id="message"
    name="message"
    rows="6"
    required
  ></textarea>

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

Elementهای رایج فرم:

<form>
<label>
<input>
<textarea>
<select>
<option>
<button>
<fieldset>
<legend>
<output>

طبق راهنمای فرم‌های HTML در MDN، Form و Button ابزارهای اصلی تعامل کاربر با رابط وب هستند.

اهمیت label

هر ورودی باید Label قابل‌تشخیص داشته باشد:

<label for="email">ایمیل</label>
<input id="email" name="email" type="email">

مقدار for در Label با id ورودی برابر است.

این ارتباط باعث می‌شود:

کلیک روی Label ورودی را Focus کند.
Screen Reader نام ورودی را تشخیص دهد.
فرم برای کاربران مختلف قابل فهم‌تر شود.

مستندات عنصر label در MDN استفاده از ارتباط صریح میان for و id را برای سازگاری بهتر توضیح می‌دهد.

انواع مهم input

<input type="text">
<input type="email">
<input type="password">
<input type="number">
<input type="date">
<input type="file">
<input type="checkbox">
<input type="radio">
<input type="search">
<input type="url">

نوع مناسب ورودی می‌تواند Keyboard مناسب‌تری در موبایل نمایش دهد و Validation پایه مرورگر را فعال کند.

Attributeهای فرم

required

<input type="email" required>

ورودی را الزامی می‌کند.

minlength و maxlength

<textarea
  minlength="20"
  maxlength="8000"
></textarea>

placeholder

<input
  type="text"
  placeholder="مثلاً آموزش HTML"
>

Placeholder جای Label را نمی‌گیرد. پس از تایپ کاربر ناپدید می‌شود و ممکن است برای Accessibility کافی نباشد.

autocomplete

<input
  type="email"
  autocomplete="email"
>

disabled

<button type="submit" disabled>
  در حال ارسال
</button>

name

<input name="email" type="email">

نام فیلدی است که در ارسال معمول Form استفاده می‌شود.

button و نوع آن

دکمه ارسال فرم:

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

دکمه معمولی:

<button type="button">نمایش راهنما</button>

دکمه بازنشانی:

<button type="reset">پاک‌کردن فرم</button>

داخل Form بهتر است type دکمه را صریح بنویسید تا رفتار آن روشن باشد.

Select و Option

<label for="style">نوع پاسخ</label>

<select id="style" name="style">
  <option value="short">کوتاه</option>
  <option value="detailed">کامل</option>
  <option value="bullet">فهرست‌وار</option>
</select>

هر option یک مقدار قابل ارسال دارد. مستندات select در MDN استفاده از label، id، name و value را توضیح می‌دهد.

جدول در HTML

برای نمایش داده‌های جدولی:

<table>
  <caption>مقایسه فناوری‌های وب</caption>

  <thead>
    <tr>
      <th scope="col">فناوری</th>
      <th scope="col">کاربرد</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">HTML</th>
      <td>ساختار محتوا</td>
    </tr>

    <tr>
      <th scope="row">CSS</th>
      <td>ظاهر و چیدمان</td>
    </tr>

    <tr>
      <th scope="row">JavaScript</th>
      <td>تعامل و منطق Frontend</td>
    </tr>
  </tbody>
</table>

Elementهای مهم جدول:

<table>
<caption>
<thead>
<tbody>
<tfoot>
<tr>
<th>
<td>

از جدول برای Layout کلی صفحه استفاده نکنید. جدول برای داده‌ای مناسب است که رابطه سطری و ستونی دارد.

افزودن CSS به HTML

فایل خارجی CSS:

<link rel="stylesheet" href="/static/styles.css">

این خط معمولاً داخل <head> قرار می‌گیرد.

CSS داخلی:

<style>
  body {
    font-family: sans-serif;
  }
</style>

Style مستقیم روی Element:

<p style="color: blue;">متن آبی</p>

برای پروژه‌های واقعی، فایل CSS جداگانه معمولاً ساختار مرتب‌تری ایجاد می‌کند.

افزودن JavaScript به HTML

فایل JavaScript خارجی:

<script src="/static/app.js" defer></script>

Attribute defer باعث می‌شود Script پس از Parseشدن HTML اجرا شود و معمولاً مانع پردازش اولیه سند نشود.

JavaScript داخلی:

<script>
  console.log("Hello");
</script>

در پروژه‌های واقعی بهتر است کد JavaScript در فایل جدا نگهداری شود.

id و class چه تفاوتی دارند؟

id

شناسه‌ای است که باید در یک سند یکتا باشد:

<section id="features"></section>

کاربردها:

لینک به بخش
ارتباط Label و Input
انتخاب Element در JavaScript
بعضی کاربردهای Accessibility

class

برای دسته‌بندی چند Element استفاده می‌شود:

<article class="card"></article>
<article class="card"></article>

یک Element می‌تواند چند Class داشته باشد:

<button class="button button-primary">
  ارسال
</button>

Data Attribute

برای نگهداری داده سفارشی مرتبط با رابط:

<button
  type="button"
  data-style="short"
>
  پاسخ کوتاه
</button>

در JavaScript:

const style = button.dataset.style;

Data Attribute محل نگهداری Secret نیست، زیرا داخل HTML قابل مشاهده است.

Meta Tagهای مهم

داخل <head>:

<meta charset="utf-8">

برای Encoding:

<meta
  name="viewport"
  content="width=device-width, initial-scale=1"
>

برای نمایش Responsive:

<meta
  name="description"
  content="آموزش کامل HTML از صفر با مثال و پروژه عملی"
>

عنوان صفحه:

<title>
  آموزش HTML از صفر با پروژه عملی
</title>

طبق راهنمای Metadata صفحه در MDN، بخش head اطلاعاتی مانند عنوان، Encoding، لینک Stylesheet و Metadata صفحه را نگه می‌دارد.

HTML و SEO

HTML ساخت‌یافته به موتور جست‌وجو برای درک محتوای صفحه کمک می‌کند، اما به‌تنهایی رتبه بالا را تضمین نمی‌کند.

موارد مهم:

عنوان صفحه واضح
Meta Description مرتبط
Headingهای منطقی
محتوای اصلی داخل <main>
لینک‌های قابل فهم
HTML معنایی
متن جایگزین مناسب تصویر
Canonical درست، در صورت نیاز
محتوای اصلی قابل مشاهده
سرعت و تجربه کاربری مناسب
طراحی Responsive
جلوگیری از محتوای تکراری
لینک‌های داخلی مرتبط
داده ساخت‌یافته معتبر، در صورت کاربرد

نمونه ساده:

<head>
  <meta charset="utf-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1"
  >

  <title>
    آموزش HTML از صفر با پروژه عملی
  </title>

  <meta
    name="description"
    content="HTML را از صفر یاد بگیرید و یک پروژه وب عملی بسازید."
  >
</head>

Accessibility در HTML

Accessibility یعنی افراد با توانایی‌ها و ابزارهای مختلف بتوانند از صفحه استفاده کنند.

موارد مهم:

استفاده از HTML معنایی
Label برای Form
Alt مناسب برای تصویر
ترتیب منطقی Heading
امکان کار با Keyboard
Focus قابل مشاهده
دکمه واقعی به‌جای div کلیک‌پذیر
لینک با متن معنادار
پیام خطا قابل فهم
کنتراست مناسب رنگ
استفاده درست از lang
استفاده محتاطانه از ARIA

قاعده مفید این است که ابتدا از Element بومی HTML استفاده کنید و فقط در صورت نیاز ARIA اضافه کنید.

به‌جای:

<div class="button" onclick="submitForm()">
  ارسال
</div>

از این استفاده کنید:

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

Button بومی به‌طور پیش‌فرض رفتار Keyboard و معنای مناسب‌تری دارد.

پروژه عملی: ساخت رابط وب هوش مصنوعی

در این پروژه کاربر سؤال خود را در Form وارد می‌کند. JavaScript درخواست را به Backend محلی می‌فرستد و Backend از API درواره پاسخ مدل را دریافت می‌کند.

ساختار پروژه:

darvareh-ai-web/
├── static/
│   ├── index.html
│   ├── styles.css
│   └── app.js
├── app.py
├── requirements.txt
├── .env.example
├── .env
└── .gitignore

معماری:

مرورگر کاربر
    │
    ▼
HTML + CSS + JavaScript
    │
    ▼
Backend با FastAPI
    │
    ▼
API درواره
    │
    ▼
مدل هوش مصنوعی

API Key فقط در Backend نگهداری می‌شود و داخل HTML یا JavaScript قرار نمی‌گیرد.

ساخت پوشه‌ها

mkdir darvareh-ai-web
cd darvareh-ai-web
mkdir static

ساخت Virtual Environment

در Windows PowerShell:

python -m venv .venv
.venv\Scripts\Activate.ps1

در Linux و macOS:

python3 -m venv .venv
source .venv/bin/activate

ساخت requirements.txt

fastapi>=0.115,<1.0
uvicorn[standard]>=0.34,<1.0
openai>=1.68,<3.0
python-dotenv>=1.1,<2.0
pydantic>=2.10,<3.0

نصب:

python -m pip install --upgrade pip
python -m pip install -r requirements.txt

ساخت .env.example

DARVAREH_API_KEY=YOUR_DARVAREH_API_KEY
DARVAREH_MODEL_ID=YOUR_MODEL_ID

در درواره ثبت‌نام کنید و API Key بسازید. شناسه مدل را نیز از صفحه مدل‌های درواره دریافت کنید.

ساخت .env در Linux و macOS:

cp .env.example .env

در PowerShell:

Copy-Item .env.example .env

مقادیر واقعی را داخل .env قرار دهید.

ساخت .gitignore

.env
.env.*
!.env.example

.venv/
venv/
__pycache__/
*.py[cod]

.pytest_cache/
*.log

ساخت Backend

فایل app.py:

import os
from contextlib import asynccontextmanager
from pathlib import Path
from typing import Literal

from dotenv import load_dotenv
from fastapi import FastAPI, HTTPException, Request
from fastapi.responses import FileResponse
from fastapi.staticfiles import StaticFiles
from openai import OpenAI
from pydantic import BaseModel, Field

load_dotenv()

BASE_DIR = Path(__file__).resolve().parent
STATIC_DIR = BASE_DIR / "static"


class ChatRequest(BaseModel):
    message: str = Field(min_length=3, max_length=8000)
    response_style: Literal[
        "short",
        "detailed",
        "bullet",
    ] = "short"


STYLE_PROMPTS = {
    "short": "پاسخ را کوتاه، روشن و مستقیم بنویس.",
    "detailed": (
        "پاسخ را کامل، مرحله‌به‌مرحله و با مثال مناسب بنویس."
    ),
    "bullet": (
        "پاسخ را به‌صورت نکات فهرست‌وار و منظم بنویس."
    ),
}


@asynccontextmanager
async def lifespan(app: FastAPI):
    api_key = os.getenv("DARVAREH_API_KEY")
    model_id = os.getenv("DARVAREH_MODEL_ID")

    if not api_key:
        raise RuntimeError(
            "DARVAREH_API_KEY is not configured"
        )

    if not model_id:
        raise RuntimeError(
            "DARVAREH_MODEL_ID is not configured"
        )

    app.state.model_id = model_id
    app.state.ai_client = OpenAI(
        api_key=api_key,
        base_url="https://api.darvareh.ir/v1",
        timeout=60,
        max_retries=2,
    )

    yield

    app.state.ai_client.close()


app = FastAPI(
    title="Darvareh AI Web Interface",
    version="1.0.0",
    lifespan=lifespan,
)

app.mount(
    "/static",
    StaticFiles(directory=STATIC_DIR),
    name="static",
)


@app.get("/", include_in_schema=False)
def home():
    return FileResponse(STATIC_DIR / "index.html")


@app.get("/api/health")
def health():
    return {"status": "ok"}


@app.post("/api/chat")
def chat(payload: ChatRequest, request: Request):
    instruction = STYLE_PROMPTS[payload.response_style]

    try:
        response = (
            request.app.state.ai_client
            .chat.completions.create(
                model=request.app.state.model_id,
                messages=[
                    {
                        "role": "system",
                        "content": (
                            "You are a helpful Persian assistant. "
                            "Answer accurately in Persian. "
                            f"{instruction}"
                        ),
                    },
                    {
                        "role": "user",
                        "content": payload.message,
                    },
                ],
                temperature=0.3,
                max_tokens=1200,
            )
        )

        answer = response.choices[0].message.content

        if not answer:
            raise HTTPException(
                status_code=502,
                detail="مدل پاسخ قابل استفاده‌ای برنگرداند.",
            )

        return {
            "answer": answer,
            "model": request.app.state.model_id,
        }

    except HTTPException:
        raise

    except Exception:
        raise HTTPException(
            status_code=502,
            detail=(
                "دریافت پاسخ از سرویس هوش مصنوعی "
                "با مشکل مواجه شد."
            ),
        )

Base URL درواره:

https://api.darvareh.ir/v1

Endpoint نهایی:

https://api.darvareh.ir/v1/chat/completions

ساخت index.html

فایل static/index.html:

<!doctype html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="utf-8">

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1"
    >

    <meta
      name="description"
      content="نمونه رابط وب هوش مصنوعی متصل به API درواره"
    >

    <title>دستیار هوش مصنوعی درواره</title>

    <link
      rel="stylesheet"
      href="/static/styles.css"
    >

    <script
      src="/static/app.js"
      defer
    ></script>
  </head>

  <body>
    <header class="site-header">
      <div class="container">
        <a
          class="brand"
          href="https://darvareh.ir"
        >
          درواره
        </a>

        <p class="tagline">
          نمونه رابط وب هوش مصنوعی
        </p>
      </div>
    </header>

    <main class="container">
      <section
        class="hero"
        aria-labelledby="page-title"
      >
        <p class="eyebrow">
          پروژه عملی HTML
        </p>

        <h1 id="page-title">
          دستیار هوش مصنوعی فارسی
        </h1>

        <p class="intro">
          سؤال خود را بنویسید و نوع پاسخ را انتخاب کنید.
          درخواست از طریق Backend به API درواره ارسال می‌شود.
        </p>
      </section>

      <section
        class="assistant-card"
        aria-labelledby="assistant-title"
      >
        <h2 id="assistant-title">
          ارسال درخواست
        </h2>

        <form id="chat-form">
          <div class="form-field">
            <label for="message">
              سؤال یا درخواست
            </label>

            <textarea
              id="message"
              name="message"
              rows="7"
              minlength="3"
              maxlength="8000"
              aria-describedby="message-help"
              required
            ></textarea>

            <p
              id="message-help"
              class="help-text"
            >
              حداکثر ۸۰۰۰ کاراکتر
            </p>
          </div>

          <div class="form-field">
            <label for="response-style">
              نوع پاسخ
            </label>

            <select
              id="response-style"
              name="response_style"
            >
              <option value="short">
                کوتاه
              </option>

              <option value="detailed">
                کامل و مرحله‌ای
              </option>

              <option value="bullet">
                فهرست‌وار
              </option>
            </select>
          </div>

          <button
            id="submit-button"
            type="submit"
          >
            دریافت پاسخ
          </button>
        </form>
      </section>

      <section
        class="result-card"
        aria-labelledby="result-title"
      >
        <h2 id="result-title">
          پاسخ مدل
        </h2>

        <p
          id="status"
          class="status"
          role="status"
          aria-live="polite"
        ></p>

        <output
          id="result"
          class="result"
          for="message response-style"
        >
          پاسخ در این قسمت نمایش داده می‌شود.
        </output>
      </section>
    </main>

    <footer class="site-footer">
      <div class="container">
        <p>
          ساخته‌شده با HTML، JavaScript، FastAPI
          و API درواره
        </p>

        <a href="https://darvareh.ir/models">
          مشاهده مدل‌های درواره
        </a>
      </div>
    </footer>
  </body>
</html>

نکات HTML این صفحه:

زبان صفحه با lang="fa" مشخص شده است.
جهت صفحه rtl است.
از header، main، section و footer استفاده شده است.
هر Section عنوان دارد.
labelها به Form Control مربوط متصل‌اند.
وضعیت درخواست با aria-live اعلام می‌شود.
نتیجه داخل Element معنایی output قرار دارد.
Button دارای type="submit" است.
CSS و JavaScript در فایل‌های جدا قرار دارند.

ساخت styles.css

فایل static/styles.css:

:root {
  color-scheme: light;

  --background: #f5f7fb;
  --surface: #ffffff;
  --text: #171a24;
  --muted: #62687a;
  --primary: #6657e8;
  --primary-dark: #5142cf;
  --border: #dfe3ed;
  --focus: #9b91ff;
  --error: #b42318;
  --success: #067647;

  font-family:
    Vazirmatn,
    Tahoma,
    Arial,
    sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: var(--background);
  line-height: 1.8;
}

a {
  color: var(--primary-dark);
}

a:hover {
  text-decoration-thickness: 2px;
}

.container {
  width: min(100% - 32px, 840px);
  margin-inline: auto;
}

.site-header {
  padding-block: 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.site-header .container,
.site-footer .container {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-size: 1.3rem;
  font-weight: 800;
  text-decoration: none;
}

.tagline {
  margin: 0;
  color: var(--muted);
}

.hero {
  padding-block: 56px 32px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-weight: 700;
}

h1,
h2 {
  line-height: 1.4;
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 7vw, 3.5rem);
}

.intro {
  max-width: 680px;
  margin-block: 16px 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.assistant-card,
.result-card {
  margin-bottom: 24px;
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 18px 50px rgb(20 24 40 / 7%);
}

.assistant-card h2,
.result-card h2 {
  margin-top: 0;
}

.form-field {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}

textarea,
select,
button {
  width: 100%;
  font: inherit;
}

textarea,
select {
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  background: var(--surface);
}

textarea {
  min-height: 160px;
  padding: 14px;
  resize: vertical;
}

select {
  padding: 12px;
}

textarea:focus,
select:focus,
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.help-text {
  margin-block: 6px 0;
  color: var(--muted);
  font-size: 0.9rem;
}

button {
  padding: 13px 18px;
  border: 0;
  border-radius: 12px;
  color: white;
  background: var(--primary);
  font-weight: 800;
  cursor: pointer;
}

button:hover {
  background: var(--primary-dark);
}

button:disabled {
  opacity: 0.65;
  cursor: wait;
}

.status {
  min-height: 28px;
  color: var(--muted);
}

.status.error {
  color: var(--error);
}

.status.success {
  color: var(--success);
}

.result {
  display: block;
  min-height: 140px;
  padding: 18px;
  border-radius: 14px;
  background: #f8f8fc;
  white-space: pre-wrap;
}

.site-footer {
  margin-top: 48px;
  padding-block: 28px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.site-footer p {
  margin: 0;
}

@media (max-width: 640px) {
  .site-header .container,
  .site-footer .container {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero {
    padding-top: 36px;
  }
}

ساخت app.js

فایل static/app.js:

const form = document.querySelector("#chat-form");
const messageInput = document.querySelector("#message");
const styleInput = document.querySelector("#response-style");
const submitButton = document.querySelector("#submit-button");
const statusElement = document.querySelector("#status");
const resultElement = document.querySelector("#result");

function setStatus(message, type = "") {
  statusElement.textContent = message;
  statusElement.className = `status ${type}`.trim();
}

function setLoading(isLoading) {
  submitButton.disabled = isLoading;
  submitButton.textContent = isLoading
    ? "در حال دریافت پاسخ..."
    : "دریافت پاسخ";
}

form.addEventListener("submit", async (event) => {
  event.preventDefault();

  const message = messageInput.value.trim();
  const responseStyle = styleInput.value;

  if (message.length < 3) {
    setStatus(
      "لطفاً یک سؤال با حداقل سه کاراکتر بنویسید.",
      "error",
    );

    messageInput.focus();
    return;
  }

  setLoading(true);
  setStatus("درخواست در حال پردازش است.");
  resultElement.textContent = "";

  try {
    const response = await fetch("/api/chat", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Accept": "application/json",
      },
      body: JSON.stringify({
        message,
        response_style: responseStyle,
      }),
    });

    const data = await response.json();

    if (!response.ok) {
      throw new Error(
        data.detail || "درخواست با خطا مواجه شد.",
      );
    }

    resultElement.textContent = data.answer;
    setStatus("پاسخ با موفقیت دریافت شد.", "success");
  } catch (error) {
    resultElement.textContent =
      "پاسخی برای نمایش وجود ندارد.";

    setStatus(
      error instanceof Error
        ? error.message
        : "خطای پیش‌بینی‌نشده رخ داد.",
      "error",
    );
  } finally {
    setLoading(false);
  }
});

طبق مستندات Fetch API در MDN، تابع fetch() یک Promise برمی‌گرداند و از Objectهای Request و Response برای کار با درخواست شبکه استفاده می‌کند.

نکته مهم این است که fetch() فقط برای خطاهای Network به‌صورت خودکار Reject می‌شود. برای وضعیت‌هایی مانند 400 یا 500 باید response.ok را خودمان بررسی کنیم.

اجرای پروژه

uvicorn app:app --reload

مرورگر را باز کنید:

http://127.0.0.1:8000

Health Endpoint:

http://127.0.0.1:8000/api/health

مستندات FastAPI:

http://127.0.0.1:8000/docs

چرا API Key را داخل JavaScript قرار ندادیم؟

کد Frontend برای کاربر قابل مشاهده است. اگر API Key را داخل HTML یا JavaScript قرار دهید، کاربر می‌تواند آن را از روش‌های مختلف پیدا کند:

View Source
Developer Tools
Network Panel
فایل JavaScript
Source Map
Cache مرورگر

روش نامناسب:

const apiKey = "YOUR_REAL_API_KEY";

حتی اگر فایل JavaScript Minify شود، کلید واقعاً مخفی نمی‌شود.

معماری مناسب‌تر:

Browser
   │
   ▼
Backend شما
   │
   ▼
API درواره

Backend می‌تواند این موارد را نیز کنترل کند:

احراز هویت کاربر
محدودیت نرخ درخواست
محدودیت طول ورودی
انتخاب مدل
ثبت مصرف
Cache
Timeout
مدیریت خطا
جلوگیری از ارسال پارامترهای غیرمجاز

اعتبارسنجی Frontend و Backend

در HTML نوشته‌ایم:

<textarea
  minlength="3"
  maxlength="8000"
  required
></textarea>

این Validation تجربه کاربر را بهتر می‌کند، اما کافی نیست. کاربر می‌تواند مستقیماً به Endpoint درخواست بفرستد و Validation مرورگر را دور بزند.

به همین دلیل Backend نیز محدودیت دارد:

message: str = Field(
    min_length=3,
    max_length=8000,
)

قاعده مهم:

Validation سمت Client برای تجربه کاربری است؛ Validation سمت Server برای کنترل واقعی ورودی ضروری است.

مشاهده صفحه با Developer Tools

در بیشتر مرورگرها می‌توانید Developer Tools را با F12 یا گزینه Inspect باز کنید.

بخش‌های مهم:

Elements

مشاهده و آزمایش DOM و CSS.

Console

مشاهده Log و خطاهای JavaScript.

Network

مشاهده درخواست‌ها، Headerها، Status Code و زمان پاسخ.

Sources

مشاهده فایل‌های JavaScript و Source Mapها.

Application

مشاهده Storage، Cookie، Cache و Service Worker.

Lighthouse یا ابزارهای مشابه

بررسی بعضی جنبه‌های Performance، Accessibility و SEO.

تغییرات انجام‌شده در Elements معمولاً موقت‌اند و با Refresh از بین می‌روند. برای دائمی‌کردن باید فایل پروژه را ویرایش کنید.

DOM چیست؟

مرورگر سند HTML را به ساختاری در حافظه به نام Document Object Model یا DOM تبدیل می‌کند.

JavaScript با DOM تعامل می‌کند:

const title = document.querySelector("h1");
title.textContent = "عنوان جدید";

این کد اولین h1 را پیدا و متن آن را تغییر می‌دهد.

انتخاب با ID:

const result = document.querySelector("#result");

انتخاب با Class:

const cards = document.querySelectorAll(".card");

Responsive HTML

Responsive Design بیشتر با CSS انجام می‌شود، اما HTML نیز باید برای دستگاه‌های مختلف آماده باشد.

Meta Viewport:

<meta
  name="viewport"
  content="width=device-width, initial-scale=1"
>

تصویر انعطاف‌پذیر در CSS:

img {
  max-width: 100%;
  height: auto;
}

برای تصویرهای مختلف می‌توانید از picture استفاده کنید:

<picture>
  <source
    srcset="image-large.webp"
    media="(min-width: 900px)"
  >

  <img
    src="image-small.webp"
    alt="رابط وب هوش مصنوعی"
  >
</picture>

Performance در HTML

برای بهبود عملکرد:

ساختار HTML را ساده نگه دارید.
تصویرها را بهینه کنید.
عرض و ارتفاع تصویر را مشخص کنید.
CSS و JavaScript غیرضروری را کاهش دهید.
Scriptهای مناسب را با defer بارگذاری کنید.
از Lazy Loading برای تصویرهای پایین صفحه استفاده کنید.
تعداد Requestها را کنترل کنید.
فونت‌ها را بهینه بارگذاری کنید.
از Markup بسیار تودرتو خودداری کنید.

Lazy Loading:

<img
  src="image.webp"
  alt="نمونه صفحه HTML"
  loading="lazy"
  width="1200"
  height="675"
>

برای تصویر اصلی بالای صفحه، Lazy Loading همیشه انتخاب مناسبی نیست؛ زیرا ممکن است نمایش عنصر مهم را عقب بیندازد.

خطاهای رایج HTML

فراموش‌کردن Closing Tag

نادرست:

<p>متن پاراگراف

بهتر:

<p>متن پاراگراف</p>

Nesting نادرست

نادرست:

<p>
  متن
  <div>محتوا</div>
</p>

ساختار را متناسب با قواعد Elementها اصلاح کنید:

<div>
  <p>متن</p>
  <div>محتوا</div>
</div>

id تکراری

نادرست:

<input id="email">
<input id="email">

هر id باید در سند یکتا باشد.

تصویر بدون alt

نادرست:

<img src="chart.webp">

برای تصویر معنادار:

<img
  src="chart.webp"
  alt="نمودار مقایسه سه مدل هوش مصنوعی"
>

استفاده از br برای فاصله‌گذاری

نادرست:

<p>عنوان</p>
<br>
<br>
<br>
<p>متن</p>

فاصله ظاهری را با CSS تنظیم کنید:

p {
  margin-bottom: 24px;
}

استفاده از Heading برای ظاهر

نادرست:

<h3>متنی که فقط باید بزرگ باشد</h3>

اگر متن Heading نیست:

<p class="large-text">متن بزرگ</p>

استفاده از div به‌عنوان دکمه

نادرست:

<div onclick="submitForm()">ارسال</div>

درست:

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

قراردادن Secret در HTML

هر داده‌ای که به مرورگر ارسال شود، باید قابل مشاهده فرض شود. API Key، رمز پایگاه داده و Credential داخلی را در HTML، JavaScript، Comment یا Data Attribute قرار ندهید.

اعتبارسنجی کد HTML

برای یافتن خطاهای ساختاری می‌توانید از HTML Validator معتبر استفاده کنید یا Extensionهای ویرایشگر را به کار ببرید.

همچنین این موارد را دستی بررسی کنید:

فقط یک id برای هر Element
ارتباط درست label و input
ترتیب منطقی Headingها
alt تصویرها
بسته‌شدن Elementها
قرارگیری درست Elementها
وجود lang
وجود title
وجود Meta Viewport
نبودن Secret
کارکرد Keyboard
نمایش مناسب در موبایل

ساختار پیشنهادی یک صفحه 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="توضیح کوتاه و مرتبط صفحه"
    >

    <link
      rel="stylesheet"
      href="/static/styles.css"
    >

    <script
      src="/static/app.js"
      defer
    ></script>
  </head>

  <body>
    <header>
      <nav aria-label="منوی اصلی">
      </nav>
    </header>

    <main>
      <article>
        <h1>عنوان اصلی صفحه</h1>

        <section>
          <h2>عنوان بخش</h2>
        </section>
      </article>
    </main>

    <footer>
    </footer>
  </body>
</html>

تمرین‌های پیشنهادی HTML

تمرین اول: صفحه معرفی شخصی

شامل:

نام
تصویر
معرفی کوتاه
مهارت‌ها
لینک شبکه‌های حرفه‌ای
فرم تماس

تمرین دوم: صفحه مقاله

شامل:

Header
عنوان مقاله
نویسنده
تاریخ
تصویر
چند Section
فهرست
نقل‌قول
مقالات مرتبط
Footer

تمرین سوم: صفحه محصول

شامل:

نام محصول
تصویر
ویژگی‌ها
قیمت
دکمه اقدام
پرسش‌های متداول

تمرین چهارم: فرم دریافت Prompt

شامل:

Textarea
Select
Checkbox
Submit Button
Output
پیام خطا

تمرین پنجم: رابط دستیار هوش مصنوعی

پروژه مقاله را توسعه دهید و قابلیت‌های زیر را اضافه کنید:

تاریخچه پیام‌ها
شمارش کاراکتر
دکمه پاک‌کردن
توقف درخواست
انتخاب مدل در Backend
ذخیره محلی تنظیمات غیرمحرمانه
نمایش زمان پاسخ

انتخاب مدل و مجازبودن آن باید در Backend کنترل شود؛ به ورودی مرورگر به‌تنهایی اعتماد نکنید.

مسیر یادگیری بعد از HTML

پس از تسلط بر HTML:

CSS پایه
Flexbox و Grid
Responsive Design
JavaScript پایه
DOM
Fetch API
Git و GitHub
Accessibility
SEO فنی
یک Framework مانند React یا Vue، در صورت نیاز
Backend و API
تست و استقرار

HTML را سریع رد نکنید. درک Semantic HTML، Form و Accessibility حتی هنگام استفاده از Frameworkهای مدرن نیز اهمیت دارد.

پرسش‌های متداول

HTML چیست؟

HTML زبان نشانه‌گذاری استاندارد برای تعریف ساختار و معنای محتوای صفحات وب است.

HTML مخفف چیست؟

HTML مخفف HyperText Markup Language است.

آیا HTML زبان برنامه‌نویسی است؟

HTML معمولاً زبان برنامه‌نویسی محسوب نمی‌شود؛ بلکه یک Markup Language برای ساختاربندی محتواست.

برای یادگیری HTML چقدر زمان لازم است؟

اصول پایه HTML را می‌توان در مدت کوتاهی یاد گرفت، اما تسلط بر Semantic HTML، Accessibility، Formها، SEO و ساختار پروژه به تمرین و ساخت پروژه واقعی نیاز دارد.

آیا برای یادگیری HTML باید Python بلد باشیم؟

خیر. HTML مستقل از Python است. در پروژه مقاله از Python فقط برای ساخت Backend و محافظت از API Key استفاده شده است.

آیا HTML بدون CSS کار می‌کند؟

بله. صفحه HTML بدون CSS نمایش داده می‌شود، اما ظاهر آن از Style پیش‌فرض مرورگر استفاده می‌کند.

آیا HTML بدون JavaScript کار می‌کند؟

بله. مقاله، صفحه معرفی، لینک‌ها، تصویرها و Formهای معمول می‌توانند بدون JavaScript نیز کار کنند. تعامل‌های پویا معمولاً به JavaScript نیاز دارند.

فایل اصلی HTML چه نامی دارد؟

در بسیاری از وب‌سایت‌ها فایل ورودی اصلی index.html نام دارد، اما این نام الزام زبان HTML نیست.

تفاوت id و class چیست؟

id باید در سند یکتا باشد. class می‌تواند روی چند Element تکرار شود.

Semantic HTML چیست؟

استفاده از Elementهایی مانند header، main، article و footer برای مشخص‌کردن معنای بخش‌های صفحه است.

آیا HTML برای SEO مهم است؟

بله. ساختار Heading، Title، Meta Description، لینک‌ها، Semantic HTML و Alt تصویر به درک بهتر صفحه کمک می‌کنند. بااین‌حال، HTML درست به‌تنهایی رتبه مشخصی را تضمین نمی‌کند.

آیا می‌توان مستقیماً از HTML به API درواره متصل شد؟

مرورگر می‌تواند با JavaScript درخواست HTTP ارسال کند، اما نباید API Key خصوصی را در Frontend قرار دهید. برای برنامه عمومی، درخواست را از Backend خود عبور دهید.

چرا API Key در JavaScript امن نیست؟

زیرا کد Frontend و Requestهای Network در مرورگر قابل مشاهده‌اند. Obfuscation یا Minifyکردن نیز Secret را واقعاً مخفی نمی‌کند.

چگونه مدل هوش مصنوعی را تغییر دهیم؟

مقدار زیر را در فایل .env Backend تغییر دهید:

DARVAREH_MODEL_ID=YOUR_MODEL_ID

شناسه‌ها و قیمت‌های جاری مدل‌ها در صفحه مدل‌های درواره قرار دارند.

آیا می‌توان این پروژه را منتشر کرد؟

بله، اما قبل از انتشار عمومی باید مواردی مانند Authentication، Rate Limiting، مدیریت Secret، HTTPS، محدودیت مصرف، Log کنترل‌شده، Timeout و مانیتورینگ را متناسب با محیط خود پیاده‌سازی کنید.

چک‌لیست پایان آموزش

پس از تکمیل مقاله باید بتوانید:

سند HTML بسازید.
تفاوت Tag، Element و Attribute را توضیح دهید.
Heading و Paragraph ایجاد کنید.
لیست بسازید.
لینک و تصویر اضافه کنید.
Form قابل استفاده بسازید.
جدول داده ایجاد کنید.
از Semantic HTML استفاده کنید.
CSS و JavaScript را به صفحه متصل کنید.
Metadata اصلی را تعریف کنید.
اصول پایه Accessibility را رعایت کنید.
با Fetch درخواست API بفرستید.
رابط HTML را به Backend متصل کنید.
از قراردادن API Key در مرورگر جلوگیری کنید.
پروژه وب هوش مصنوعی را با API درواره اجرا کنید.

جمع‌بندی

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

در این مقاله مفاهیم اصلی HTML را بررسی کردیم:

ساختار سند
Tag
Element
Attribute
Heading
Paragraph
List
Link
Image
Form
Table
Semantic HTML
Metadata
Accessibility
اتصال CSS و JavaScript

در پروژه عملی نیز یک رابط وب فارسی ساختیم که درخواست کاربر را به Backend می‌فرستد و Backend از طریق آدرس زیر به API درواره متصل می‌شود:

https://api.darvareh.ir/v1

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

منابع تکمیلی

مقالات مرتبط

برای مطالعه شرایط استفاده و محدودیت‌های مسئولیت، صفحه «سلب مسئولیت» را مشاهده کنید.