بنام خدا

ویژگی ها به نوعی اطلاعات اضافی در مورد عناصر HTML ارائه می دهند. مثلا اگر عنصر تصویر (img) است، آدرس تصویر (src)، اندازه تصویر (width ، height) و متن جایگزین تصویر (alt) از ویژگی های آن محسوب می شوند که می توانند اجباری یا اختیاری باشند.

نکات!
🔸تمام عناصر می توانند ویژگی داشته باشند.
🔹ویژگی ها در تگ باز قرار می گیرند.
🔸ویژگی ها به دو صورت نام و مقدار آن می آیند.
به مثال زیر توجه کنید. 
<a href=”http://babaabdad.ir/?p=3973″ >یک لینک</a>

در این مثال href ویژگی عنصر پیوند یعنی a است. href نام ویژگی و مقدار آن آدرس سایت است.

 

ویژگی src و alt برای تصاویر

یکی از ویژگی های اجباری تصاویر (img)، src است که مخفف source به معنای منبع یا محل ذخیره سازی است.
در اینجا یعنی محل ذخیره سازی تصویر که باید در صفحه ی وب فراخوانی و نمایش داده شود. ویژگی اختیاری alt که مخفف alternative به معنای «جایگزین» است، در صورت عدم نمایش تصویر به هر دلیلی، تصویر را به صورت یک متن توصیف می کند.

نکات!
🔸ویژگی src اجباری است چون در صورت نبودن این ویژگی، تصویری فراخوانی و نمایش داده نمی شود.
🔹ویژگی alt اختیاری است و در صورت نبودن هم تصویر نمایش داده می شود و src کفایت می کند.
به مثال زیر توجه کنید. 
 <!DOCTYPE html>
<html>
<head><title>عنوان صفحه</title></head>
<body>

<img src="apple.png" alt="متن جایگزین">
<img src="applee.png">
<img alt="متن جایگزین">

</body>
</html>
تمرین کنید

 
توضیح کدها
🔸در خط اول همه چیز به درستی نوشته شده و تصویر نمایش داده می شود.
🔹در خط دوم آدرس تصویر اشتباه است و از آنجایی که ویژگی alt ندارد، متن جایگزین هم نمایش داده نشده و یک فایل شکسته نشان داده می شود.
🔸در خط آخر ویژگی src ذکر نشده و بدلیل آمدن ویژگی alt، متن جایگزین تصویر نمایش داده می شود.
 

ویژگی style

ویژگی style یا سبک مربوط به مشخصات یک عنصر مثل رنگ، اندازه قلم (font)، نوع قلم و … می شود.
مثلا با مشخص کردن رنگ با نام color و مقدار blue یعنی آبی، سطر به رنگ آبی در می آید.
به مثال زیر توجه کنید.

 <p style="color:blue; font-size:28px;">این یک سطر آبی رنگ است. در ضمن اندازه قلم ۲۸ پیکسل است.</p>
تمرین کنید

 

توضیح کدها
🔸رنگ سطر با نام color (رنگ) و مقدار آن blue (آبی) مشخص شده است.
🔹همچنین اندازه متن با نام font-size (اندازه قلم) و مقدار عددی آن در واحد پیکسل یعنی ۲۸px مشخص شده است.

ویژگی style مربوط به مبحث CSS می شود که در آموزش های آینده مفصل در مورد آن بحث خواهد شد.

 

ویژگی lang

این ویژگی مربوط به زبان سند HTML می شود و مخفف language به معنی زبان است.
این ویژگی را می توان در تگ HTML ذکر کرد.
فایده ذکر کردن زبان مثلا فارسی برای موتورهای جستجو و همچنین برنامه های کاربردی مخصوص دسترسی افراد معلول مانند صفحه خوان ها مهم است.
در کد زیر نحوه ذکر کردن این ویژگی برای زبان فارسی که fa است ذکر شده:

 
<!DOCTYPE html>
<html lang="fa">
<body>
<p>سلام ایران!</p>
</body>
</html>

 

ویژگی title

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

 
<!DOCTYPE html>
<html lang="fa">
<body>
<p  title="نمایش یک title">اشاره گر ماوس رو روی این متن بیار!</p>
</body>
</html>
تمرین کنید

 

نکات مهم و جمع بندی

🔸ویژگی ها را می توان هم با حروف کوچک انگلیسی و هم حروف بزرگ نوشت. اما کنسرسیوم جهانی وب تاکیدش بر حروف کوچک است و بهتر است از همین حروف استفاده شود.
🔹از علامت double quote یا نقل قول دوتایی (“) و single quote یا نقل قول تکی (‘) می توان برای محصور کردن مقدار یک ویژگی استفاده کرد.
اما زمانی که خود جمله ویژگی علامت نقل قول دوتایی دارد، می توان از علامت نقل قول تکی استفاده کرد یا برعکس٫
به مثال زیر توجه کنید. 
 
<!DOCTYPE html>
<html lang="fa">
<body>
<p  title="Ali says 'I am a student' and smiles.">علی می گوید «من یک دانش آموز هستم» و می خندد.</p>
</body>
</html>

در این جمله مقدار ویژگی title که یک جمله است خودش دارای نقل قول تکی است. بنابراین برای محصور کردن مقدار ویژگی از نقل قول دوتایی استفاده کردیم.

0
آموزش HTML ؛ درس چهارم: آشنایی با ویژگی ها (Attributes)

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *