در جلسه قبلی، توضیحاتی مبنی بر تگ ها یا عنصر (Element) های HTML دادیم و حال در این جلسه قصد داریم مبحث صفت ها (Attributes) را پوشش دهیم.

همانطور که در جلسات قبلی گفتیم، صفت ها (Attributes) اطلاعات اضافی و کاربردی را به تگ های HTML اضافه می کنند.

صفت های HTML

تمامی تگ های HTML می توانند صفت داشته باشند.

صفت ها اطلاعات اضافی را به تگ های HTML اضافه می کنند.

صفت ها همیشه در تگ شروع بیان می شوند.

صفت ها معمولاً به صورت name/value یا همان مقدار / نام ظاهر می شوند، به طور مثال:

name=”value”

صفت href در HTML

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

مثال:

This is Kanithemes website link

در جلسات آینده، ما مباحث بیشتری درباره لینک ها و تگ <a> توضیح خواهیم داد.

صفت src در HTML

تصاویر در HTML با استفاده از تگ <img> توصیف می شوند.

درواقع، نام منبع تصویر در صفت src مشخص می شود.

مثال:

صفت width و height در HTML

در HTML، دو صفت با نام width و height وجود دارد و همانطور که از نام‌شان پیداست، برای تعیین کردن طول و عرض تصاویر استفاده می شوند (width برای عرض و height برای طول).

مثال:

صفت های عرض و طول در قالب پیکسل ها (Pixels) مشخص می شوند. به طور مثال، در مثال بالا ما مقدار عرض را 500 قرار داده ایم، و این بدین معنیست که عرض تصویر ما 500 پیکسل می باشد.

صفت alt در HTML

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

مقداری که ما برای صفت alt مشخص کرده ایم، می تواند توسط screen readers یا همان ربات های صفحه خوان، خوانده شوند. به طور مثال، اگر فردی که در بینایی خود دچار اختلال باشد و بخواهد از سیستمی برای خواندن صفحه استفاده کند، استفاده از صفت alt برای تصاویر نیز برای آن شخص بسیار کاربردی است، زیرا بجای تصویر نیز می تواند متن جایگزین را بشنود.

مثال:

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

به طور مثال در تصویر زیر، ما تصویرمان غیرقابل نمایش است اما متن جایگزین به جای آن درحال نمایش می باشد:

متن جایگزین تصویر

صفت style در HTML

معمولاً صفت style در HTML برای مشخص کردن طرح و استایل تگ ها استفاده می شود، به طور مثال می توان با آن رنگ فونت، فونت، اندازه و… تگ را تغییر داد.

مثال:

در مثال زیر، ما با استفاده از صفت style، رنگ متن تگ را به رنگ قرمز تغییر داده ایم:

رنگ متن در html

صفت lang در HTML

زبان (Language) صفحه HTML می تواند در تگ <html> مشخص شود.

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

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

مثال:

دو حرف اول، زبان صفحه را مشخص می کنند (یعنی en). و اگر بخواهیم برای زبان صفحه، زبان فارسی را انتخاب کنیم، به راحتی می توان دو حرف fa را قرار داد. در مثال بالا، ما در جلوی en دو حروف دیگر US را قرار داده ایم، این مورد در مواقعی بوجود می آید که کاربر بخواهد زبان یک صفحه را همراه با لهجه آن مشخص کند. به طور مثال دو حروف US مخفف همان United States می باشد، حال اگر یک فرد انگلستانی بخواهد لهجه خود را مشخص کند، می تواند بجای US از دو حروف UK استفاده کند.

صفت title در HTML

در اینجا، صفت title به تگ <p> که همان تگ پاراگراف است، اضافه می شود. مقداری که ما برای صفت title مشخص می کنیم، زمانی نمایش داده می شود که نشانگر ماوس بر روی پاراگراف برود.

مثال:

صفت title

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

همانطور که در جلسات قبل ذکر کردیم، استاندارد HTML 5 نیازی به حروف کوچک ندارد.

به طور مثال، صفت title می تواند هم به صورت TITLE نوشته شود و هم به صورت title.

اما ما پیشنهاد می کنیم که از حروف کوچک نیز استفاده کنید، به ویژه زمانی که می خواهید یک فایل XHTML ایجاد کنید.

پیشنهاد می شود که از علامت نقل قول استفاده کنید

استاندارد های HTML 5 نیز نیازی به استفاده از علامت نقل قول (“”) ندارد.

به طور مثال، ما می توانیم صفت href را هم همراه با علامت نقل قول (Quote) بنویسیم و هم بدون نقل قول:

در مثال اول، ما صفت href را بدون علامت نقل قول استفاده کردیم و در مثال دوم نیز همراه با علامت نقل قول. اما ما در اینجا پیشنهاد می کنیم که حتماً از نقل قول استفاده کنید.

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

صفت بدون نقل قول

همانطور که مشاهده می کنید، ما برای صفت title دو مقدار About Kanithemes را مشخص کرده ایم ولی چون نقل قول استفاده نکردیم، تنها حرف اول نمایش داده شده است.

سینگل کوتیشن یا دابل کوتیشن؟

دابل کوتیشن (“”) برای استفاده در اطراف صفت ها، معمول تر است تا استفاده از سینگل کوتیشن (‘ ‘).

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

به طور مثال:

و بلعکس:

خلاصه این جلسه

تمامی تگ های HTML می توانند از صفت ها استفاده کنند.

صفت title اطلاعات اضافی به پاراگراف اضافه می کند زمانی که نشانگر ماوس بر روی پاراگراف برود.

صفت href آدرس لینک را مشخص می کند.

صفت های width و height طول و عرض تصویری که می خواهیم قرار دهیم را مشخص می کند.

صفت alt یک متن جایگزین برای تصویر مشخص می کند برای زمانی که تصویر قابل نمایش نباشد و یا زمانی که Screen reader ها بخواهند صفحه را بخوانند.

ما پیشنهاد می کنیم تا جایی که می توانید از حروف کوچک در قرار دادن تگ ها و صفت ها استفاده کنید.

و همچنین پیشنهاد می کنیم که از علامت نقل قول نیز در مقدار دهی صفت ها استفاده کنید.

آموزش زبان HTML – جلسه سوم – تگ هاآموزش زبان HTML – جلسه پنجم – هدینگ ها
پیشنهاد می کنیم برای دریافت آخرین مطالب کانال تلگرام کانی تمزرا دنبال کنید .