در این قسمت از آموزش برنامه نویسی وب کمی مفاهیم عمیق (تگ های سطح بلاک، پیشفرض مرورگر، استفاده از نقل قول ها) و همچنین تگ های بیشتر (del، u، ins، sub، sup، q) و کامنت ها در اچ تی ام ال و سیستم رنگ ها (RGB, HSL , HEX) رو مورد بررسی قرار میدهیم.

آماده اید برای آموزش؟
توصیه میشود در هنگام دیدن آموزش بعد هر مرحله خودتون اون رو تست کنید و تغییر بدهید،
همچنین سعی میشود در آخر هر پست تمرین هایی داده بشود.

سطح بلاک چیست؟

تگ‌های سطح بلاک به عناصری در HTML گفته می‌شود که به‌صورت خودکار یک بلاک جدید در صفحه ایجاد می‌کنند. این عناصر معمولاً فضای کل عرض صفحه را می‌گیرند و از یک خط جدید شروع می‌شوند. مثلاً تگ‌های <div>, <p> و <h1> همگی سطح بلاک هستند.

مثال تگ‌های سطح بلاک

<div>
  <h1>این یک تگ سطح بلاک است</h1>
  <p>این یک پاراگراف است که درون یک بلاک قرار دارد.</p>
</div>

بررسی تگ‌های دیگر HTML

برخی تگ‌های دیگر که می‌توانید در HTML استفاده کنید:

• <del> : برای نشان دادن متن حذف شده (محروم).
• <u> : برای خط زیرین کردن متن.
• <ins> : برای نشان دادن متن اضافه شده.
• <sub> : برای نمایش زیرنویس (نوشته زیر متن).
• <sup> : برای نمایش بالانویس (نوشته بالای متن).
• <q> : برای نمایش نقل قول‌ها.

مثال تگ‌های مختلف

<p><del>این متن حذف شده است.</del></p>
<p><u>این متن خط زیرین دارد.</u></p>
<p><ins>این متن اضافه شده است.</ins></p>
<p>آب <sub>H<sub>2</sub>O</sub> یعنی آب.</p>
<p>توان ۲: ۳<sup>2</sup></p>
<p><q>این یک نقل قول است.</q></p> ادیتور رو باز کنید.

کامنت‌ها در HTML

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

<!-- این یک کامنت است -->

سیستم رنگ‌ها

مقاله کامل رنگ ها در اچ تی ام ال

در HTML می‌توان از سه نوع سیستم رنگ برای تعیین رنگ‌ها استفاده کرد:

• RGB: مقدار رنگ قرمز، سبز و آبی، مانند rgb(255, 0, 0) برای قرمز.
• HSL: مقدار رنگ، اشباع و روشنایی، مانند hsl(0, 100%, 50%) برای قرمز.
• HEX: مقدار هگزادسیمال، مانند #FF0000 برای قرمز.

مثال سیستم رنگ‌ها

<div style="background-color: rgb(255, 0, 0);">
  این یک بلاک با رنگ قرمز از طریق RGB است.
</div>
<div style="background-color: hsl(0, 100%, 50%);">
  این یک بلاک با رنگ قرمز از طریق HSL است.
</div>
<div style="background-color: #FF0000;">
  این یک بلاک با رنگ قرمز از طریق HEX است.
</div>

پیش‌فرض مرورگر

برای مشاهده پیش‌فرض مرورگر از کد زیر استفاده کنید:

<h1>عنوان 1</h1> <p>این یک پاراگراف است که با استایل پیش‌فرض مرورگر نمایش داده می‌شود.</p> <ul> <li>آیتم 1</li> <li>آیتم 2</li> </ul>

استفاده از صفات width و height

<img src="image.jpg" width="300" height="200" alt="نمونه تصویر">

نقل قول‌ها

از تگ‌های <q> و <blockquote>برای نقل قول استفاده می‌شود:

<p>گفته شد: <q>هیچ جایگزینی برای سخت کار کردن وجود ندارد.</q></p> <blockquote> این یک نقل قول طولانی است که در یک بلاک جداگانه نوشته شده و برای جملات طولانی یا چند پاراگراف استفاده می‌شود. </blockquote>

استفاده از سایر تگ‌ها

<p>این یک <strong>متن مهم</strong> است.</p> <p>این یک <em>متن تأکید شده</em> است.</p>

مخفف‌ها و ارجاعات

<p>این یک <abbr title="Hypertext Markup Language">HTML</abbr> است.</p> <p>این نقل قول از <cite>کتاب هنر برنامه‌نویسی</cite> گرفته شده است.</p> <p>این متن <mark>برجسته</mark> شده است.</p>

استفاده از width و height با CSS

<div class="box"></div> <style> .box { width: 300px; height: 200px; background-color: lightblue; } </style> منظور از .box کلاس تعیین شده برای المنت است میتوانید از نام تگ بجای آن استفاده کنید.

تمرین‌های این قسمت

تمرین 1: استفاده از تگ<mark>

این متن برجسته شده است و بخش دیگری از متن هم نشانه‌گذاری شده.

<p>
  این متن <mark style="color: red;">برجسته شده</mark> است و
  <mark style="color: red;">بخش دیگری از متن</mark> هم نشانه‌گذاری شده.
</p>

تمرین 2: استفاده از تگ <blockquote>

"این یک نقل قول طولانی است که می‌تواند شامل چندین جمله باشد و در یک بلاک مجزا قرار می‌گیرد. استفاده از این نوع نقل قول برای جملات طولانی مناسب است." <blockquote>
  "این یک نقل قول طولانی است که می‌تواند شامل چندین جمله باشد و در یک بلاک مجزا قرار می‌گیرد. استفاده از این نوع نقل قول برای جملات طولانی مناسب است."
</blockquote>

تمرین 3: استفاده از تگ <sub>و <sup>

آب: H₂O

توان 2: 3²

<p>آب: H<sub>2</sub>O</p>
<p>توان ۲: 3<sup>2</sup></p>

تمرین 4: استفاده از تصویر با صفات width و height

<img src="https://blogfreedom.ir/icon-small.png" width="300" height="200" alt="نمونه تصویر">

بلاکی با رنگ پس‌زمینه

<div class="box">این یک بلاک با رنگ آبی است.</div> قسمت قبلی
قسمت بعدی