ویژگی‌ها
ویژگی‌ها اطلاعات اضافی در مورد عنصرهای HTML فراهم می‌کنند.[۱]
محتویات
- ۱ ویژگی های HTML
- ۲ ویژگی href
- ۳ ویژگی src
- ۴ ویژگی های عرض و ارتفاع
- ۵ ویژگی alt
- ۶ ویژگی style
- ۷ ویژگی lang
- ۸ ویژگی title
- ۹ پیشنهاد ما: از ویژگی‌های با حروف کوچک (به انگلیسی: Lowercase) استفاده کنید
- ۱۰ پیشنهاد ما: مقادیر ویژگی‌ها را نقل قول کنید
- ۱۱ نقل قول های تکی ' ' یا دوتایی " "؟
- ۱۲ خلاصه بخش
- ۱۳ تمرین های HTML
- ۱۴ ویژگی های HTML
- ۱۵ منابع آموزشی
ویژگی های HTML
- همهٔ عناصر می‌توانند ویژگی هایی داشته باشند
- ویژگی‌ها در مورد یک عنصر اطلاعات اضافی فراهم می‌کنند
- ویژگی‌ها همیشه در تگ آغازی تعیین می‌شوند
- ویژگی‌ها معمولاً بصورت زوج‌های نام / مقدار هستند مانند: name="value"
ویژگی href
لینک‌های HTML با تگ <a> تعریف می‌شوند. آدرس لینک ویژگی href مشخص می‌شود:
مثال
<a href="https://wikicod.ir">This is a link</a>
<a> در آینده بیشتر خواهید آموخت.ویژگی src
تصاویر در HTML با تگ <img> تعریف می‌شوند.
نام فایل منبع تصویر در ویژگی src تعیین می‌شود:
مثال
<img src="img_girl.jpg">
ویژگی های عرض و ارتفاع
تصویرهای HTML ویژگی‌های width (به فارسی: عرض) و height (به فارسی: ارتفاع) هم دارند که عرض و ارتفاع تصویر را مشخص می‌کند:
مثال
<img src="img_girl.jpg" width="500" height="600">
بطور پیش فرض واحد عرض و ارتفاع پیکسل است؛ بنابراین width="500" یعنی عرض ۵۰۰ پیکسل است.
ویژگی alt
اگر تصویری را نتوان نمایش داد، ویژگی alt متن جایگزین آن برای استفاده را مشخص می‌کند.
مقدار ویژگی alt توسط صفحه خوان‌ها (به انگلیسی: screen raders) قابل خواندن است. به این ترتیب کسی که به یک صفحه وب «گوش می‌دهد» مثلاً یک فرد نابینا، می‌تواند این عنصر را «بشنود».
مثال
<img src="img_girl.jpg" alt="Girl with a jacket">
alt برای تصویری که نمی‌توان نمایش داد نیز مفید است (مثلاً اگر وجود نداشته باشد):مثال
ببینید چه اتفاقی می‌افتد اگر بخواهیم تصویری را نمایش دهیم که وجود ندارد:
<img src="img_typo.jpg" alt="Girl with a jacket">
ویژگی style
ویژگی style برای مشخص کردن طراحی (به انگلیسی: styling) یک عنصر مانند رنگ، خط، سایز و … به کار می‌رود.
مثال
<p style="color:red">This is a red paragraph.</p>
ویژگی lang
زبان یک سند را می‌توان در تگ <html> تعریف کرد.
زبان توسط ویژگی lang تعریف خواهد شد.
تعریف یک زبان برای دسترس پذیری برنامه‌های کاربردی (صفحه خوان‌ها) و موتورهای جستجو مهم است:
1 <!DOCTYPE html>
2 <html lang="en-US">
3 <body>
4
5 ...
6
7 </body>
8 </html>
دو حرف اول نوع زبان (en) را مشخص می‌کند. اگر گویشی وجود داشته باشد، دو حرف دیگر باید اضافه شود (US).
ویژگی title
در این مثال یک ویژگی title به عنصر <p> اضافه شده است. زمانیکه ماوس را روی پاراگراف قرار دهید، مقدار ویژگی title بصورت یک راهنمای ابزار (به انگلیسی: tooltip) نمایش داده خواهد شد:
مثال
<p title="I'm a tooltip">
This is a paragraph.
</p>
پیشنهاد ما: از ویژگی‌های با حروف کوچک (به انگلیسی: Lowercase) استفاده کنید
استاندار HTML5 نیازی به نام‌های ویژگی با حروف کوچک ندارد.
ویژگی title را می‌توان با حروف بزرگ یا حروف کوچک مانند title یا TITLE نوشت.
W3C حروف کوچک را در HTML پیشنهاد می‌کند و برای انواع سند سخت تر مانند X HTML حروف کوچک را درخواست می‌کند.
پیشنهاد ما: مقادیر ویژگی‌ها را نقل قول کنید
استاندارد HTML5 نیازی به قرار دادن مقدارها در نقل قول " " ندارد.
ویژگی href که در بالا بیان شد را می‌توان بدون نقل قول نوشت:
خوب1 <a href="https://wikicod.ir">
|
بد1 <a href=https://wikicod.ir>
|
استفاده از نمادهای نقل قول در HTML را پیشنهاد می‌کند و برای انواع سند سخت‌تر مانند XHTML استفاده از نمادهای نقل قول را درخواست می‌کند.
گاهی اوقات نقل قول کردن لازم است. این مثال ویژگی title را به درستی نمایش نمی‌دهد زیرا دارای یک فاصله است:
مثال
<p title=About WikiCod>
نقل قول های تکی ' ' یا دوتایی " "؟
در HTML نقل قول دوتایی برای مقدار ویژگی رایج‌ترین است اما نقل قول تکی را هم می‌توان استفاده کرد.
در شرایطی، هنگامی که مقدار ویژگی خودش نقل قول دو تایی دارد، لازم است که از نقل قول تکی استفاده کنیم:
<p title='John "ShotGun" Nelson'>
یا برعکس:
<p title="John 'ShotGun' Nelson">
خلاصه بخش
- همهٔ عنصر های HTML می‌توانند ویژگی هایی داشته باشند
- ویژگی
titleاطلاعات “tool-tip” اضافی فراهم می‌کند
- ویژگی
hrefاطلاعات آدرس برای لینک‌ها را فراهم می‌کند
- ویژگی‌های
widthوheightاطلاعات اندازه تصاویر را فراهم می‌کند
- ویژگی
altمتن مربوط به صفحه خوان‌ها را فراهم می‌کند
- در WikiCod ما همیشه از نام‌های ویژگی با حروف کوچک استفاده می‌کنیم
- در WikiCod ما همیشه از مقدارهای ویژگی با نقل قول استفاده می‌کنیم
تمرین های HTML
40px ساخت نمونه مثال این بخش در دست اقدام است.
ویژگی های HTML
در جدول زیر لیست ویژگی‌هایی که اغلب در HTML استفاده می‌شوند به ترتیب حروف الفبا آمده‌است، که در مورد آنها در این آموزش بیشتر خواهید آموخت:
| ویژگی | توصیف |
|---|---|
| alt | متن جایگزین برای یک تصویر را مشخص می‌کند، زمانیکه تصویر قابل نمایش دادن نیست |
| disabled | تعیین می‌کند که یک عنصر باید غیرفعال باشد |
| href | به یک لینک URL (به فارسی: آدرس وب) اختصاص می‌دهد |
| id | یک id (شناساگر) یکتا برای یک عنصر تعیین می‌کند |
| src | یک URL (به فارسی: آدرس وب) به یک تصویر اختصاص می‌دهد |
| style | به یک عنصر یک استایل CSS درون خطی تخصیص می‌دهد |
| title | اطلاعات اضافی در مورد یک عنصر را مشخص می‌کند (بصورت tooltip نمایش داده می‌شود) |
منابع آموزشی