آموزش HTML صفحه اصلی اینستاگرام ما
صفت های HTML

صفت های HTML


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


صفت های HTML


صفت href

تگ <a> یک لینک مشخص میکند . صفت href آدرس اینترنتی(URL) صفحه لینک مربوط را مشخص میکند :

مثال:

<a href="https://www.w3schools.com">این یک لینک است</a>
امتحان کن »

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


صفت src

تگ <img> برای جاسازی یک تصویر در یک صفحه HTML استفاده میشود . صفت src نیز مسیر تصویر نمایش داده شده را مشخص میکند :

مثال:

<img src="https://www.w3schools.com/html/img_girl.jpg">
امتحان کن »

دو روش برای مشخص کردن آدرس اینترنتی(URL) در صفت src وجود دارد :

1.URL مطلق - به یک تصویر خارجی که در وب سایت دیگری میزبانی میشود لینک میشود . مانند:

src="https://www.w3schools.com/images/img_girl.jpg"

2.URL نسبی - به یک تصویر که در داخل وب سایت میزبانی میشود لینک میشود . مانند :
src="img_girl.jpg" یا src="/images/img_girl.jpg"


صفت های width و height

تگ img همچنین باید شامل صفت های width و height باشد ، که پهنا و بلندای تصویر (در پیکسل) را مشخص میکنند :

مثال:

<img src="https://www.w3schools.com/html/img_girl.jpg" width="500" height="600">
امتحان کن »

صفت alt

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

مثال:

<img src="img_girl.jpg" alt="دختر با یک ژاکت">
امتحان کن »

مثال:

ببینید در صورتیکه تلاش کنیم تا یک تصویر که وجود ندارد را نمایش دهیم چه اتفاقی می افتد :

<img src="img_typo.jpg" alt="دختر با یک ژاکت">
امتحان کن »

صفت style

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

مثال:

<p style="color:red;">این یک پاراگراف سرخ رنگ است</p>
امتحان کن »
بعدا در این آموزش بیشتر درباره سبک دهی و طراحی ظاهر خواهید آموخت .

صفت lang

شما همیشه باید صفت lang را داخل تگ <html> بگنجانید ، تا زبان صفحه وب را مشخص کنید . این کار به منظور کمک به موتورهای جستجو و مرورگرها است .

مثال زیر انگلیسی را بعنوان زبان صفحه مشخص میکند :

مثال:

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

...

</body>
</html>

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

مثال زیر انگلیسی را بعنوان زبان صفحه و ایالات متحده آمریکا را بعنوان کشور مشخص میکند :

مثال:

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

...

</body>
</html>

صفت title

صفت title مقداری اطلاعات اضافی درباره یک عنصر مشخص میکند .

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

مثال:

<p title="من یک راهنمای ابزار هستم">
این یک پاراگراف است
</p>
امتحان کن »

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

استاندارد HTML نیازی به نام های صفت با حروف کوچک ندارد .

صفت title میتواند با حروف بزرگ یا با حروف کوچک نوشته شود مانند title یا TITLE .

W3C استفاده از حروف کوچک را در HTML پیشنهاد میکند ، و خواستار استفاده از حروف کوچک برای انواع سند دقیق تر مانند XHTML است .

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

پیشنهاد ما : همیشه مقادیر صفت را داخل علامت های نقل قول قرار دهید

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

با این حال ، W3C استفاده از علامت های نقل قول پیرامون مقادیر صفت را در HTML پیشنهاد میکند .

خوب:

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

بد:

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

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

مثال:

<p title=درباره وبداناک>
امتحان کن »
در وب داناک ما همیشه از علامت های نقل قول پیرامون مقادیر صفت استفاده خواهیم کرد .

علامت های نقل قول تکی یا دوتایی؟

استفاده از نشان های نقل قول دوتایی(" ") پیرامون مقادیر صفت در HTML رایج تر است ، اما نشان های نقل قول تکی(' ') نیز میتواند استفاده شود .

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

<p title='John "ShotGun" Nelson'>

یا برعکس :

<p title="John 'ShotGun' Nelson">
امتحان کن »

چکیده فصل




پسین پیشین