ویژگی ها در HTML برای درج اطلاعات اضافی درباره المان استفاده میشه . مثلا ما یک المان تعریف میکنیم و میایم از ویژگی ها استفاده میکنیم و بهش آدرس لینک میدیم. به تگ تصویر آدرس تصویر میدیم.
تمامی المان ها در HTML می توانند ویژگی داشته باشند.
ویژگی ها اطلاعات بیشتری در مورد عناصر ارائه می دهند
ویژگی ها همیشه در تگ شروع مشخص می شوند
مشخصه ها معمولاً به صورت جفت نام/مقدار مانند: name = “value” می آیند
ویژگی href
تگ <a>یک هایپرلینک را تعریف می کند. این hrefویژگی URL صفحه ای را که پیوند به آن می رود مشخص می کند:
<a href="https://www.bs-design.ir">Visit Bs Design</a>
ویژگی src
تگ <img>برای جاسازی یک تصویر در یک صفحه HTML استفاده می شود. ویژگی srcمسیر تصویری که باید نمایش داده شود را مشخص می کند:
<img decoding="async" src="bs-logo.jpg">
دو راه برای تعیین URL در src ویژگی وجود دارد:
1. URL مطلق – پیوندهایی به یک تصویر خارجی که در وب سایت دیگری میزبانی شده است. مثال: src=”https://www.bs-design.ir/images/bs-logo.jpg” .
نکات: تصاویر خارجی ممکن است تحت حق چاپ باشند. اگر اجازه استفاده از آن را دریافت نکنید، ممکن است قوانین کپی رایت را نقض کنید. علاوه بر این، شما نمی توانید تصاویر خارجی را کنترل کنید. می توان آن را به طور ناگهانی حذف یا تغییر داد.
2. URL نسبی – پیوندهایی به تصویری که در وب سایت میزبانی می شود. در اینجا، URL شامل نام دامنه نیست. اگر URL بدون اسلش شروع شود، نسبت به صفحه فعلی خواهد بود. مثال: src=”bs-logo.jpg”. اگر URL با اسلش شروع شود، نسبت به دامنه خواهد بود. مثال: src=”/images/bs-logo.jpg”.
ویژگی عرض و ارتفاع
تگ <img>همچنین باید دارای ویژگی های widthو باشد heightکه عرض و ارتفاع تصویر (بر حسب پیکسل) را مشخص می کند:
<img fetchpriority="high" fetchpriority="high" decoding="async" src="img_girl.jpg" width="500" height="600">
ویژگی alt
ویژگی مورد نیاز altبرای <img> یک متن جایگزین برای یک تصویر مشخص می کند، اگر تصویر به دلایلی نمایش داده نشود این متن به جای تصویر نمایش داده میشه . توی کارهای بهینه سازی وب سایت برای موتورهای جستجو هم کمک بزرگی میکنه که بعدا توضیح کامل میدیم بهتون .
<img decoding="async" src="bs-logo.jpg" alt="Bs Design Logo">
ویژگی style
ویژگی style برای افزودن سبک به یک المان مانند رنگ، فونت، اندازه و موارد دیگر استفاده می شه. خیلی از قابلیت هایی که توی وب سایت میبینین از طریق استایل داره انجام میشه . در اصل بخوایم یه مثال کوتاه بزنیم زبان HTML مثل اسکلت یه ساختمان هست که با استایل میتونیم دیوارها رو بچینیم . نقشه داخلی ساختمون و محل قرارگیری اتاق ها و دیزاین داخلی رو انجام بدیم . فعلا اشاره کوچیکی میکنیم و بعدا بصورت کامل به طراحی CSS می پردازیم.
<p style="color:red;">This is a red paragraph.</p>
ویژگی زبان
برای اعلام زبان صفحه وب، همیشه باید ویژگی lang را در داخل تگ HTML قرار دهید. این قابلیت برای کمک به موتورهای جستجو و مرورگرها هستش که راحت زبان استفاده شده وب سایت شما را تشخیص بدن.
مثال زیر انگلیسی را به عنوان زبان مشخص می کند:
<!DOCTYPE html>
<html lang="en">
<body data-rsssl=1>
...
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
گزینه دیگری که میتونیم توی ویژگی lang ازش استفاده کنیم انتخاب کشور هم هستش . بطور مثال کلی کشور زبان انگلیسی صحبت می کنند و زبان انگلیسی US با زبان انگلیسی UK متفاوت هستش . حالا میتونیم در ادامه مقدار ویژگی زبان بیایم بهش کشور رو هم اعلام کنیم . مثال زیر زبان انگلیسی برای کشور ایالت متحده استفاده شده است :
<!DOCTYPE html>
<html lang="en-US">
<body data-rsssl=1>
...
</body>
</html>
ویژگی title
این ویژگی خیلی راحت میاد عنوان برای المان شما تعریف میکنه. حالا کجا بکار میاد!؟ وقتی موس رو میبرید روی المانی که دارای این ویژگی هست به اصطلاح یک Tooltip میاد که میگه این المان عنوانش چی هست .
<p title="I'm a tooltip">This is a paragraph.</p>
پیشنهادات
باز هم مثل دوره قبل میتونین ویژگی رو با حروف بزرگ بنویسین. ولی کلا استاندارد ها همه حروف کوچیک هستش و افراد حرفه ای هم استفاده نمیکنن از حروف بزرگ در ویژگی ها. مثلا شما میتونین title رو بعنوان ویژگی TITLE هم بنویسین ولی نکنین ! قشنگ نیست دیگه …
مورد بعدی این هست که مقدار ویژگی رو همیشه داخل “” بذارید . استاندارد هستش و پیشنهاد میکنیم بهتون که اینجوری کدنویسی بکنین خیلی بهتره . بطور مثال کدنویسی زیر اوکی هست از نظر استاندارد جهانی :
<a href="https://www.bs-design.ir/">Visit our Website</a>
ولی کدنویسی زیر مورد تایید استاندارد جهانی نیستش :
<a href=https://www.bs-design.ir/>Visit our Website</a>
حالا چرا میگیم نکنید این کار رو !؟ مثال زیر همه کدنویسی شما رو بهم میریزه و بخاطر وجود اسپیس یا همون فاصله بین دو تا کلمه مقدار ویژگی title میشه کلمه اول و کلمه دوم تبدیل میشه به یک ویژگی دیگه که ظاهر نمیشه توی مقدار ویژگی اول:
<p title=About bsdesign>
استفاده از '' یا "" !؟
نقل قول های دوگانه در اطراف مقادیر مشخصه رایج ترین در HTML هستند، اما می توان از نقل قول های تکی نیز استفاده کرد. در برخی شرایط، زمانی که مقدار مشخصه خود دارای گیومه های دوگانه است، لازم است از نقل قول های تکی استفاده شود:
<p title='Learning "HTML" With Bs Design'>
<p title="Learning 'HTML' With Bs Design">
جمع بندی
- همه عناصر HTML می توانند دارای ویژگی باشند
- مشخصه href برای تگ a صفحه ای را که پیوند به آن می رود مشخص می کند
- ویژگی src در تگ img مسیر تصویری که قرار است نمایش داده شود را مشخص می کند
- ویژگی های height و width ابعاد تصویر رو مشخص میکنه.
- ویژگی alt یک متن جایگزین برای یک تصویر فراهم می کنه
- ویژگی style برای افزودن استایل به یک عنصر مانند رنگ، فونت، اندازه و موارد دیگر استفاده می شود
- ویژگی
langدرتگ<html>زبان صفحه وب را اعلام می کند titleویژگی اطلاعات اضافی در مورد یک عنصر را تعریف می کند
