آموزش خصوصیت ها یا Attribute در HTML

Ratings
(0)

از خصوصیت ها(attribute) در HTML برای ارائه اطلاعات اضافی در مورد عناصر HTML استفاده می شود.

خصوصیت ها در HTML

  1. تمام عناصر HTML می توانند حاوی خصوصیت ها باشند.
  2. خصوصیت ها، حاوی اطلاعات اضافی در مورد عناصر هستند.
  3. خصوصیت ها همواره در داخل تگ باز قرار می گیرند.
  4. خصوصیت ها معمولاً به صورت جفت های نام و مقدار مثل "name="value مورد استفاد قرار می گیرند. 

خصوصیت href در HTML

تگ <a> یک لینک را تعریف می کند. خصوصیت href آدرس URL صفحه وبی که با کلیک بر روی این لینک به آن منتقل می شویم را مشخص می کند.

مثال شماره 1

<a href="https://sina2.ir">آموزشگاه مجازی سینا</a>
امتحان کنید

برای اطلاعات بیشتر در مورد لینک ها، به فصل لینک های HTML مراجعه کنید.

آموزش خصوصیت src

از تگ <img> برای اضافه کردن یک تصویر به صفحه HTML استفاده می شود. خصوصیت src مسیر تصویری که قرار است نمایش یابد را مشخص می کند.

مثال شماره 2

<img src="/other/img_girl.jpg">
امتحان کنید

نکته: در متن مثال بالا، قبل از کلمه other نباید یک اسلش وجود داشته باشد. این یک مشکل در ویرایشگر سایت است.

دو راه برای مشخص کردن URL در خصوصیت src وجود دارد:

1. استفاده از URL کامل:

با استفاده از URL کامل، می توانیم به یک تصویر اکسترنال که در داخل یک وب سایت دیگر قرار دارد لینک دهی کنیم. مانند مثال زیر:

https://sina2.ir/tryit/other/img_girl.jpg

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

2. استفاده از URL های نسبی:

با استفاده از URL های نسبی، می توانیم در داخل وب سایت خود، به یک تصویر لینک دهی کنیم. در این نوع آدرس دهی، URL حاوی نام دامنه نمی باشد. اگر این URL با یک علامت اسلش(/) شروع نشود،آدرس آن نسبت به مکان صفحه فعلی در نظر گرفته می شود. به مثال زیر توجه کنید:

other/img_girl.jpg

اگر URL با یک اسلش(/) شروع شود، آدرس آن، نسبت به دامنه ی سایت در نظر گرفته می شود. بعنوان مثال:

src="/tryit/other/img_girl.jpg

نکته: تقریباً همیشه بهتر است که از URL های نسبی استفاده کنیم. زیرا اگر دامنه ی خود را تغییر دهیم، این تصاویر با شکست مواجه نمی شوند.

خصوصیت های width و height

تگ <img> باید حاوی خصوصیت های width و height باشد؛ این خصوصیت ها به ترتیب عرض و ارتفاع تصویر را (به پیکسل) مشخص می کنند:

مثال شماره 3

<img src="/other/img_girl.jpg" width="500" height="600">
امتحان کنید

نکته: در متن مثال بالا، قبل از کلمه other نباید یک اسلش وجود داشته باشد. این یک مشکل در ویرایشگر سایت است.

بررسی خصوصیت alt

استفاده از خصوصیت alt برای تگ <img> ضروری است. این خصوصیت، یک متن جایگزین را برای یک تصویر مشخص می کند. اگر این تصویر به هر علتی نتواند نمایش پیدا کند، این متن جایگزین، نشان داده می شود. متن alt به دلایل زیر ممکن است نشان داده شود:

  1. کند بودن اتصال اینترنت
  2. خطا داشتن خصوصیت src
  3. استفاده کردن کاربر از صفحه خوان ها(برای افراد نابینا)

مثال شماره 4

<img src="/other/img_girl.jpg" alt="یک فرد که کلاه دارد">
امتحان کنید

نکته: در متن مثال بالا، قبل از کلمه other نباید یک اسلش وجود داشته باشد. این یک مشکل در ویرایشگر سایت است.

مثال شماره 5

اگر از یک تصویر استفاده کنیم که وجود ندارد، ببینیم که چه اتفاقی می افتد:

<img src="/img_typo.jpg" alt="یک فرد که کلاه دارد">
امتحان کنید

در فصل تصاویر در HTML، در مورد تصاویر چیزهای بیشتری خواهید آموخت.

خصوصیت style در HTML

از خصوصیت style برای اضافه کردن استایل به یک عنصر استفاده می شود؛ مثلاً می توانیم رنگ، فونت و چیزهای دیگر را برای آن عنصر تنظیم کنیم.

مثال شماره 6

