ویژگی های HTML اطلاعات بیشتری در مورد عناصر HTML ارائه می دهند.
ویژگی‌های HTML چه خصوصیاتی دارند؟
- تمام تگ‌های HTML می‌توانند دارای ویژگی یا چند ویژگی باشند.
- ویژگی‌ها اطلاعات بیشتری در مورد عناصر (تگ Html) ارائه می‌دهند.
- همیشه ویژگی‌ها را درون تگ آغازین مشخص می‌کنند.
- ویژگی‌ها معمولاً به صورت جفت عنوان ویژگی = "مقدار ویژکی" درون تگ نخست html قرار می‌گیرد. مانند: name = "value"
ویژگی href در تگ <a> پیوند (لینک)
تگ <a> یک پیوند یا لینک به صفحه‌ای دیگر ایجاد میکند. برای این که بتوانیم آدرس صفحه‌ای که کاربر را به آن هدایت کنیم درون تگ <a> بدهیم باید از ویژگی با عنوان href استفاده کنیم و آدرس URL صفحه ای را که پیوند به آن می رود را درون قسمت مقدار آن مشخص کنیم:
در فصل «پیوندهای html» در مورد لینک‌سازی بیشتر خواهید آموخت.
ویژگی src در تگ <img> تصویر
تگ <img> برای درج یک تصویر در یک صفحه HTML استفاده می شود. ویژگی src در این تگ مسیر فایل تصویر را بر روی هاست وب سایت نمایش می‌دهد:
دو راه برای نوشتن آدرس URL تصویر در ویژگی src وجود دارد:
۱. آدرس URL مطلق: معمولا از این روش برای تصاویری استفاده می‌شود که فایل آن در مسیری بیرون از آدرس وب‌سایت جاری باشد. با این روش پیوندی به یک تصویر خارجی که در وب سایت دیگری میزبانی شده است داده می‌شود. برای مثال:
src="https://www.ahp.ir/Portals/0/Articles/Images/Photography/2021/06-Light-Painting.jpg"
توجه:
تصاویر با آدرس‌های خارج از وب سایت شما ممکن است تحت قوانین کپی‌رایت و حق مالکیت باشند، پس بهتر است پیش از نمایش در سایت، اجازه استفاده از آن را دریافت کنید، در غیر این صورت ممکن است قوانین کپی رایت را نقض کنید. علاوه بر این، شما نمی‌توانید تصاویر خارجی را کنترل کنید یا از وجود همیشگی آنها مطمئن باشید چون مالک سایتی که آن تصویر را از آنجا برداشته‌اید هر لحظه می تواند آن را به طور ناگهانی حذف یا تغییر دهد.
۲. آدرس URL نسبی: زمانی که شما قصد نمایش تصاویری که قبلا روی هاست وب سایت خود بارگذاری کرده‌اید را دارید و آدرس URL آن فایل با نام دامنه هم نام با صفحه‌ای که تصویر را در آن نمایش می‌دهید باشد، دیگر نیازی نیست تا از آدرس مطلق برای مسیر تصویر خود استفاده کنید. در اینجا، می‌توانید نام دامنه را از آدرس URL حذف کنید. اگر URL را بدون استفاده از اسلش «/» آغاز کنید مرورگر شما آدرس URL فعلی در مرورگر را هر چه که باشد (آدرس صفحه جاری) در ابتدا قرار داده و در ادامه آدرس نوشته‌شده در src را به آن اضافه میکند، در واقع آدرس نسبت به صفحه فعلی خواهد بود. مثال:
src="armin-rahimian.jpg"
ولی اگر آدرس URL را با اسلش «/» آغاز کنید، مرورگر شما در ابتدای آن آدرس دامنه را در نظر می‌گیرد و نسبت به دامنه آدرس شما را فراخوانی میکند. مثال:
src="/Portals/0/ThemePluginPro/uploads/2021/8/24/armin-rahimian.jpg"
توجه:
تقریباً همیشه بهترین کار استفاده از URL های نسبی است. چون اگر آدرس دامنه شما تغییر کند و یا فایل در سایت دیگری حذف شود یا تغییر پیدا کند مشکلی برای آدرس‌دهدی تصویر آن صفحه ایجاد نخواهد شد.
ویژگی width (عرض) و height (ارتفاع) در تگ <img> تصویر
تگ <img> باید دارای دو ویژگی عرض و ارتفاع باشد که اندازه تصویر را به پیکسل (Pixel) و با دو عنوان ویژگی width و height مشخص میکند. مقادیر درون آن بدون نیاز به پسوند px و به صورت عددی درج می‌شود:
ویژگی alt (متن جایگزین) در تگ <img> تصویر
تگ <img> از یک ویژگی بسیار مهم با عنوان alt استفاده میکند که در واقع یک متن جایگزین برای تصویر را مشخص میکند. این ویژگی دو ضرورت برای استفاده درون تگ تصویر دارد. ابتدا این که اگر به هر دلیلی تصویر فراخوانی نشود و کاربر مخاطب نتواند تصویر را ببینید مرورگر یک علامت شکستگی و عد فراخوانی عکس را به همراه متن جایگزین که شما در ویژگی alt قرار داده وبدید را نشان می‌دهد و کاربر متوجه می‌شود که یک عکس با این عنوان فراخوانی نشده است. معمولا این وضعیت می تواند به دلیل ناتوانی اتصال به سایت، یا خطا در ویژگی src و یا ایرادی در مرورگر کاربر باشد. دلیل دوم ضرورت استفاده از ویژگی alt استفاده خزنده‌ها و ربات‌های موتورهای جستجو است که درکی متنی از تصویر شما پیدا کنند تا تصویری که در این صفحه استفاده کردید را متناسب با متن جایگزین در موتورهای جستجو در قسمت تصاویر نمایش دهد.
برای این که ببینید در صورتی که تصویر فراخوانی نشود ما یک خطا در آدرس تصویر ایجاد می‌کنیم تا شما با تست زیر متوجه نحوه نمایش در هنگام بروز خطا در تصویر بشوید:
در فصل «تگ img» در مورد تصویر در html بیشتر خواهید آموخت.
ویژگی Style (سَبک نمایش) در عناصر مختلف html
از ویژگی style برای افزودن سبک به یک عنصر استفاده می‌شود. ویژگی‌هایی مانند رنگ، فونت، اندازه و موارد دیگر که روی ظاهر و نحوه نمایش آن عنصر در صفحه وب ما تاثیرگذار است.
در فصل «سبک‌ها Style» در مورد نحوه تغییرات ظاهری عناصر html بیشتر خواهید آموخت.
ویژگی زبان در عنصر html
برای اعلام زبان صفحه وب، همیشه باید در تگ html از ویژگی lang استفاده نمایید. این کار بسیار اهمیت دارد و به موتورهای جستجو و مرورگرها زبان صفحه را اعلام میکند.
مثال زیر زبان فارسی را برای کشور ایران به عنوان زبان سند html مشخص می کند:
اگر تنها از fa در مقدار ویژگی lang استفاده کنید مرورگر و یا موتورهای جستجو تنها به زبان صفحه آگاه می‌شوند که در این مثال fa با حروف کوچک کد بین‌المللی زبان فارسی در وب است. ولی اگر با یک خط فاصله و درج کد بین‌المللی کشور با حروف بزرگ نیز مثلا IR- اشاره شود، مرورگرها و موتورهای جستجو علاوه بر زبان صفحه به کشوری که برای آن صفحه مناسب است نیز اشاره میکند.
شما می‌تواند از صفحه «مرجع کدهای زبان» تمامی کدهای زبان‌ها و کشورهای مختلف را مشاهده نمایید.
ویژگی title (عنوان) در عناصر مختلف html
ویژگی title اطلاعات اضافی را در قالب یک متن به کار بر نشان می‌دهد. این حالت زمانی رخ می‌دهد که نشانه‌گر ماوس شما روی محلی که آن عنصر Html وجود دارد قرار بگیرد و متن داخل ویژگی titleرا به صورت یک کادر کوچک روی آن قسمت از صفحه به کاربر نمایش می‌دهد:
همیشه از حروف کوچک برای ویژگی‌ها استفاده کنید
طبق استاندارد HTML نیازی به نوشتن عناوین ویژگی‌ها با حروف کوچک نیست. برای مثال ویژگی title و یا هر ویژگی دیگر را می‌توان هم با حروف بزرگ و هم با حروف کوچک مانند title یا TITLE نوشت.
با این حال، W3C توصیه میکند که عناوین و مقادیر ویژگی‌های عانصر html را با حروف کوچک بنویسید، و خواسته برای انواع سند سختگیرانه تر مانند XHTML با حروف کوچک نوشته شوند.
همیشه مقادیر ویژگی‌ها را درون علامت نقل قول (کوتیشن) قرار دهید.
در استاندارد HTML نیازی به قرار دادن یک مقدار نیازی به قرار دادن درون کوتیشن ندارد. ولی اگر مقدار شما بیش از یک کلمه باشد قطعا باعث بروز خطا و اشتباه در کدهای Html شما می‌شود. لذا اکیدا پیشنهاد می‌کنیم که مقادیر ویژگی را درون 'تک کوتیشن' یا "دابل کوتیشن" قرار دهید.
از کوتیشن تک استفاده کنیم یا از دابل کوتیشن؟
نقل قول‌های دوگانه یا دابل کوتیشن در ابتدا و انتهای مقادیر ویژگی رایج‌ترین روش استفاده از کوتیشن در HTML هستند، اما می توان از نقل قول‌های تکی نیز استفاده کرد. گاهی نیاز هست که از این روش استفاده شود و آن زمانی است که شما مجبورید داخل متن ویژگی از دابل کوتیشن به عنوان مقدار استفاده کنید. در این حالت باید از تک کوتیشن در دو سمت مقدار ویژگی استفاده کنید. به دو مثال زیر توجه کنید: