آموزش HTML از صفر تا ساخت سایت
یاد بگیر، خودت کدنویسی کن، نتیجه را ببین و همان لحظه اشتباهاتت را اصلاح کن ❤️
HTML چیست؟
درس 1 از 49HTML زبان نشانهگذاری صفحات وب است. با HTML ساختار صفحه را میسازیم؛ مثل عنوان، متن، تصویر، لینک و فرم.
HTML ساختار صفحه را مشخص میکند؛ CSS برای زیبایی و JavaScript برای رفتار و تعامل استفاده میشود.
<h1>سلام دنیا</h1>یک عنوان h1 بساز و داخل آن عبارت «سلام دنیا» را بنویس.
<h1>سلام دنیا</h1>
تگ چیست؟
درس 2 از 49تگها عناصر HTML هستند. بسیاری از تگها یک تگ شروع و یک تگ پایان دارند.
مثلاً <p> شروع پاراگراف و </p> پایان آن است.
<p>متن من</p>یک پاراگراف با متن «متن من» ایجاد کن.
<p>متن من</p>
ساختار صفحه HTML
درس 3 از 49یک صفحه HTML معمولاً از html، head و body تشکیل میشود.
محتوایی که کاربر در صفحه میبیند معمولاً داخل body قرار میگیرد.
<html>
<head></head>
<body>
سلام
</body>
</html>ساختار اصلی html، head و body را بنویس.
<html><head></head><body>سلام</body></html>
DOCTYPE چیست؟
درس 4 از 49DOCTYPE به مرورگر اعلام میکند که سند از استاندارد HTML استفاده میکند.
در HTML5 شکل صحیح آن بسیار ساده است.
<!DOCTYPE html>DOCTYPE مربوط به HTML5 را بنویس.
<!DOCTYPE html>
عنوان صفحه با title
درس 5 از 49تگ title عنوان صفحه را مشخص میکند و معمولاً در تب مرورگر دیده میشود.
title داخل head قرار میگیرد.
<title>سایت من</title>عنوان صفحه را «سایت من» قرار بده.
<title>سایت من</title>
عنوان اصلی h1
درس 6 از 49h1 مهمترین عنوان صفحه است و معمولاً عنوان اصلی محتوا را مشخص میکند.
عنوانها را بر اساس اهمیت و ساختار محتوا انتخاب کن.
<h1>آموزش HTML</h1>یک h1 با متن «آموزش HTML» بساز.
<h1>آموزش HTML</h1>
عنوانهای h2 تا h6
درس 7 از 49HTML شش سطح عنوان دارد: h1 تا h6.
h1 مهمترین سطح و h6 پایینترین سطح عنوان است.
<h2>بخش اول</h2>یک عنوان h2 با متن «بخش اول» بساز.
<h2>بخش اول</h2>
پاراگراف p
درس 8 از 49برای نوشتههای معمولی از تگ p استفاده میکنیم.
پاراگراف باعث میشود متن ساختارمندتر و خواناتر باشد.
<p>من HTML یاد میگیرم.</p>یک پاراگراف با متن «من HTML یاد میگیرم.» بساز.
<p>من HTML یاد میگیرم.</p>
شکستن خط با br
درس 9 از 49تگ br باعث میشود متن از خط بعد ادامه پیدا کند.
br تگ بدون تگ پایانی است.
سلام<br>دنیابین «سلام» و «دنیا» یک br قرار بده.
سلام<br>دنیا
متن مهم با strong
درس 10 از 49strong برای مشخص کردن اهمیت معنایی یک متن استفاده میشود.
strong فقط برای ضخیم کردن متن نیست؛ معنای اهمیت متن را هم مشخص میکند.
<strong>مهم</strong>کلمه «مهم» را با strong مشخص کن.
<strong>مهم</strong>
ساخت لینک
درس 11 از 49برای ساخت لینک از تگ a استفاده میکنیم.
آدرس مقصد لینک داخل ویژگی href قرار میگیرد.
<a href="https://example.com">سایت</a>یک لینک بساز که ویژگی href داشته باشد.
<a href="https://example.com">سایت</a>
ویژگی href
درس 12 از 49href آدرس مقصد یک لینک را مشخص میکند.
مقدار href میتواند آدرس یک سایت یا مسیر یک صفحه داخلی باشد.
<a href="https://google.com">گوگل</a>لینکی به https://google.com بساز.
<a href="https://google.com">گوگل</a>
باز کردن لینک در تب جدید
درس 13 از 49با target="_blank" میتوان لینک را در تب جدید باز کرد.
برای لینک خارجی بهتر است rel="noopener" نیز در نظر گرفته شود.
<a href="https://example.com" target="_blank">ورود</a>یک لینک بساز که در تب جدید باز شود.
<a href="https://example.com" target="_blank">ورود</a>
قرار دادن تصویر
درس 14 از 49برای نمایش تصویر از تگ img استفاده میکنیم.
img تگ بدون تگ پایانی است.
<img src="image.jpg" alt="تصویر">یک تصویر بساز که src و alt داشته باشد.
<img src="image.jpg" alt="تصویر">
ویژگی alt
درس 15 از 49alt توضیح متنی تصویر است و برای دسترسیپذیری و سئو اهمیت دارد.
برای تصویرهای محتوایی، توضیحی واضح و مرتبط در alt بنویس.
<img src="photo.jpg" alt="عکس طبیعت">تصویری با alt برابر «عکس طبیعت» بساز.
<img src="photo.jpg" alt="عکس طبیعت">
ویدئو
درس 16 از 49HTML امکان نمایش ویدئو را با تگ video فراهم میکند.
با controls کنترلهای پخش ویدئو نمایش داده میشوند.
<video controls></video>یک video با controls بساز.
<video controls></video>
صدا با audio
درس 17 از 49برای نمایش و پخش فایل صوتی میتوان از audio استفاده کرد.
controls کنترلهای پخش صدا را نمایش میدهد.
<audio controls></audio>یک audio با controls ایجاد کن.
<audio controls></audio>
لیست نامرتب ul
درس 18 از 49ul برای ساخت لیستهایی استفاده میشود که ترتیب عددی ندارند.
هر مورد لیست با li ساخته میشود.
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>یک ul با حداقل دو li بساز.
<ul><li>HTML</li><li>CSS</li></ul>
لیست مرتب ol
درس 19 از 49ol برای لیستهایی استفاده میشود که ترتیب آیتمها اهمیت دارد.
مرورگر معمولاً شمارهگذاری را خودش انجام میدهد.
<ol>
<li>اول</li>
<li>دوم</li>
</ol>یک ol با دو li بساز.
<ol><li>اول</li><li>دوم</li></ol>
div چیست؟
درس 20 از 49div یک ظرف عمومی برای گروهبندی عناصر HTML است.
div معنای خاصی ندارد و بیشتر برای ساختاردهی استفاده میشود.
<div>
<p>سلام</p>
</div>یک div بساز و داخل آن p قرار بده.
<div><p>سلام</p></div>
span چیست؟
درس 21 از 49span برای مشخص کردن قسمت کوچکی از متن یا محتوا استفاده میشود.
span معمولاً برای بخشهای inline متن کاربرد دارد.
<span>دوست من</span>یک span بساز.
<span>دوست من</span>
header
درس 22 از 49header برای سربرگ صفحه یا یک بخش از محتوا استفاده میشود.
لوگو، عنوان و عناصر ابتدایی صفحه میتوانند در header قرار بگیرند.
<header>
<h1>سایت من</h1>
</header>یک header بساز و داخل آن h1 قرار بده.
<header><h1>سایت من</h1></header>
nav
درس 23 از 49nav برای مجموعه لینکهای ناوبری و منوی سایت استفاده میشود.
لینکهای اصلی سایت را میتوان داخل nav قرار داد.
<nav>
<a href="/">خانه</a>
</nav>یک nav بساز که داخل آن یک لینک باشد.
<nav><a href="/">خانه</a></nav>
main
درس 24 از 49main محتوای اصلی صفحه را مشخص میکند.
main باید محتوایی را شامل شود که هسته اصلی صفحه است.
<main>
<h1>محتوای اصلی</h1>
</main>یک main بساز و داخل آن h1 قرار بده.
<main><h1>محتوای اصلی</h1></main>
section و article
درس 25 از 49section یک بخش مستقل از محتوا و article محتوایی است که میتواند به صورت مستقل معنا داشته باشد.
استفاده از تگهای معنایی باعث میشود ساختار صفحه برای انسان و موتور جستجو قابل فهمتر باشد.
<section>
<article>مقاله</article>
</section>یک section بساز و داخل آن article قرار بده.
<section><article>مقاله</article></section>
footer
درس 26 از 49footer برای بخش پایانی صفحه یا یک بخش استفاده میشود.
اطلاعات کپیرایت و لینکهای پایانی معمولاً در footer قرار میگیرند.
<footer>© 2026</footer>یک footer بساز.
<footer>© 2026</footer>
ساخت جدول
درس 27 از 49برای ساخت جدول از table استفاده میکنیم.
جدول برای نمایش دادههای جدولی است، نه طراحی کلی صفحه.
<table>
<tr>
<td>سلام</td>
</tr>
</table>یک table بساز.
<table><tr><td>سلام</td></tr></table>
tr و td
درس 28 از 49tr یک ردیف و td یک سلول معمولی جدول است.
td باید داخل tr قرار بگیرد.
<table>
<tr>
<td>نام</td>
</tr>
</table>جدولی بساز که یک tr و یک td داشته باشد.
<table><tr><td>نام</td></tr></table>
عنوان جدول با th
درس 29 از 49th برای سلول عنوان جدول استفاده میشود.
th از نظر معنایی عنوان ستون یا ردیف را مشخص میکند.
<table>
<tr>
<th>نام</th>
</tr>
</table>یک جدول با یک th بساز.
<table><tr><th>نام</th></tr></table>
ساخت form
درس 30 از 49form برای دریافت اطلاعات از کاربر استفاده میشود.
یک فرم میتواند input، textarea، select و button داشته باشد.
<form>
<input type="text">
</form>یک form بساز و داخل آن input قرار بده.
<form><input type="text"></form>
input متنی
درس 31 از 49input یکی از مهمترین عناصر فرم است و type نوع ورودی را مشخص میکند.
برای دریافت متن معمولی از type="text" استفاده میکنیم.
<input type="text">یک input از نوع text بساز.
<input type="text">
label
درس 32 از 49label عنوان یا توضیح یک ورودی فرم را مشخص میکند.
استفاده صحیح از label دسترسیپذیری فرم را بهتر میکند.
<label>نام</label>یک label با متن «نام» بساز.
<label>نام</label>
placeholder
درس 33 از 49placeholder یک راهنمای کوتاه داخل input نمایش میدهد.
placeholder جای label را نمیگیرد؛ فقط راهنمای موقت است.
<input placeholder="نام خود را بنویس">یک input با placeholder «نام خود را بنویس» بساز.
<input placeholder="نام خود را بنویس">
required
درس 34 از 49required باعث میشود کاربر نتواند آن فیلد را خالی ارسال کند.
required یک ویژگی Boolean است.
<input type="text" required>یک input اجباری بساز.
<input type="text" required>
textarea
درس 35 از 49textarea برای دریافت متنهای طولانی مانند پیام کاربر استفاده میشود.
در فرم تماس معمولاً برای پیام از textarea استفاده میشود.
<textarea></textarea>یک textarea بساز.
<textarea></textarea>
select و option
درس 36 از 49select یک فهرست انتخابی ایجاد میکند و option گزینههای آن را مشخص میکند.
option باید داخل select قرار بگیرد.
<select>
<option>ایران</option>
</select>یک select با یک option بساز.
<select><option>ایران</option></select>
button
درس 37 از 49button برای ساخت دکمه تعاملی استفاده میشود.
در فرمها button میتواند برای ارسال فرم یا عملیات دیگر استفاده شود.
<button>ارسال</button>یک دکمه با متن «ارسال» بساز.
<button>ارسال</button>
class
درس 38 از 49class برای دستهبندی عناصر استفاده میشود و ارتباط HTML با CSS را ساده میکند.
یک class میتواند روی چند عنصر استفاده شود.
<p class="text">سلام</p>یک p با class برابر text بساز.
<p class="text">سلام</p>
id
درس 39 از 49id یک شناسه برای شناسایی یک عنصر خاص است.
بهتر است یک id در صفحه منحصربهفرد باشد.
<div id="about">درباره ما</div>یک div با id برابر about بساز.
<div id="about">درباره ما</div>
class و id با هم
درس 40 از 49یک عنصر میتواند همزمان class و id داشته باشد.
class برای گروهبندی و id برای شناسایی یک عنصر خاص کاربرد دارد.
<div id="box" class="card">محتوا</div>یک div بساز که id آن box و class آن card باشد.
<div id="box" class="card">محتوا</div>
زبان صفحه با lang
درس 41 از 49ویژگی lang زبان اصلی سند HTML را مشخص میکند.
برای یک صفحه فارسی معمولاً lang="fa" استفاده میشود.
<html lang="fa">یک html با lang فارسی بساز.
<html lang="fa">
meta description
درس 42 از 49meta description خلاصهای از محتوای صفحه را مشخص میکند.
این meta معمولاً داخل head قرار میگیرد.
<meta name="description" content="آموزش HTML">یک meta description برای آموزش HTML بساز.
<meta name="description" content="آموزش HTML">
ساختار Heading و سئو
درس 43 از 49استفاده منطقی از h1، h2 و h3 به ساختار بهتر محتوا کمک میکند.
عنوان را فقط برای بزرگ کردن نوشته استفاده نکن؛ عنوان باید نقش معنایی داشته باشد.
<h1>سایت من</h1>
<h2>خدمات</h2>یک h1 و سپس یک h2 ایجاد کن.
<h1>سایت من</h1><h2>خدمات</h2>
ساخت Header سایت
درس 44 از 49حالا آموختهها را در یک ساختار واقعی سایت استفاده میکنیم.
Header میتواند شامل عنوان یا لوگوی سایت باشد.
<header>
<h1>سایت من</h1>
</header>یک header با h1 بساز.
<header><h1>سایت من</h1></header>
ساخت منوی سایت
درس 45 از 49منوی سایت را میتوان با nav و لینکهای a ساخت.
هر لینک منو باید مقصد مشخصی داشته باشد.
<nav>
<a href="/">خانه</a>
<a href="/about">درباره ما</a>
</nav>یک nav با حداقل دو لینک بساز.
<nav><a href="/">خانه</a><a href="/about">درباره ما</a></nav>
ساخت بخش معرفی
درس 46 از 49یک section میتواند یک بخش مستقل از صفحه را نمایش دهد.
در اینجا از h2 و p برای عنوان و توضیح استفاده میکنیم.
<section>
<h2>درباره ما</h2>
<p>سلام</p>
</section>یک section بساز که h2 و p داشته باشد.
<section><h2>درباره ما</h2><p>سلام</p></section>
ساخت کارت خدمات
درس 47 از 49با ترکیب div، class، h3 و p میتوان یک کارت ساده ساخت.
بعداً با CSS میتوان همین کارت را به یک کارت حرفهای تبدیل کرد.
<div class="card">
<h3>طراحی سایت</h3>
<p>طراحی حرفهای</p>
</div>یک div با class card بساز که h3 و p داشته باشد.
<div class="card"><h3>طراحی سایت</h3><p>طراحی حرفهای</p></div>
ساخت فرم تماس
درس 48 از 49اکنون یک فرم تماس ساده با چند عنصر مهم HTML میسازیم.
در پروژههای واقعی، PHP یا JavaScript میتواند اطلاعات فرم را پردازش کند.
<form>
<label>نام</label>
<input type="text">
<textarea></textarea>
<button>ارسال</button>
</form>فرمی بساز که label، input، textarea و button داشته باشد.
<form><label>نام</label><input type="text"><textarea></textarea><button>ارسال</button></form>
پروژه نهایی HTML
درس 49 از 49تبریک! حالا باید آموختههایت را کنار هم قرار بدهی و یک صفحه واقعی HTML بسازی.
سعی کن از header، nav، main، section و footer استفاده کنی.
<header>...</header>
<nav>...</nav>
<main>
<section>...</section>
</main>
<footer>...</footer>صفحهای بساز که header، nav، main، section و footer داشته باشد.
<header><h1>سایت من</h1></header><nav><a href="/">خانه</a></nav><main><section><h2>درباره ما</h2><p>سلام</p></section></main><footer>© 2026</footer>
تبریک! دوره را تمام کردی
تو با مفاهیم اصلی HTML، متن، لینک، تصویر، لیست، جدول، فرم، ساختار معنایی و اصول اولیه سئو آشنا شدی.
حالا آمادهای CSS را یاد بگیری و صفحاتت را زیبا کنی ❤️