تبلیغات

ترجمه w3schools – یادگیری HTML: خصوصیات در HTML

اطلاعیه
از تاریخ 13 اردبیهشت 1398، تصمیم گرفتیم که مطالبی را براساس مستندات بخش «یادگیری HTML وبسایت w3schools» انتشار نماییم. به گونه‌ای که می‌توان گفت، این مطالب قرار است تقریبا ترجمه‌ی همان مطالب اصلی باشند. و همچنین جهت دسترسی به تمامی موارد بخش یادگیری HTML این سایت، از منوی شناور موجود در «این لینک» استفاده نمایید. توجه داشته باشید که این روند هنوز به اتمام نرسیده و مطالب ناقص هستند. و در نهایت منتظر نظرات شما دوستان عزیز هستیم.

خصوصیات (Attribute، ویژگی، صفت)، اطلاعات بیشتری را درباره‌ی المنت‌ها فراهم می‌کنند.

خصوصیات در HTML

  • تمامی المنت‌های HTML، می‌توانند خصوصیاتی داشته باشند.
  • خصوصیات، اطلاعات بیشتری را درباره‌ی المنت‌ها فراهم می‌کنند.
  • خصوصیات، همیشه در تگ آغازین مشخص می‌شوند.
  • خصوصیات، معمولا به صورت جفت name/value یا نام/مقدار نوشته می‌شوند. برای مثال: name=”value”

صفت href

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

<a href="https://www.fullkade.com">This is a link</a>
<!DOCTYPE html>
<html>
<body>

<h2>The href Attribute</h2>
<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>

<a href="https://www.fullkade.com">This is a link</a>

</body>
</html>

درباره‌ی لینک‌ها و تگ <a>، در آموزش‌های بعدی بیشتر یاد خواهید گرفت.

صفت src

تصاویر در HTML، با تگ <img> تعریف می‌‎شوند.

آدرس فایل تصویر نیز در صفت src تعریف می‌شود. (می‌توان آدرس تصویر را به صورت لینک مستقیم قرار دارد و یا اینکه از مسیر فعلی فایل به بعد را قرار داد؛ که در خط زیر، منظورمان تصویر img_fullkade_logo.jpg موجود در کنار فایل HTML می‌باشد.)

<img src="img_fullkade_logo.jpg">
<!DOCTYPE html>
<html>
<body>

<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag, and the filename of the image source is specified in the src attribute:</p>

<img src="https://fullkade.com/fullkade-logo-200x200home-.png" width="500" height="600">

</body>
</html>

صفات width و height

تصاویر در HTML، شامل مجموعه‌ای از صفات مربوط به اندازه (size) هستند، که عرض و ارتفاع تصویر را مشخص ‌می‌کنند:

<img src="img_girl.jpg" width="500" height="600">
<!DOCTYPE html>
<html>
<body>

<h2>Size Attributes</h2>
<p>Images in HTML have a set of size attributes, which specifies the width and height of the image:</p>

<img src="https://fullkade.com/wp-content/uploads/2019/05/img_girl.jpg" width="500" height="600">

</body>
</html>

سایز یا اندازه‌ی تصویر، براساس پیکسل (px) است؛ یعنی width=”500″ برابر 500 پیکسل پهنا می‌باشد. و height=”500″ برابر 600 پیکسل طول (ارتفاع) می‌باشد

صفت alt

صفت alt، یک متن جایگزین برای زمانی که یک تصویر نتواند نمایش داده شود مشخص می‌کند.

<img src="img_girl.jpg" alt="Girl with a jacket">
<!DOCTYPE html>
<html>
<body>

<h2>The alt Attribute</h2>
<p>این ویژگی باید محتوای تصویر را بازتاب کند، بنابراین کاربرانی که نتوانند تصویر را ببینند، درک درستی از تصویر خواهند داشت:</p>

<img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600">

</body>
</html>
صفت alt، همچنین برای زمانی که تصویر وجود نداشته باشد نیز استفاده می‌شود.

مثال: ببینید چه اتفاقی می‌افتد اگر ما سعی کنیم که تصویری را نمایش دهیم که وجود ندارد:

<!DOCTYPE html>
<html>
<body>

<img src="img_typo.jpg" alt="Girl with a jacket">

<p>If we try to display an image that does not exist, the value of the alt attribute will be displayed instead. </p>

</body>
</html>

صفت style

صفت style، برای استایل دهی به یک المنتی استفاده می‌شود. مانند رنگ، فونت، اندازه و …:

<p style="color:red">I am a paragraph</p>
<!DOCTYPE html>
<html>
<body>

<h2>The style Attribute</h2>
<p>The style attribute is used to specify the styling of an element, like color:</p>

<p style="color:red">I am a paragraph.</p>

</body>
</html>
درباره‌ی استایل دهی، در آموزش‌های بعدی و همچنین آموزش‌های CSS، بیشتر یاد خواهید گرفت.

صفت lang

زبان سند، در تگ <html> و توسط صفت lang می‌تواند تعریف شود.

تعریف زبان برای برنامه‌هایی که صفحه را می‌خوانند (اسکرین ریدرها، مثل مرورگرها) و همچنین موتورهای جستجو، مهم است:

<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>

دو حرف اول، زبان را مشخص می‌کند (که در اینجا es است). و اگر بخواهیم به گویش آن زبان نیز اشاره کنیم، از دوحرف دیگری در انتهای دو حرف قبلی و بعد از قرار دادن یک خط تیره، استفاده می‌کنیم (که دراینجا US است).

صفت title

در مثال زیر، یک صفت title به المنت <p> اضافه شده است. مقدار title، به عنوان tooltip  (راهنمایی) و زمانی که ماوس به بالای پاراگراف برود، نمایش داده خوهاد شد:

<p title="I'm a tooltip">
This is a paragraph.
</p>
<!DOCTYPE html>
<html>
<body>

<h2 title="I'm a header">The title Attribute</h2>

<p title="I'm a tooltip">
Mouse over this paragraph, to display the title attribute as a tooltip.
</p>

</body>
</html>

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

در استاندارد HTML5، استفاده از حروف کوچک برای نام صفات/خصوصیات اجباری نیست. و عنوان صفات می‌تواند با حروف بزرگ یا کوچک نوشته شود؛ مانند title  یا TITLE.

اما W3C (کنسرسیوم جهانی وب) توصیه می‌کند که از حروف کوچک در HTML استفاده شود.

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

پیشنهاد ما: استفاده از کوتیشن برای مقدار صفت

در استاندارد HTML5، استفاده از کوتیشن (quotes) در اطراف مقدار صفات اجباری نیست.

لذا در مثال زیر، صفت href با توجه به توضیح بالا، می‌تواند به دو صورت زیر نوشته شود:

<a href=https://www.w3schools.com>
<!DOCTYPE html>
<html>
<body>

<a href=https://www.w3schools.com>This is a link</a>

</body>
</html>
<a href="https://www.w3schools.com">
<!DOCTYPE html>
<html>
<body>

<a href="https://www.w3schools.com">This is a link</a>

</body>
</html>

اما W3C (کنسرسیوم جهانی وب) توصیه می‌کند که از کوتیشن‌ها استفاده کنید. مثلا در مثال زیر، صفت title به درستی مقدار نوشته شده برای آن را نمایش نخواهد داد! چرا که مقدار آن شامل فاصله (Space) است:

<p title=About W3Schools>
<!DOCTYPE html>
<html>
<body>

<h1>About W3Schools</h1>

<p title=About W3Schools>
You cannot omit quotes around an attribute value 
if the value contains spaces.
</p>

<p><b>
If you move the mouse over the paragraph above,
your browser will only display the first word from the title.
</b></p>

</body>
</html>
استفاده از کوتیشن‌ها مرسوم‌تر است. نادیده‌گرفتن کوتیشن‌ها می‌تواند موجوب تولید ارورهایی شود.
در فول کده، ما همیشه از کوتیشن‌ها در اطراف مقادیر صفات استفاده می‌کنیم.

تک کوتیشن یا دابل کوتیشن؟!

گرچه استفاده از حرف دابل‌کوتیشن ( ” ) در اطراف مقادیر ویژگی‌های HTML مرسوم‌تر است؛ اما از سینگل‌کوتیشن ( ‘ ) نیز می‌توان استفاده کرد!

و البته در برخی از شرایط، زمانی که خود  مقدار ویژگی نیز شامل دابل‌کوتیشن باشد، لازم است که از سینگل‌کوتیشن استفاده شود:

<p title='Hadi "Akbarzadeh" FuLLKade'>

و یا برعکس:

<p title="Hadi 'Akbarzadeh' FuLLKade">

<!DOCTYPE html>
<html>
<body>

<h2>Single or Double Quotes?</h2>
<p>In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:</p>
<p>Move your mouse over the paragraphs below to see the effect:</p>

<p title='John "ShotGun" Nelson'>John with double quotes</p>
<p title="John 'ShotGun' Nelson">John with single quotes</p>

</body>
</html>

خلاصه‌ی درس

  • تمام المنت‌های HTML می‌توانند خصوصیات یا صفاتی داشته باشند.
  • صفت title، اطلاعات اضافه در قالب tool-tip نمایش می‌دهد.
  • صفت href، محلی برای نوشتن آدرس لینک‌ها می‌باشد.
  • صفات width و height، اندازه‌ی تصویر را مشخص می‌کنند.
  • صفت alt، یک متن برای مرورگرهای صفحه (اسکرین ریدرها) فراهم می‌کند.
  • در فول کده، ما همیشه از حروف کوچک برای نوشتن نام ویژگی‌ها استفاده می‌کنیم.
  • در فول کده، ما همیشه از کوتیشن در اطراف مقدار ویژگی‌ها استفاده می‌کنیم.
پس از اتمام دروس، لیست کامل صفات را به سایت اضافه خواهیم کرد.

درس بعدی (به زودی)درس قبلی

پاسخ دهید

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

cp-codfk

نظرات ثبت شده بدون دیدگاه

توضیحات پیشنهادی نظرات اشتراک