ویژگی های تگ های HTML اطلاعات بیشتری درباره خصوصیات، صفات و ویژگی های المان ها یا همان تگ ها به اسناد HTML ارائه می کنند.
ویژگی های تگ های HTML
- تگ های HTML می توانند ویژگی هایی داشته باشند
- ویژگی های یک تگ می تواند توضیحات بیشتری درباره آن المان HTML ارائه کند
- ویژگی های المان های HTML در تگ آغازین قرار می گیرند
- ویژگی ها با ساختار نام/مقدار درون تگ نوشته می شوند: نام ویژگی="مقدار ویژگی"
ویژگی lang (زبان)
زبان سند HTML را می تواند درون تگ <html> اعلام کرد.
زبان سند با ویژگی lang در تگ <html> اعلام می شود.
مشخص کردن زبان سند HTML برای برنامه های کاربردی که با آن صفحه وب کار می کنند و همچنین برای موتورهای جستجو بسیار مهم است.
<!DOCTYPE html>
<html lang="fa-IR">
<body>
<h1>نخستین عبارت من از نوع عنوان</h1>
<p>نخستین متن من از نوع پاراگراف.</p>
</body>
</html>
در این مثال دو حرف نخست (fa) که با حروف کوچک نوشته شده اند زبان سند را مشخص می کنند و دو حرف بعدی که با - از هم جدا شده اند و با حروف بزرگ نوشته شده است گویش کشور مورد نظر را مشخص کرده است (IR) که در این مثال زبان فارسی با گویش ایرانی در سند HTML اعلام شده است.
ویژگی title (عنوان) و dir (جهت متن)
در اسناد HTML برای ایجاد یک پاراگراف از تگ <p> استفاده می شود.
در این مثال، تگ <p> از ویژگی های title و dir استفاده کرده است. مقدار ویژگی title "درباره کارگزاران تجارت الکترونیک ایران" و مقدار ویژگی dir برابر است با rtl.
ویژگی dir با مقدار rtl بi معنای تغییر جهت نوشتن چپ به راست متن پاراگراف به جهت دیگر یعنی راست به چپ (Right To Left) است.
مثال
<p title="درباره کارگزاران تجارت الکترونیک ایران" dir="rtl">
کارگزاران تجارت الکترونیک ایران یک بنگاه تجاری آنلاین برای ارائه خدمات تجارت الکترونیک است.
</p>
خودتان آزمایش کنید »
 |