<p style="color:red;">این یک پاراگراف قرمز است</p>
امتحان کنید

 در فصل استایل ها در HTML چیزهای بیشتری در مورد استایل ها خواهید آموخت.

استفاده از خصوصیت lang

همواره باید سعی کنید خصوصیت lang را در درون تگ <html> قرار دهید؛ تا زبان صفحه وب خود را مشخص کنید. این برای کمک به موتورهای جستجو و مرورگرها است. در مثال زیر، زبان انگیسی بعنوان زبان صفحه مشخص شده است:

مثال شماره 7

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

همچنین می توانیم از کدهای کشورها در خصوصیت lang استفاده کنیم. بنابراین، دو کاراکتر اول، زبان صفحه HTML را مشخص می کند و دو کاراکتر آخر، نام کشور را مشخص می کند. در مثال زیر، زبان صفحه انگلیسی است و کشور آن آمریکا(United States) تعیین شده است:

مثال شماره 8

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

برای مشاهده ی تمام کدهای مربوط به زبان ها، به مرجع کدهای زبان ها مراجعه کنید.

آموزش خصوصیت title

از خصوصیت title برای تعریف اطلاعات اضافی در مورد یک عنصر استفاده می شود. وقتی که ماوس را بر روی یک عنصر ببریم، مقدار خصوصیت title بعنوان یک پیغام( tooltip) نشان داده می شود.

مثال شماره 9

<p title="I'm a tooltip">این یک پاراگراف است</p>
امتحان کنید

توصیه می کنیم از حروف کوچک استفاده کنید

ما توصیه می کنیم که برای تعریف خصوصیت ها، همواره از حروف کوچک استفاده کنید. در استاندارد HTML استفاده از حروف کوچک برای نام خصوصیت ها ضروری نیست. خصوصیت title (و تمام دیگر خصوصیت ها) را می توانیم با حروف بزرگ یا کوچک بنویسیم مثل title یا TITLE.  اما W3C توصیه می کند که در HTML از حروف کوچک استفاده کنیم و خواهان این است که برای سندهای سخت گیرانه تر، مانند XHTML از خصوصیت ها با حروف کوچک استفاده کنیم.

نکته: در آموزشگاه مجازی سینا، ما همواره از حروف کوچک برای نام خصوصیت ها استفاده می کنیم.

توصیه استفاده از کوتیشن ها برای مقادیر خصوصیت ها

در استاندارد HTML نیازی به استفاده از کوتیشن ها(علامت نقل قول) به دور مقادیر خصوصیت ها نیست. اما W3C توصیه می کند که در HTML از کوتیشن ها به دور مقادیر خصوصیت ها استفاده کنیم. و خواهان این است که از کوتیشن ها برای سندهای سخت گیرانه تر، مانند XHTML به دور مقدار خصوصیت ها استفاده کنیم.

مثال شماره 10

خوب است:

<a href="https://sina2.ir/learn-html/">به آموزش ما سر بزنید</a>

مثال شماره 11

بد است:

<a href=https://sina2.ir/learn-html/>به آموزش ما سر بزنید</a>

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

مثال شماره 12

<p title=About W3Schools>
امتحان کنید

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

استفاده از تک کوتیشن یا دابل کوتیشن؟

استفاده از دابل کوتیشن ها به دور مقدار خصوصیت ها، در HTML بسیار متداول است اما می توانیم از تک کوتیشن ها نیز استفاده کنیم. در برخی موقعیت ها، وقتی که مقدار خصوصیت خودش حاوی دابل کوتیشن باشد، ضروری است که از تک کوتیشن ها استفاده کنیم:

مثال شماره 13

<p title='John "ShotGun" Nelson'>

و یا به طور برعکس:

مثال شماره 14

<p title="John 'ShotGun' Nelson">
امتحان کنید

 خلاصه مقاله

1. تمام عناصر HTML می توانند خصوصیت(attribute) داشته باشند.

2. خصوصیت href برای عنصر <a> آدرس URL صفحه ای که این لینک به آن می رود را مشخص می کند.

3. خصوصیت src برای عنصر <img>، مسیر تصویری که نمایش می یابد را مشخص می کند.

4. خصوصیت های width وheight از عنصر <img> به ترتیب عرض و ارتفاع تصویر ار مشخص می کنند.

5 . خصوصیت alt از عنصر <img> یک متن جایگزین را برای یک تصویر مشخص می کند.

6. از خصوصیت style برای اضافه کردن استایل به یک عنصر استفاده می شود. مانند رنگ و فونت و سایز و غیره.

7. از خصوصیت lang در تگ <html>  برای مشخص کردن زبان صفحه وب استفاده می شود.

8. خصوصیت title یک سری اطلاعات اضافی را برای یک عنصر مشخص می کند.

 

  • بازدید: 480

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال