با قسمت جدیدی از آموزش HTML5 در Alt+Tab همراه شما هستیم. در قسمت قبل به معرفی المان های HTML پرداختیم؛ اما اگر بخواهیم برای این المان ها خصوصیات خاصی قائل شویم، باید چه کار کنیم؟ فرض کنیم می خواهیم از دو عکس یکسان در کنار همدیگر استفاده کنیم، با این تفاوت که یکی کوچک و دیگری بزرگ تر باشد. اینجاست که باید از یک Attribute - به معنی خصوصیت - برای المان img استفاده کنیم تا بتوانیم این دو عکس را به شکلی متفاوت تعریف کنیم. در واقع Attribute ها برای افزودن اطلاعات تکمیلی به یک المان، استفاده می شوند.

HTML

attribute های HTML

  • تمامی المان های HTML می توانند attribute داشته باشند.
  • هر المان، از attribute های مخصوص به خود پشتیبانی می کند.
  • attribute ها همیشه در تگ آغازین مشخص می شوند.
  • attribute ها معمولا به صورت جفت "name="value معرفی می شوند؛

The href Attribute

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

آدرس Link در مشخصه href ثبت می شود.

(برای مشاهده نتیجه کدها بر روی Result کلیک کنید)

در قسمت های بعدی این دوره، مفصلاً درباره ی لینک ها و تگ <a> صحبت می کنیم.

The src Attribute

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

آدرس عکس در src Attribute مشخص می شود.

attribute های عرض و ارتفاع

تصاویر در HTML ، یک دسته attribute سایز دارند که عرض و ارتفاع عکس را مشخص می کنند.

سایز تصاویر با پیکسل مشخص می گردد؛ width="100" یعنی عرض تصویر 100 پیکسل است.

درباره ی تصاویر در HTML در قسمت های بعدی این دوره مفصل یاد می گیریم.

The alt Attribute

alt Attribute یک متن جایگزین است که برای زمانی که تصویر قابل نمایش نباشد مشخص می گردد.

screen readers ها می توانند مقدار این attribute را بخوانند؛ از این طریق کسی که به صفحه وب گوش می دهد (مثلا یک فرد نابینا)، می تواند المان را گوش دهد.

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

The style Attribute

برای مشخص کردن ظاهر یک المان مانند رنگ، فونت، سایز و ... از style Attribute استفاده می شود.

درباره ی چگونگی تعیین ظاهر المان ها در قسمت های بعدی این دوره و دوره آموزش جامع CSS مفصل یاد می گیریم.

(بله! خبر خوب اینه که ALT+TAB در آینده نه چندان دور آموزش CSS هم به مجموعه آموزش ها اضافه می کند!)

The lang Attribute

زبان document را می توان در تگ <html> مشخص نمود.

زبان document با lang Attribute مشخص می گردد.

مشخص کردن زبان برای دسترسی اپلیکیشن ها (screen readers ها) و موتورهای جستجو مهم است:

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

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

The title Attribute

اینجا یک title Attribute به تگ <p> اضافه شده است. هنگامی که نشانگر mouse روی پاراگراف قرار گیرد؛ مقدار title Attribute به عنوان tooltip نمایش داده می شود و توضیح مختصری راجع به پاراگراف ارائه می کند.

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

استاندارد HTML5 اجباری به استفاده از حروف کوچک برای نامیدن Attribute ها ندارد.

می توان title Attribute را با حروف بزرگ (TITLE) یا کوچک (title) نوشت.

W3C پیشنهاد می کند  در HTML از حروف کوچک استفاده شود؛ و برای document هایی مثلا از نوع XHTML الزام به استفاده از حروف کوچک است.

در ALT+TAB ، همیشه از حروف کوچک برای نام Attributeها استفاده می کنیم.

ضمناً پیشنهاد می کنیم که از علامت Quote برای مشخص کردن مقدار Attribute ها استفاده شود.

استاندارد HTML5 اجباری به استفاده از علامت Quote برای مشخص کردن مقدار Attribute ها ندارد.

می توان href Attribute که در بالا نوشته ایم را به صورت زیر بنویسیم:

W3C پیشنهاد می کند در HTML از علامت Quote استفاده شود؛ و برای document هایی مثلا از نوع XHTML الزام به استفاده از حروف کوچک است.

گاهی اوقات استفاده از علامت Quote برای مشخص کردن مقدار Attribute ها ضروری است. به عنوان نمونه در این مثال مقدار title Attribute را به درستی نمایش داده نمی شود؛ چرا که یک space  بین کلمات آن وجود دارد.

استفاده از علامت Quote بسیار رایج است.

حذف علامت Quote می تواند باعث بروز error ها گردد.

در ALT+TAB همیشه از علامت  Quote  برای مشخص کردن مقدار Attribute ها استفاده می کنیم.

از Double Quotes استفاده کنیم یا Single Quote ؟

در HTML استفاده از Double Quotes برای مشخص کردن مقدار Attribute ها رایج تر است؛ اما می توان Single Quote را نیز به کار برد.

در برخی موقعیت ها که خود مقدار Attribute شامل Double Quotes است لازم است که از Single Quote استفاده کنیم:

<p title='امین "فاطمی" نیا'>

یا برعکس:

<p title="امین 'فاطمی' نیا">

خلاصه این قسمت

  • تمامی المان های HTML می توانند attribute داشته باشند.
  • مقدار title Attribute به شکل tooltip توضیح مختصری ارائه می کند.
  • آدرس لینک در href Attribute مشخص می شود.
  •  attribute های عرض و ارتفاع،  اطلاعات سایز تصاویر را مشخص می کنند.
  • alt Attribute یک متن برای screen readers ها ارائه می کند.
  • در ALT+TAB ما همیشه از حروف کوچک برای نام Attribute ها استفاده می کنیم.
  • در ALT+TAB ما همیشه از علامت Double Quotes  برای تعیین مقدار Attribute ها استفاده می کنیم.

ادامه دارد...