اگر نشانه گر ماوس خود را روی متن پاراگراف ببرید و نگه دارید، مقدار ویژگی عنوان (title) را به صورت یک کادر راهنما در کنار نشانه گر ماوس خود مشاهده خواهید کرد. همچنین جهت نوشتن متن که به صورت پیش فرض از چپ به راست (انگلیسی) است اکنون به دلیل مقدر rtl در ویژگی جهت نوشتن (dir) به راست به چپ تغییر کرده است. |
ویژگی href (آدرس مرجع)
لینک یا پیوندهای HTML با تگ <a> ایجاد می شوند. برای تعریف صفحه مورد نظری که قسط لینک به آن را داریم از ویژگی hrefدرون این تگ به شکل زیر استفاده می کنیم.
در درس های بعدی چیزهای بیشتری درباره استفاده از تگ <a> یاد خواهید گرفت.
ویژگی size (اندازه)
در اسناد HTML برای افزودن یک تصویر از تگ <img> استفاده می شود.
آدرس منبع تصویر روی وب با ویژگی src مشخص می شود و همچنین برای تعیین عرض و ارتفاع تصویر به ترتیب از ویژگی های width و height به شکل زیر استفاده می شود:
مثال
<img src="http://schools.ecb.ir/Portals/0/ecb-Schools-Logo.png" width="298" height="81">
خودتان آزمایش کنید »
در مثال بالا اندازه عرض تصویر با ویژگی عرض و ارتفاع اندازه گذاری شد. مثلا عرض تصویر با دستور "width="298 در اندازه 298 پیکسل در صفحه نمایش بیننده نمایش داده خواهد شد.
در فصل های آموزشی بعدی توضیحات بیشتری درباره چگونگی استفاده از تگ تصویر <img> آموزش داده خواهد شد.
ویژگی alt (متن جایگزین)
ویژگی alt یا متن جایگزین (Alternative Text) بهتر است در تگ تصویر استفاده شود. این ویژگی علاوه بر کاربردش در موتورهای جستجو ارتباط دادن یک تصویر با یک عبارت قابل درک، زمانی که به هر دلیل تصویر قابل نمایش نباشد (مثلا آدرس آن اشتباه باشد) این متن جایگزین به جای تصویر نمایش داده می شود.
برخی نرم افزارهای کاربردی که متن صفحات وب را می خوانند (به صورت صوتی) می توانند از محتوای ویژگی alt برای خواندن نام تصویر استفاده کنند. به این ترتیب شما می توانید صفحات وبی برای گوش دادن تهیه کنید که این موضوع به عنوان یک استاندارد برای صفحات وب مخصوص افراد نابینا در نظر گرفته شده است و از اهمیت زیادی برخوردار است.
مثال
<img src="http://schools.ecb.ir/Portals/0/ecb-Schools-Logo.png" alt="لوگوی واحد آموزش کارگزاران تجارت الکترونیک ایران" width="298" height="81">
خودتان آزمایش کنید »
پیشنهاد می کنیم: همیشه از حروف کوچک برای نوشتن ویژگی ها استفاده کنید
یادآروری می کنیم در استاندارد HTML5 نیازی به ضرورت استفاده از حروف کوچک نیست.
همچنین در این استاندارد روش نوشتن به شکلی که همه حروف بزرگ باشند یا تنها حرف اول بزرگ باشد مثل Title یا TITLE مهم نیست و تفاوتی ندارد.
بر اساس استاندارد کنسرسیوم شبکه جهانی وب (W3C) یا سایر اسناد سخت گیرانه تر مثل XHTML که مطابق بر استاندارد اسناد HTML4 هستند، بهتر است از حروف کوچک برای نوشتن تگ های HTML استفاده کنید.
|
در نظر داشته باشید که استفاده از حروف کوچک متداول تر است. همچنین به دلیل سادگی در تایپ سرعت نوشتن شما بیشتر خواهد بود. و از همه مهم تر این که کنسرسیوم شبکه جهانی وب (W3C) استاندارد نام گذاری ویژگی ها را نیز همچون تگ ها با حروف کوچک تعیین کرده است. |
پیشنهاد می کنیم: همیشه از کوتیشن برای مقادیر ویژگی ها استفاده نمایید
بر اساس استاندارد HTML5 نیازی به استفاده از کوتیشن برای قراردادن مقادیر ویژگی ها نیست.
همان طور که در بالا اشاره شد می توانید مطابق استاندارد HTML5 از ویژگی ها به شکل زیر استفاده نمایید:
توصیه می کنیم بر اساس استاندارد کنسرسیوم شبکه جهانی وب (W3C) یا سایر اسناد سخت گیرانه تر مثل XHTML که مطابق بر استاندارد اسناد HTML4 هستند، حتما از کوتیشن برای تعریف مقادیر ویژگی های تگ های HTML استفاده کنید.
در مثال زیر نشان داده ایم که اگر از کوتیشن استفاده نکنید ویژگی عنوان که برای تگ p بدون استفاده از کوتیشن مقدار تعریف کرده است به دلیل وجود فاصله بین حروف تنها اولین کلمه عبارت مورد نظر به عنوان title نمایش داده خواهد شد:
|
استفاده از کوتیشن بسیار متداول است. استفاده از کوتیشن جلوی بروز خطای احتمالی را می گیرد. مطالب آموزشی کارگزاران تجارت الکترونیک ایران همیشه با استفاده از کوتیشن ارائه می شود. |
دابل کوتیشن یا سینگل کوتیشن؟
استفاده از دابل کوتیشن مرسوم تر است. ولی می توانید از سینگل کوتیشن هم استفاده کنید.
در مواردی که نیاز به استفاده از کوتیشن در مقدار ویژگی است، می توانید از سینگل کوتیشن برای قراردادن مقداری که در آن از کوتیشن استفاده شده است، استفاده نمایید:
مثال
<p title="درباره 'سایت آموزشی' ما">
یا به این صورت:
مثال
<p title='درباره "سایت آموزشی" ما'>
فهرست ویژگی ها در تگ های HTML
در زیر جدولی از ویژگی ها (Attributes)یی که در تگ های HTML استفاده می شوند به ترتیب حروف الفبا همراه با توضیح مختصری درباره آن ها فهرست شده است.
| نام ویژگی |
توضیح عملکرد ویژگی |
| alt |
یک متن جایگزین برای تصویر و مرتبط با آن تعریف می کند |
| disabled |
المان ورود (input) را غیر فعال می کند |
| href |
یک آدرس URL(Uniform Resource Locator) را برای پیوند به آن صفحه مشخص می کند |
| id |
یک شناسه منحصر به فرد برای شناسایی تگ مورد نظر را مشخص می کند |
| src |
یک آدرس URL را برای فراخوانی تصویر مورد نظر فراهم می کند |
| style |
Specifies an inline CSS style for an element |
| title |
اطلاعات اضافی درباره یک تگ HTML به صورت نمایش یک عنوان در کنار نشانه گر ماوس هنگامی که روی المان قراردارد را مشخص می کند |
| value |
یک مقدار برای المان ورود (input) به صورت متن مشخص می کند. |