🌐 درس دوم: تگهای متنی در HTML
🎯 هدف این درس: آشنایی کامل با تگهای متنی HTML، ساخت عنوانها، پاراگرافها، شکست خط، تأکید روی متن و ساختاردهی صحیح محتوای یک صفحه وب
مهمان عزیز! 👋 به دومین درس از دوره HTML سطح مقدماتی خوش آمدی.
در درس قبل با ساختار اولیه یک صفحه HTML آشنا شدیم و یاد گرفتیم مرورگر چطور یک فایل HTML را دریافت و نمایش میدهد.
حالا وقت آن رسیده که وارد بخش مهمتری از HTML شویم: نوشتن و ساختاربندی متنها.
تقریباً هر صفحه وبی که در اینترنت میبینی، از متن تشکیل شده است؛ از عنوان یک مقاله گرفته تا توضیحات محصول،
متن یک خبر، معرفی یک شرکت یا محتوای یک صفحه آموزشی.
HTML به ما کمک میکند مشخص کنیم هر قسمت از این متن چه نقشی دارد.
💡 یادت باشه مهمان:
HTML وظیفه اصلیاش ساختاردهی محتوا است، نه زیبا کردن آن.
ظاهر حرفهای صفحات را در ادامه با CSS ایجاد خواهیم کرد.
🧱 بخش ۱: تگ چیست؟
قبل از اینکه با تگهای متنی کار کنیم، باید مفهوم Tag یا تگ را به خوبی درک کنیم.
تگها عناصر اصلی HTML هستند و به مرورگر میگویند یک بخش از محتوا چه نوع محتوایی است.
برای مثال، اگر بخواهیم یک عنوان اصلی ایجاد کنیم از تگ <h1> استفاده میکنیم
و برای یک پاراگراف معمولی از <p>.
ساختار یک تگ HTML
ساختار تگ
HTML
HTML5
<p>این یک پاراگراف است</p>
در این مثال، <p> تگ شروع و </p> تگ پایان است.
متنی که بین این دو قرار میگیرد، محتوای عنصر محسوب میشود.
⚠️ نکته مهم:
بیشتر تگهای HTML دارای تگ شروع و پایان هستند، اما بعضی تگها مانند <br>
به تگ پایان جداگانه نیاز ندارند.
📰 بخش ۲: عنوانها با تگهای H1 تا H6
یکی از مهمترین بخشهای هر صفحه وب، عنوانها هستند.
HTML برای ساخت عنوانها شش سطح مختلف در اختیار ما قرار میدهد:
از <h1> تا <h6>.
📚 سلسلهمراتب عنوانها
| تگ | کاربرد | سطح |
|---|---|---|
<h1> |
عنوان اصلی صفحه | ۱ |
<h2> |
عنوان بخش اصلی | ۲ |
<h3> |
عنوان زیربخش | ۳ |
<h4> |
عنوان فرعی | ۴ |
<h5> |
عنوان فرعیتر | ۵ |
<h6> |
کماهمیتترین سطح عنوان | ۶ |
مثال: استفاده از عنوانها
عنوانهای HTML
HTML
HTML5
<h1>عنوان اصلی سایت</h1>
<h2>عنوان بخش اول</h2>
<h3>عنوان زیربخش</h3>
<h4>عنوان فرعی</h4>
<h5>عنوان سطح پنجم</h5>
<h6>عنوان سطح ششم</h6>
🔎 نکته مهم درباره H1 مهمان:
در یک صفحه معمولاً بهتر است یک عنوان اصلی و مشخص داشته باشیم و عنوانهای دیگر را بر اساس ساختار محتوا در سطحهای پایینتر قرار دهیم.
عنوانها فقط برای بزرگتر کردن متن نیستند؛ آنها ساختار معنایی صفحه را مشخص میکنند.
📝 بخش ۳: ساخت پاراگراف با P
برای نوشتن متنهای معمولی در HTML از تگ <p> استفاده میکنیم.
هر پاراگراف بهتر است در یک عنصر جداگانه قرار بگیرد تا ساختار صفحه برای مرورگر و ابزارهای کمکی واضح باشد.
پاراگرافها
HTML
HTML5
<p>HTML زبان نشانهگذاری صفحات وب است.</p>
<p>با HTML میتوان ساختار و محتوای یک صفحه وب را مشخص کرد.</p>
<p>در ادامه دوره با CSS و JavaScript نیز آشنا خواهیم شد.</p>
💡 نکته کلیدی:
برای ایجاد فاصله بین پاراگرافها از چندین تگ <br> استفاده نکن.
فاصله و ظاهر پاراگرافها در آینده با CSS کنترل خواهد شد.
↩️ بخش ۴: شکستن خط با BR
گاهی اوقات لازم است بدون ایجاد یک پاراگراف جدید، متن را به خط بعد منتقل کنیم.
در این شرایط میتوانیم از تگ <br> استفاده کنیم.
شکستن خط
HTML
HTML5
<p>
سلام مهمان عزیز! <br>
به دوره HTML خوش آمدی.<br>
امیدوارم از یادگیری لذت ببری.
</p>
⚠️ چه زمانی از BR استفاده کنیم؟
<br> برای شکست خط در مواردی مثل آدرس، شعر، شماره تلفن یا متنهایی که شکست خط بخشی از معنای محتواست مناسب است.
برای ایجاد فاصله و طراحی صفحه، بهتر است از CSS استفاده شود.
✍️ بخش ۵: تأکید روی متن
گاهی لازم است یک کلمه یا عبارت را در متن برجسته کنیم یا روی اهمیت آن تأکید داشته باشیم.
HTML چند تگ مهم برای این کار در اختیار ما قرار میدهد.
<strong>برای نشان دادن اهمیت زیاد یک متن<em>برای ایجاد تأکید معنایی روی متن<b>برای برجستهسازی ظاهری متن<i>برای نمایش متنی با حالت متفاوت از متن معمولی<mark>برای مشخص کردن یا هایلایت کردن متن<small>برای نمایش متن با اهمیت یا اندازه کمتر
مثال کاربردی
تأکید روی متن
HTML
HTML5
<p>
این یک متن <strong>مهم</strong> است.
این متن <em>تأکید شده</em> است.
این قسمت <mark>هایلایت شده</mark> است.
این متن <small>کوچکتر</small> نمایش داده میشود.
</p>
💡 نکته حرفهای مهمان:
بین <strong> و <b> یک تفاوت مفهومی وجود دارد.
<strong> نشان میدهد محتوا اهمیت بیشتری دارد، در حالی که <b>
بیشتر برای برجستهسازی ظاهری استفاده میشود.
در محتوای معنایی و حرفهای معمولاً <strong> انتخاب مناسبتری است.
📖 بخش ۶: تگهای مهم برای قالببندی متن
علاوه بر تگهایی که تا اینجا دیدیم، چند تگ دیگر نیز وجود دارند که در محتوای واقعی صفحات وب بسیار کاربردی هستند.
| تگ | کاربرد |
|---|---|
<del> |
نمایش متن حذفشده |
<ins> |
نمایش متن اضافهشده |
<sub> |
نمایش متن به صورت زیرنویس |
<sup> |
نمایش متن به صورت بالانویس |
<code> |
نمایش قطعه کد |
قالببندی متن
HTML
HTML5
<p>
قیمت قبلی: <del>۵۰۰ هزار تومان</del>
قیمت جدید: <ins>۳۵۰ هزار تومان</ins>
فرمول آب: H<sub>2</sub>O
توان دوم: 2<sup>2</sup>
برای چاپ متن از <code>echo</code> استفاده میکنیم.
</p>
🏗️ بخش ۷: ساخت یک مقاله ساده با HTML
حالا که تگهای متنی اصلی را شناختیم، بیایید همه آنها را در یک مثال واقعی کنار هم قرار دهیم.
فرض کنیم میخواهیم یک مقاله کوتاه درباره یادگیری برنامهنویسی ایجاد کنیم.
مقاله ساده
HTML
HTML5
<h1>چرا یادگیری HTML مهم است؟</h1>
<p>
HTML یکی از پایههای اصلی توسعه وب است و ساختار صفحات اینترنتی را مشخص میکند.
</p>
<h2>شروع یادگیری</h2>
<p>
اگر تازه وارد دنیای برنامهنویسی شدهای، HTML میتواند
<strong>نقطه شروع مناسبی</strong>
برای ورود به دنیای وب باشد.
</p>
<h2>مسیر یادگیری</h2>
<p>
ابتدا HTML را یاد بگیر، سپس سراغ CSS برو و بعد از آن JavaScript را شروع کن.
</p>
<p>
<mark>تمرین مداوم</mark>
یکی از مهمترین عوامل پیشرفت در برنامهنویسی است.
</p>
📝 پروژه عملی: ساخت یک صفحه معرفی
🎯 پروژه: صفحه معرفی شخصی
حالا نوبت توست مهمان!
یک صفحه ساده برای معرفی خودت بساز و از تگهایی که در این درس یاد گرفتی استفاده کن.
صفحه باید حداقل شامل موارد زیر باشد:
- یک عنوان اصلی با
<h1> - حداقل دو عنوان فرعی با
<h2> - چند پاراگراف با
<p> - حداقل یک متن مهم با
<strong> - حداقل یک متن تأکیدی با
<em> - حداقل یک متن هایلایتشده با
<mark> - استفاده از
<br>در یک بخش مناسب
🔍 نمونه راهحل پروژه:
صفحه معرفی
HTML
HTML5
<h1>سلام، من مهمان هستم</h1>
<p>
من در حال یادگیری <strong>طراحی و توسعه وب</strong> هستم.
</p>
<h2>درباره من</h2>
<p>
من به یادگیری فناوریهای جدید علاقه دارم و تلاش میکنم
مهارتهای خودم را به صورت مستمر توسعه دهم.
</p>
<h2>هدف من</h2>
<p>
هدف من این است که در مسیر توسعه وب به یک
<em>توسعهدهنده حرفهای</em>
تبدیل شوم.
<br>
<mark>یادگیری مداوم</mark>
بخش مهمی از این مسیر است.
</p>
🧩 تمرینهای عملی
🎯 تمرین شماره ۱: معرفی خودتان
یک صفحه ساده بسازید که نام، شغل، شهر و علاقهمندیهای شما را با استفاده از عنوانها و پاراگرافها نمایش دهد.
🎯 تمرین شماره ۲: مقاله کوتاه
یک مقاله کوتاه درباره موضوع مورد علاقه خود بنویسید.
از <h1>، <h2>، <p> و <strong> استفاده کنید.
🎯 تمرین شماره ۳: متن قالببندیشده
یک متن بنویسید که در آن حداقل از تگهای
<strong>،
<em>،
<mark>،
<del> و
<ins>
استفاده شده باشد.
🧠 نکات کلیدی درس
- ✅ تگها ساختار و معنای محتوای HTML را مشخص میکنند.
- ✅ برای عنوانها از
<h1>تا<h6>استفاده میشود. - ✅ برای پاراگرافها از
<p>استفاده میکنیم. - ✅ برای شکستن خط در موارد مناسب از
<br>استفاده میشود. - ✅
<strong>برای محتوای مهم و<em>برای تأکید معنایی کاربرد دارند. - ✅
<mark>برای مشخص کردن بخش خاصی از متن کاربرد دارد. - ✅ HTML را نباید صرفاً برای بزرگ یا زیبا کردن متن استفاده کرد؛ ساختار معنایی محتوا اهمیت دارد.
- ✅ ظاهر و فاصلهگذاری حرفهای صفحه در ادامه با CSS انجام خواهد شد.
🎯 چالش مهمان!
قبل از رفتن به درس بعدی، سعی کن یک صفحه کامل متنی بسازی که فقط با استفاده از HTML،
ساختار یک مقاله واقعی را ایجاد کند. هنوز نیازی به CSS نداری؛ فعلاً روی ساختار درست محتوا تمرکز کن.
📚 جمعبندی درس
مهمان جان، در این درس یاد گرفتی که HTML فقط مجموعهای از کلمات و تگها نیست؛
بلکه روشی برای مشخص کردن ساختار و معنای محتواست.
حالا میتوانی عنوانهای مختلف ایجاد کنی، متنها را در قالب پاراگراف قرار دهی،
بخشهای مهم را مشخص کنی و یک مقاله ساده را به شکل اصولی ساختاربندی کنی.
در درس بعدی سراغ یکی از بخشهای جذاب HTML میرویم:
لینکها و تصاویر.
یاد میگیریم چطور صفحات مختلف را به یکدیگر متصل کنیم و تصاویر را داخل صفحات وب نمایش دهیم.
در درس بعد با لینکها و تصاویر در HTML آشنا میشویم و صفحههای وب را از حالت متن ساده خارج میکنیم.
