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

اصطلاح‌های تازه شاید اولش کمی ناآشنا به نظر برسن، ولی جای نگرانی نیست. هرکدوم رو با یک مثال ساده بررسی می‌کنیم و در پایان هم تمرینی دارید که می‌تونید نتیجه‌اش رو توی مرورگر ببینید.

توی این جلسه قراره چی یاد بگیریم؟

• آشنایی با ساختار تگ‌های HTML
• شناخت تگ آغاز، تگ پایان و عنصر تهی
• ساخت یک صفحه ساده با تگ‌های کاربردی HTML

قبل از شروع چه چیزهایی لازم دارید؟

برای انجام تمرین‌های این جلسه فقط این سه مورد رو آماده کنید:

• یک ویرایشگر متن ساده مثل Visual Studio Code یا حتی Notepad
• یک فایل با پسوند .html، مثل index.html
• یک مرورگر مثل Chrome یا Firefox برای دیدن نتیجه کدها

اگه هنوز فایل رو نساختید، اول یک پوشه تازه ایجاد کنید. بعد داخل ویرایشگر، فایلی با نام index.html بسازید و ذخیره‌اش کنید.

تگ HTML چیه و چطور نوشته می‌شه؟

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

بیشتر تگ‌ها بین علامت‌های < و > نوشته می‌شن. وقتی تگ آغاز، محتوا و تگ پایان کنار هم قرار می‌گیرن، یک عنصر HTML ساخته می‌شه:

<p>این یک پاراگراف ساده هست.</p>

تگ آغاز و تگ پایان چه فرقی دارن؟

تگ آغاز، مثل <p>، شروع عنصر رو نشون می‌ده. تگ پایان با یک اسلش نوشته می‌شه؛ مثل </p>. محتوای عنصر هم بین این دو تگ قرار می‌گیره.

بعضی عنصرها مثل img هیچ محتوای متنی داخل خودشون ندارن. به این‌ها «عنصر تهی» می‌گن و براشون تگ پایان جداگانه‌ای نوشته نمی‌شه.

ویژگی یا Attribute چیه؟

ویژگی یا Attribute اطلاعات بیشتری درباره یک عنصر می‌ده. ویژگی داخل تگ آغاز قرار می‌گیره و معمولاً یک نام و یک مقدار داره. توی نمونه زیر، lang زبان اصلی صفحه رو مشخص می‌کنه:

<html lang="fa">

بهتره مقدار ویژگی رو همیشه داخل علامت نقل‌قول بذارید. با این کار، کد واضح‌تر می‌مونه و احتمال اشتباه کمتر می‌شه.

تگ‌های تو‌در‌تو رو چطور درست می‌نویسیم؟

تگ تو‌در‌تو یعنی یک عنصر داخل عنصر دیگه قرار بگیره. توی این حالت، باید اول عنصری رو ببندید که آخر از همه بازش کردید:

<div>  <p>این پاراگراف داخل div قرار داره.</p></div>

تورفتگی ابتدای خط برای مرورگر ضروری نیست، ولی کمک می‌کنه ساختار کد رو راحت‌تر ببینید و تگ‌ها رو اشتباه نبندید.

تگ div چه کاری انجام می‌ده؟

تگ div یک ظرف عمومی برای گروه‌بندی چند عنصره. می‌تونید عنوان، متن، تصویر یا عنصرهای دیگه رو داخلش بذارید و بعد با CSS ظاهر اون بخش رو تغییر بدید.

ساخت یک بخش ساده با div

<div>  <h2>درباره ما</h2>  <p>اینجا می‌تونید یک معرفی کوتاه بنویسید.</p></div>

توی این نمونه، یک عنوان و یک پاراگراف داخل یک بخش قرار گرفتن. خود div ظاهر خاصی ایجاد نمی‌کنه؛ فقط عنصرهای مرتبط رو کنار هم نگه می‌داره.

چرا div به‌تنهایی معنی خاصی نداره؟

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

چه وقت‌هایی بهتره از تگ‌های معنایی استفاده کنید؟

اسم تگ معنایی، نقش محتوا رو روشن می‌کنه. چند نمونه پرکاربردش رو اینجا می‌بینید:

• header برای سربرگ صفحه یا یک بخش
• nav برای منوی ناوبری و لینک‌های اصلی
• main برای محتوای اصلی صفحه
• section برای یک بخش موضوعی از محتوا
• article برای محتوای مستقلی مثل نوشته یا خبر
• footer برای پاورقی صفحه یا یک بخش

اگه برای گروه‌بندی موردنظرتون هیچ عنصر معنایی مناسبی پیدا نکردید، استفاده از div انتخاب خوبیه.

تفاوت Block و Inline به زبان ساده

Block و Inline دو روش رایج برای نمایش عنصرها هستن. این اصطلاح‌ها بیشتر به چیدمان عنصر مربوط می‌شن، نه معنی خود تگ.

عنصر Block چطور نمایش داده می‌شه؟

عنصر Block معمولاً از یک خط تازه شروع می‌شه و فضای افقی در دسترس داخل عنصر والدش رو می‌گیره. div، p و تگ‌های عنوان به‌صورت پیش‌فرض چنین رفتاری دارن.

عنصر Inline چطور نمایش داده می‌شه؟

عنصر Inline معمولاً وسط جریان متن قرار می‌گیره و خط تازه‌ای برای خودش نمی‌سازه. برای نمونه، تگ a برای لینک و تگ span برای مشخص‌کردن قسمت کوتاهی از متن، به‌صورت پیش‌فرض Inline هستن.

CSS چطور نوع نمایش عناصر رو تغییر می‌ده؟

CSS زبانیه که ظاهر و چیدمان صفحه رو کنترل می‌کنه. با ویژگی display می‌تونید رفتار نمایشی یک عنصر رو عوض کنید. پس Block یا Inline بودن فقط یک رفتار پیش‌فرضه و قانون همیشگی خود تگ نیست.

span {  display: block;}

تگ‌های عنوان h1 تا h6 چه کاربردی دارن؟

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

ساختار درست تگ‌های عنوان

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

به‌جای ساختاری مثل <h1/> باید تگ پایان رو به‌شکل </h1> بنویسید. همون‌طور که می‌بینید، اسلش تگ پایان بعد از علامت < قرار می‌گیره.

چطور عنوان‌ها رو با ترتیب منطقی بچینید؟

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

سطح عنوان رو بر اساس ساختار محتوا انتخاب کنید، نه اندازه ظاهری متن. برای تغییر اندازه، رنگ یا ظاهر عنوان باید سراغ CSS برید.

تگ‌های عنوان چه کمکی به خوانایی و سئو می‌کنن؟

عنوان‌های روشن و دقیق کمک می‌کنن کاربر سریع‌تر به بخش موردنظرش برسه. موتورهای جستجو و صفحه‌خوان‌ها هم ساختار محتوا رو بهتر درک می‌کنن. عدد تگ به‌تنهایی امتیاز ثابت سئو نداره؛ چیزی که مهمه، ترتیب منطقی عنوان‌ها و ارتباط هر عنوان با محتوای زیر اونه.

اگه می‌خواید این موضوع رو دقیق‌تر یاد بگیرید، مقاله آیا استفاده از تگ H1 ضروریه جزئیات بیشتری درباره ساختار عنوان‌ها داره.

اشتباه‌های رایج موقع استفاده از عنوان‌ها

• استفاده از عنوان فقط برای بزرگ‌کردن متن
• رد کردن بی‌دلیل سطح عنوان‌ها، مثل رفتن مستقیم از h2 به h4
• نوشتن تگ پایان به‌شکل اشتباه

تگ p چطور پاراگراف می‌سازه؟

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

نوشتن یک پاراگراف ساده

<p>این اولین پاراگراف صفحه من هست.</p>
<p>این هم پاراگراف دومه.</p>

هر تگ p به‌صورت پیش‌فرض یک عنصر Block می‌سازه. برای همین، پاراگراف دوم معمولاً زیر پاراگراف اول دیده می‌شه.

چرا نباید برای فاصله‌گذاری از پاراگراف خالی استفاده کنید؟

پاراگراف خالی ساختار محتوا رو شلوغ می‌کنه و ممکنه ابزارهای کمکی رو هم به اشتباه بندازه. برای ایجاد فاصله بین عنصرها، از ویژگی‌های فاصله‌گذاری CSS مثل margin و padding استفاده کنید.

تگ img چطور تصویر رو به صفحه اضافه می‌کنه؟

تگ img تصویر رو داخل صفحه نمایش می‌ده. آدرس فایل، متن جایگزین و اندازه تصویر هم با ویژگی‌های همین تگ مشخص می‌شن.

چرا img یک عنصر تهی هست؟

img محتوایی بین تگ آغاز و پایان نداره. اطلاعات موردنیازش داخل ویژگی‌ها نوشته می‌شن، پس نباید براش </img> بذارید.

ویژگی src و آدرس فایل

ویژگی src آدرس فایل تصویر رو می‌گیره. اگه تصویر کنار فایل HTML قرار گرفته، کافیه فقط نام فایل رو بنویسید:

<img src="mountain.jpg" alt="نمای کوه در زمان طلوع">

اگه تصویر داخل پوشه‌ای به نام images قرار داره، آدرس به‌شکل images/mountain.jpg نوشته می‌شه. یادتون نره که نام و پسوند نوشته‌شده باید دقیقاً با فایل واقعی یکی باشه.

ویژگی alt و متن جایگزین

ویژگی alt محتوای تصویر رو با متن توضیح می‌ده. اگه تصویر بارگیری نشه، ممکنه این متن به‌جای اون دیده بشه. صفحه‌خوان هم از متن جایگزین کمک می‌گیره تا مفهوم تصویر رو به کاربر منتقل کنه.

برای تصویر معنادار چه alt بنویسید؟

برای تصویر معنادار، توضیحی کوتاه و مرتبط بنویسید. لازم نیست عبارت‌هایی مثل «عکسِ» یا «تصویرِ» رو تکرار کنید. مثلاً برای تصویر یک گربه سفید کنار پنجره، alt="گربه سفید کنار پنجره" توضیح روشنیه.

برای تصویر تزئینی چه alt بذارید؟

اگه تصویر فقط جنبه تزئینی داره و اطلاعاتی به محتوا اضافه نمی‌کنه، مقدار alt رو خالی بذارید: alt="". خود ویژگی رو حذف نکنید، چون مقدار خالی به صفحه‌خوان می‌فهمونه که می‌تونه از این تصویر رد بشه.

ویژگی‌های width و height

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

این عددها معمولاً برحسب پیکسل نوشته می‌شن. بهتره مقدارها رو طوری انتخاب کنید که نسبت واقعی طول و عرض تصویر حفظ بشه.

ویژگی title و محدودیت‌های اون

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

پس اطلاعات ضروری رو فقط داخل title نذارید. این اطلاعات باید توی متن قابل‌دیدن، کپشن یا متن جایگزین مناسب هم بیان بشن. نیازی هم نیست متن alt رو دوباره داخل title تکرار کنید.

نمونه کامل و قابل‌کپی از تگ img

<img  src="images/mountain.jpg"  alt="نمای کوه در زمان طلوع"  width="1200"  height="800">

این نمونه، آدرس فایل، متن جایگزین و ابعاد تصویر رو مشخص می‌کنه. قبل از اجرای کد مطمئن بشید فایل mountain.jpg داخل پوشه images قرار گرفته.

یک صفحه ساده با تگ‌های این جلسه بسازید

حالا وقتشه همه چیز رو کنار هم بذاریم. کد زیر یک صفحه کامل و ساده می‌سازه:

<!doctype html><html lang="fa" dir="rtl"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>اولین صفحه من</title></head><body>  <header>    <h1>اولین صفحه من</h1>    <p>توی این صفحه تمرین‌های HTML من رو می‌بینید.</p>  </header>  <main>    <section>      <h2>درباره من</h2>      <p>من تازه یادگیری طراحی سایت رو شروع کرده‌ام.</p>    </section>    <section>      <h2>تصویر موردعلاقه من</h2>      <p>این تصویر یک منظره کوهستانی رو نشون می‌ده.</p>      <img        src="images/mountain.jpg"        alt="نمای کوه در زمان طلوع"        width="1200"        height="800"      >    </section>  </main>  <footer>    <p>این صفحه برای تمرین HTML ساخته شده.</p>  </footer></body></html>

برای ساخت این صفحه، مراحل زیر رو به‌ترتیب انجام بدید:

1. اسکلت اصلی فایل HTML رو داخل index.html بنویسید.
2. با h1 یک عنوان اصلی به صفحه اضافه کنید.
3. با تگ p چند پاراگراف کوتاه بنویسید.
4. محتوا رو با عنصرهای معنایی مثل main و section بخش‌بندی کنید.
5. یک تگ img با src، alt، width و height اضافه کنید.
6. فایل رو ذخیره کنید و با دو بار کلیک توی مرورگر بازش کنید.

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

اشتباه‌های رایج موقع کار با تگ‌های HTML

• فراموش‌کردن تگ پایان: برای عنصرهایی مثل p، div و عنوان‌ها، تگ پایان رو درست بنویسید.
• بستن اشتباه تگ‌های عنوان: تگ h2 باید با </h2> بسته بشه، نه با <h2/>.
• استفاده زیاد و بی‌هدف از div: اگه نقش بخش مشخصه، از عنصر معنایی مناسب استفاده کنید.
• نوشتن alt نامناسب یا حذف اون: برای تصویر معنادار توضیح مرتبط بنویسید و برای تصویر تزئینی alt="" بذارید.
• تو‌در‌تو نوشتن اشتباه عناصر: عنصری رو که آخر باز کردید، زودتر از بقیه ببندید.
• اشتباه‌گرفتن HTML با CSS: HTML ساختار و معنی محتوا رو می‌سازه؛ CSS ظاهر و روش نمایش اون رو کنترل می‌کنه.

تمرین این جلسه

برای اینکه تگ‌ها بهتر توی ذهنتون بمونن، این تمرین رو بدون کپی‌کردن نمونه قبلی انجام بدید:

1. یک فایل HTML تازه بسازید.
2. برای صفحه یک عنوان اصلی با h1 بنویسید.
3. دو بخش جدا با محتوای متنی بسازید.
4. از عنوان‌های h2 و h3 با ترتیب منطقی استفاده کنید.
5. یک تگ img با ویژگی‌های src، alt، width و height بنویسید.
6. کد رو با اعتبارسنج W3C بررسی کنید و خطاهای گزارش‌شده رو برطرف کنید.

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

جمع‌بندی

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

همچنین دیدید که div یک ظرف عمومی و بدون معنی مستقله، عنوان‌های h1 تا h6 ساختار محتوا رو مشخص می‌کنن، p پاراگراف می‌سازه و img تصویر رو همراه با متن جایگزین و ابعادش به صفحه اضافه می‌کنه. حالا بهتره تمرین این جلسه رو خودتون از صفر بسازید.

سؤال‌های پرتکرار

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.